Найти тему

Правило создания текстовых блоков в Figma

Оглавление

Последние несколько лет мне попадаются исходники разных дизайнеров, где-то я прихожу в новую компанию и это наследство от предыдущего дизайнера, где-то скаченные исходники из комьюнити иногда друзья предлагают посмотреть на их макеты. Очень часто встречается одна и та же ошибка при создании текстового блока, почему не знаю, но если в тексте встречается абзац его делают отбивкой через [Enter] а что ещё более странно иногда это два совершенно разных элемента стоящих рядом, и тот и другой способы не правильные. Постараюсь объяснить как правильно и комфортно работать с текстом в Figma.

Неправильный способ №1 отбивка через [Enter]

На изображение в верхней части показан негативный пример, в нижней части позитивный
На изображение в верхней части показан негативный пример, в нижней части позитивный

Самое часто встречающаяся у дизайнеров да и не только ошибка сделать абзац используя пустую строку или по другому отбить через клавишу [Enter]. Это плохо как минимум потому что текстовый редактор в таком случае делает расстояние между абзацами текста размером с высоту строки что нарушает правило близости и рушит ритм, создаётся впечатление что у нас уже начался другой текстовый блок и читать такое не комфортно.

Правильным вариант использования параметра Paragraph spacing в вашем текстовом редакторе. Таким образом у вас будет возможность влиять на все отступы параграфов в вашем макете так как они будут представлять собой единую сущность настраиваемую в одном месте.

Неправильный способ №2 отбивка путём создания нескольких элементов

На изображение в верхней части показан негативный пример, в нижней части позитивный
На изображение в верхней части показан негативный пример, в нижней части позитивный

На этом примере визуально всё в порядке, наш абзац имеет меньший отступ от своего соседа чем от заголовка и смотрится не плохо, но дизайнер допустил ошибку и добился такого результата созданием нескольких текстовых элементов, всё грамотно подогнал чтобы смотрелось чётко.

Такой способ плохой потому что в случае изменение объёма текста одного из абзацев нам придётся в ручную двигать весь макет что займёт время и верстальщику придётся вычислять отступ, чтобы задать параметр Paragraph spacing в коде. Скорее всего верстальщик выберет другое значение или вообще проигнорирует что повлияет на внешний вид вашего дизайна.

Для безопасности будущего ваших макетов используйте параметра Paragraph spacing.

Правильный способ отбивки абзаца

На изображение с лева пример текста, в правой части изображена панель настройки текста и подсказка
На изображение с лева пример текста, в правой части изображена панель настройки текста и подсказка

Правильным и комфортным для работы методом будет использовать возможность Figma задавать параметр Paragraph spacing в настройках текстового блока. Таким обозом мы заранее задаём какой у нас будет отступ. И теперь, для того чтобы перенести слово и прогнозировать этот параметр нам потребуется сочетание клавиш [Shift] + [Enter]