Что в видео-уроке:
В уроке разбираем стили как инструмент автоматизации в Figma. Создаём и систематизируем стили цветов, текста, эффектов и модульных сеток, учимся применять их к повторяющимся элементам и централизованно вносить изменения в макет.
Автоматизация должна экономить время
Автоматизация в Figma в первую очередь нужна самому дизайнеру. Она помогает быстрее работать с повторяющимися элементами, поддерживать порядок и централизованно обновлять макет.
При этом автоматизировать нужно осознанно. Если проект срочный и настройка системы займёт больше времени, чем ручная работа, необязательно усложнять процесс. Но при регулярной работе со стилями, Auto Layout и компонентами такая система действительно ускоряет дизайн.
В этом уроке сосредоточимся именно на стилях. В Figma их можно создавать для четырёх категорий: цвета, текста, эффектов и модульных сеток.
Создаём стили цветов
Цветовой стиль удобно использовать для оттенков, которые повторяются в макете. Например, можно сохранить основной чёрный цвет текста и затем присвоить его всем нужным элементам.
Название лучше делать понятным, например «Чёрный», а в Description дополнительно указать назначение: «Цвет текста и кнопок на светлых фонах».
Стили позволяют не менять свойство каждого объекта отдельно. Если впоследствии изменить сам стиль, обновятся все элементы, к которым он привязан.
Разделяем одинаковые цвета по назначению
Одинаковое название цвета не означает одинаковую функцию. Например, чёрный может использоваться и для текста, и для фона. Если присвоить им один стиль, изменение фонового цвета одновременно повлияет на текст.
Поэтому стили удобно распределять по категориям:
- BG / Black
- BG / White
- Text / Black
- Text / Terra
Так становится понятно не только значение цвета, но и его назначение.
Категории создаются через слэш в названии. Первый элемент становится названием группы, второй — конкретным стилем. Такой принцип можно использовать для фонов, текста, кнопок, ссылок и других повторяющихся сущностей.
Если нужно изменить только один объект независимо от остальных, стиль сначала открепляем, а затем задаём новые параметры или создаём отдельный стиль.
Настраиваем текстовые стили
Текстовый стиль сохраняет основные параметры типографики: гарнитуру, начертание, размер, межстрочный и межбуквенный интервалы и другие настройки текста.
Для основных уровней можно создавать группы:
- H2 / Bold
- H2 / Regular
- H3 / Regular
- Body / Regular
- Body / Bold
Если один тип заголовка используется только один раз, отдельный стиль не всегда необходим. Но на многостраничном сайте, где одинаковые уровни повторяются на разных страницах, стили становятся особенно полезными.
В отличие от цветов, текстовые стили приходится назначать непосредственно текстовым элементам. При этом цвет текста хранится отдельно, поэтому один текстовый стиль можно использовать и для белого, и для терракотового текста.
Главное преимущество проявляется при изменениях: достаточно поменять параметры одного стиля, и все связанные с ним заголовки или абзацы обновятся одновременно.
Используем стили для эффектов
Стили можно создавать и для параметра элемента Effects — например, теней или размытия.
Если несколько карточек имеют одинаковую тень, сохраняем её как один стиль. При необходимости изменить Blur, Opacity, положение или другие параметры достаточно отредактировать стиль один раз.
В один стиль можно включить сразу несколько эффектов, например внешнюю и внутреннюю тень. Это особенно удобно, когда одинаковая обработка повторяется в нескольких элементах интерфейса.
Сохраняем модульные сетки
Четвёртая категория — Grid Styles. Готовую модульную сетку можно сохранить и затем применять к новым Frame одним действием.
Название должно помогать быстро понять назначение сетки, например:
- Grid / 1100
- Desktop / 1920
- Tablet / 720
Это удобно для многостраничных сайтов и адаптивов. Вместо повторной настройки количества колонок, ширины контейнера и других параметров достаточно выбрать уже созданный стиль.
Централизованные изменения ускоряют работу
Основная ценность стилей проявляется при корректировках. Вместо того чтобы вручную менять десятки одинаковых элементов, дизайнер редактирует один стиль и сразу видит результат во всём макете.
Это один из базовых способов автоматизации в Figma. Чем чаще в проекте повторяются элементы и чем больше страниц необходимо поддерживать, тем заметнее становится экономия времени.
