Стиль текста в Figma
Одной из основ дизайна наряду с цветами и компонентами является типографика. Поэтому начинать создание дизайна необходимо с формирования паттернов для нормальной типографики, разборчивой и согласованной. Впоследствии это упростит процесс ее масштабирования при переходе от одного устройства или приложения — к другому, а также облегчит для дизайнеров момент передачи проекта разработчикам.
В Figma есть возможность задавать свойства для текстовых объектов, к примеру, устанавливать размер, интерлиньяж. Предусмотрено сохранение стилей в библиотеке, где их можно найти в любой момент и поделиться с другими членами команды либо с заказчиком.
Процесс проектирования, благодаря стилям, становится более четким, прозрачным. Когда нужно внести в дизайн некие коррективы, задать другой текстовый параметр, то измененный вариант стилей можно передать сразу во все файлы, где данные стили были задействованы. Для этого следует лишь опубликовать обновление в исходной библиотеке Figma.
Стиль текста в Figma
Далее перечислены свойства, присущие текстовым стилям в Figma, и параметры, которые тут задать нельзя.
Задаваемые свойства:
- Доступные к установке в Figma шрифты, их размер, вес.
- Межстрочный интервал (интерлиньяж).
- Интервал между буквами и абзацами, структурирование текста.
- Украшение текста (зачеркивающая и подчеркивающая линии).
- Установка прописных и строчных букв, капитализация.
- Прочие опции Open Type, то есть, работа с табличными данными, капителиями и проч.
Бесплатный онлайн-интенсив
Ваш Путь в IT начинается здесь
Подробнее
Свойства, отсутствующие в стиле текста Figma:
- Цвет шрифта.
- Выравнивание (выключка) текста по левому либо правому краю, по центру, по формату.
- Выравнивание текстового поля (верхнее, нижнее, по центру).
- Установка размера текстового поля (по горизонтали, по вертикали, фиксировано).
Для тех, кто раньше работал с другими конструкторами, будет непривычно не иметь возможности задать цвет текста, или применить выключку. Однако преимущества в таком подходе есть, и в процессе вы их обязательно оцените.
Когда формат стилей упрощен по максимуму, то на их создание уходит меньше времени, потому что сокращено количество подвижных параметров, а именно — допустимые комбинации, цвета, выравнивание и т.п. Обслуживать такие тексты тоже проще, меньше стилей придется обновлять, если в систему будут вноситься некие изменения. А выравнивание текста можно настроить и, не затрагивая стиль.
Использование шрифта с иконками в Figma
Конечно, возможности разработчика расширяются благодаря наличию разнообразных иконок. Причем они вставляются не только как картинки, но могут являться и элементами шрифтов. Тогда в надписях они будут появляться как естественный элемент. Вообще, гораздо проще написать слово с уже готовой иконкой, чем специально искать ее и скачивать, чтобы потом вставить в текст.
Программная и браузерная версии Figma рассчитаны на то, чтобы использовать шрифты с иконками. Как это осуществить? Порядок действий, следующий:
- Скачать на компьютер файл с иконочным шрифтом.
- Установить его.
- Дать вашей версии дизайн-системы Figma возможность использовать загруженный шрифт. Десктопные версии поддерживают данную опцию на автомате (иконочных шрифтов это тоже касается). Если пользуетесь браузерным вариантом, то придется найти на официальном сайте специальное приложение, скачать его и установить у себя. Выше есть описание того, как это делается.
Теперь шрифт с иконками доступен для применения в проектах, только разработчик должен не забыть перезапустить систему после окончания установки. Если все-таки это не было сделано, то нужно закрыть Figma, а затем снова ее запустить.
Важно! Когда к реализации проекта привлекается несколько разработчиков, может оказаться, что у кого-то из них нет в распоряжении иконочного шрифта. Тогда внешний результат отобразится некорректно
Поэтому нужно заранее позаботиться о том, чтобы у каждого исполнителя были иконочные шрифты.
Полезные плагины для работы с шрифтами в Figma
Подключать дополнительные шрифты в Figma можно с помощью специальных плагинов, которых на сегодняшний день насчитывается свыше 400. Далее описаны самые эффективные из них (по мнению разработчиков).
Полезные плагины для работы с шрифтами в Figma
Аdd number to text
В данном плагине предусмотрены расширения для форматирования контента. Это позволяет редактировать шрифты в системе Figma, задавать фильтр для создания списков, указывать характеристики продукта. Работать с плагином просто:
- Сформируйте нужное количество полей.
- Укажите названия.
- Используя таблицу выбора (появляющуюся после клика правой кнопкой мыши, выделите все области).
- В списке выберите нужный плагин.
Откроется окно, а вам останется лишь вносить в него нужные изменения, задействовав специальную символику.
Change Text
Ищет и заменяет слова. Во всплывающем окне открывается два поля, в одно нужно вписать слово, подлежащее замене, а во второе – новый вариант. Затем запускаете программу, и она автоматически меняет все найденные заданные слова – на другие. Если надо выполнить корректировку в нескольких полях, то плагин запускается в действие по каждому в отдельности.
Content Buddy
Тоже плагин для выполнения замен в тексте, но он работает даже с целыми предложениями. Как запустить? Кликнуть правой кнопкой мыши по слою с нужным текстом, зайти в контекстное меню и нажать там по плагину (снова с помощью ПКМ).
Появится окно, в которое следует ввести блок, подлежащий замене, и далее — завершить работу. После этого произойдет автоматическая замена обозначенной информации.
Text Counts
Считает число букв и число пробелов в тексте. Просто выделяете нужный кусок текста и подключаете программу.
Выполняет топографическую чистку текста, может заменять некоторые символы. То есть, если в тексте вдруг ошибочно стоит два тире подряд, то плагин найдет и исправит эту ошибку. Как-то специально настраивать Typograf не нужно, он может работать и в фоновом режиме. Выделите предназначенный для сайта текст, который хотите проверить, обратитесь к плагину и запустите его.
Довольно часто при работе с дизайн-системой Figma по мере надобности приходится изменять шрифты, подключать новые, больше подходящие для конкретного проекта. При использовании десктопной версии вы просто заходите в операционную систему и выполняете там установку. А в браузере понадобится инсталляция специального приложения.
