Как использовать стили текста и цвета в Figma для дизайн системы

Стили текста и цвета в Figma создаются через библиотеку стилей (Assets панель), которая позволяет определить единые типографию и палитру цветов для всей дизайн-системы и переиспользовать их во всех проектах команды. Это обеспечивает консистентность дизайна и упрощает массовые обновления всех элементов при изменении стилей.

Зачем нужны стили текста и цвета в дизайн-системе

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

Пошаговая инструкция по созданию стилей в Figma

Откройте проект Figma и создайте новый файл для дизайн-системы или используйте существующий файл, в котором вы будете хранить все стили.
В правой панели найдите вкладку Assets (она может быть обозначена значком папки или быть доступна через меню слева).
Нажмите на иконку папки или значок + рядом с Color styles для создания первого цветового стиля.
Создайте прямоугольник на холсте и установите его цвет на основной цвет вашей палитры (например, синий).
Выделите этот прямоугольник, затем нажмите правой кнопкой мыши на цвет заливки и выберите Create color style.
Введите имя стиля, используя иерархическую структуру: например, Colors/Primary/Blue-500 (слэши создают вложенные группы).
Нажмите Create style и повторите процесс для всех основных цветов (вторичный, акцентный, серый, ошибка и т. д.).
Создайте отдельные цветовые стили для фонов, текста, границ и других функциональных назначений (например, Colors/Background/Light, Colors/Text/Primary).
Для создания текстовых стилей создайте текстовый элемент на холсте и отформатируйте его: установите шрифт, размер, вес и высоту строки.
Выделите текстовый элемент, откройте панель Design в правой части экрана и найдите раздел типографии.
Нажмите на иконку четырёхточечного квадрата рядом с названием шрифта и выберите Create typography style.
Введите имя стиля, используя структуру вроде Typography/Heading/H1, Typography/Body/Regular, Typography/Button/Medium.
Повторите процесс для всех необходимых типографических стилей: заголовки (H1–H6), основной текст, текст кнопок, подписи и т. д.
Убедитесь, что каждый текстовый стиль включает все параметры: семейство шрифта, размер, вес, высоту строки и межбуквенный интервал.
Откройте панель Assets ещё раз, чтобы увидеть все созданные стили в разделах Color styles и Typography.
Проверьте, что все стили организованы в логические группы (используйте слэши для иерархии).
Создайте файл библиотеки, нажав на иконку меню в верхнем левом углу и выбрав Libraries, затем включите опцию Publish libraries.
Нажмите Publish для публикации всех стилей и компонентов в библиотеку, доступную всем членам команды.
Откройте другой файл проекта и перейдите в раздел Assets → Team libraries, чтобы добавить стили из опубликованной библиотеки.
Нажмите на кнопку + рядом с названием библиотеки дизайн-системы и подтвердите добавление.
Теперь в панели Assets будут видны все цветовые и текстовые стили из библиотеки.
Выделите любой элемент на холсте, нажмите на его цвет или типографию и выберите нужный стиль из списка.
Если вы обновите стиль в исходной библиотеке, все элементы, использующие этот стиль, автоматически обновятся в связанных файлах.

Управление стилями и лучшие практики

Используйте префиксы и слэши для организации стилей в группы, чтобы облегчить поиск в больших библиотеках.
Дайте стилям понятные имена на английском языке, которые описывают их функцию (например, Button/Primary вместо Blue Button).
Регулярно проверяйте стили на дублирование и удаляйте неиспользуемые стили.
Версионируйте вашу дизайн-систему, создавая ветви при больших изменениях.
Документируйте все стили в отдельном файле или гайде, чтобы команда знала, когда использовать каждый стиль.
Синхронизируйте стили Figma с документацией разработчиков (например, через плагины вроде Zeroheight или Supernova).

Часто задаваемые вопросы

Можно ли удалить стиль, который используется в нескольких файлах, или это повредит дизайн? При удалении стиля из библиотеки элементы, которые его использовали, сохранят свои значения, но потеряют связь со стилем; рекомендуется переместить элементы на новый стиль перед удалением.

Как быстро применить текстовый стиль ко всему тексту в макете, если я создал его после дизайна? Выделите текстовый элемент, откройте панель Typography, выберите нужный стиль из Assets, и он применится; повторите для каждого элемента или используйте функцию поиска и замены (если доступна в вашей версии Figma).

Что делать, если член команды случайно изменил стиль в своём локальном файле и хочет восстановить его из библиотеки? Нажмите правой кнопкой мыши на элемент, выберите Reset to library style, и все локальные изменения будут отменены в пользу исходного стиля из библиотеки.

Дизайн и Графика