Стили текста и цвета в фигме — как создать, скопировать, перенести и удалить

Как сделать стиль шрифта для текста в фигме

Стиль шрифта в Figma позволяет сохранить набор параметров текста — размер, начертание, межстрочный интервал и другие — и многократно применять его в проекте. Для создания стиля нужно выделить уже оформленный текстовый элемент, перейти на правую панель в раздел «Typography», нажать на иконку «Apply Styles» и выбрать «Create style». После этого следует дать стилю понятное название, например, «header 1» для основного заголовка или «regular text» для обычного текста. Готовый стиль появится в списке стилей и будет доступен для применения к другим текстовым блокам. При изменении параметров стиля все элементы, использующие его, автоматически обновятся.

Как создать цветовой стиль в фигме

Цветовые стили в Figma работают аналогично текстовым: они позволяют сохранить конкретный цвет и применять его ко всем нужным элементам. Чтобы создать такой стиль, нужно выбрать объект с нужной заливкой, открыть на правой панели раздел «Fill», нажать на иконку стилей и выбрать вкладку «Custom». Затем нажать «+» и присвоить стилю осмысленное имя, например, «main» для основного цвета или «secondary» для дополнительного. После этого цвет можно быстро применять к другим объектам через тот же список стилей. Если цвет в стиле изменить, он обновится во всех местах, где использовался.

Как скопировать, перенести и удалить стили в фигме

Стили можно легко переносить между файлами. Для этого в исходном файле нужно выделить нужные стили в колонке «Styles» (можно выделить несколько с помощью клавиши Shift), скопировать их (Ctrl+C) и вставить (Ctrl+V) в другой файл. После вставки стили становятся доступны в новом документе. Удалить ненужный стиль можно, кликнув по нему правой кнопкой мыши и выбрав «Delete style». Также доступны операции редактирования и дублирования стиля через контекстное меню.

Как создать стили с помощью плагина

В Figma существуют плагины, упрощающие массовое создание стилей. Один из популярных — Style List. Он позволяет быстро генерировать наборы текстовых или цветовых стилей. Для текста можно задать базовый размер, шаг масштабирования и шрифт, после чего плагин автоматически создаст иерархию стилей — от заголовков до мелкого текста. Для цветов плагин может сгенерировать палитру оттенков на основе одного базового цвета. Все созданные стили появляются в стандартном списке и могут быть вручную отредактированы при необходимости.

Как в фигме добавить стили из библиотеки

Figma поддерживает использование стилей из внешних библиотек. Готовые библиотеки, такие как Material Design или iOS UI Kit, уже встроены в систему и доступны по умолчанию. Чтобы применить стиль из библиотеки, нужно нажать на иконку стилей у нужного свойства (текста или заливки) и перейти во вкладку «Libraries». Там отобразятся все подключённые библиотеки со списком их стилей. Подключить дополнительные библиотеки можно через левую панель в разделе «Assets». После подключения их стили становятся доступны во всём проекте.

Как правильно называть шрифтовые и цветовые стили

Названия стилей следует давать не по их внешним характеристикам (например, «синий» или «размер 24»), а по функциональному назначению. Текстовые стили лучше называть в соответствии с иерархией: «header 1», «header 2», «body text», «caption». Цветовые стили — по роли в интерфейсе: «main», «secondary», «error», «success». Такой подход делает дизайн-систему устойчивой к изменениям: даже если цвет или шрифт будет заменён, название останется логичным и понятным для всей команды.