Создание и организация цветовых переменных (палитры, семантика)

Дизайн-система ускоряет разработку и поддерживает порядок. Вы это уже знаете. Теперь переходим от теории к практике: создадим первые дизайн-токены в Figma. Начнём с главного — цветовых переменных.

Почему переменные, а не стили?

Раньше в Figma для цветов использовали стили. Переменные (Variables) — это их развитие, они дают больше гибкости:

• Семантика. Называйте цвета по назначению: primary-button-background вместо blue-500.
• Режимы (Modes). Поддержка тёмной/светлой темы или разных брендов «из коробки».
• Типы переменных. Переменные хранят не только цвета, но и числа, строки, булевы значения. Это открывает новые возможности для автоматизации.

Для нашей быстрой дизайн-системы будем активно использовать переменные, чтобы максимально упростить работу.

Создаём базовую палитру

Сначала определим основные цвета проекта. Это «сырая» палитра, из которой потом соберём семантические токены.

1. Откройте панель Variables. В Figma на пустом холсте или на панели «Design» справа найдите раздел «Local Variables» и нажмите «Open variables».
2. Создайте коллекцию. Нажмите «Create collection» и назовите её, например, Global Colors. Так переменные будут в порядке.
3. Добавьте цветовые переменные:
   • Нажмите «Create variable» и выберите «Color».
   • Начните с black и white.
   • Затем добавьте основные брендовые цвета и их оттенки. Например, если ваш основной цвет синий, создайте blue-100, blue-200, ..., blue-900. То же для серых оттенков (gray-100 - gray-900), красных для ошибок, зелёных для успеха и т.д.
   • Используйте шкалу от 100 (самый светлый) до 900 (самый тёмный).

Совет: Не гонитесь за огромной палитрой сразу. Начните с 3–5 основных цветов и 5–7 оттенков для каждого. Добавите больше, когда понадобится. Помните про MVP!

Пример структуры палитры:

Global Colors
├── black: #000000
├── white: #FFFFFF
├── blue-100: #E0F2F7
├── blue-500: #2196F3
├── blue-900: #0D47A1
├── gray-100: #F5F5F5
├── gray-500: #9E9E9E
├── gray-900: #212121
├── red-500: #F44336
├── green-500: #4CAF50

Семантические токены: гибкость и адаптивность

После базовой палитры переходим к семантическим токенам. Это абстрактные названия, которые описывают назначение цвета, а не его конкретное значение. Например, background-primary вместо blue-500.

Почему это важно?

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

Создаём семантическую коллекцию и токены

1. Создайте новую коллекцию. В панели Variables нажмите «Create collection» и назовите её Semantic Colors.
2. Добавьте семантические переменные:
   • Нажмите «Create variable» и выберите «Color».
   • Присваивайте им значения из вашей Global Colors палитры.
   • Примеры семантических токенов:
     • background-primary: Присвойте white (для светлой темы)
     • background-secondary: Присвойте gray-100
     • text-primary: Присвойте gray-900
     • text-secondary: Присвойте gray-500
     • button-primary-background: Присвойте blue-500
     • button-primary-text: Присвойте white
     • border-default: Присвойте gray-300
     • status-error: Присвойте red-500
     • status-success: Присвойте green-500

Важно: Семантические токены должны ссылаться на глобальные цвета, а не содержать собственные HEX-коды. Это ключевой принцип гибкости!

Используем режимы (Modes) для тёмной темы

Представим, что нужна тёмная тема. Переменные Figma позволяют легко это реализовать с помощью режимов.

1. Добавьте новый режим. В коллекции Semantic Colors рядом с «Mode 1» нажмите на выпадающее меню и выберите «Add mode». Назовите «Mode 1» как Light, а новый режим как Dark.
2. Настройте значения для тёмной темы. Теперь для каждого семантического токена в режиме Dark присвойте соответствующий цвет из вашей Global Colors палитры.
   • Например, для background-primary в режиме Dark выберите gray-900.
   • Для text-primary в режиме Dark — white.
   • И так далее для всех семантических токенов.

Теперь, когда вы применяете семантические токены к элементам дизайна, вы можете легко переключать тему, просто меняя режим на фрейме или странице.

Практическое задание

1. Создайте коллекцию Global Colors и добавьте в неё:
   • black, white
   • 5–7 оттенков серого (gray-100 - gray-900)
   • 5–7 оттенков вашего основного брендового цвета (например, brand-100 - brand-900)
   • По одному цвету для red-500, green-500, yellow-500.
2. Создайте коллекцию Semantic Colors и добавьте в неё:
   • background-primary, background-secondary
   • text-primary, text-secondary
   • button-primary-background, button-primary-text
   • border-default
   • status-error, status-success, status-warning
3. Присвойте этим семантическим токенам значения из вашей Global Colors палитры для режима Light.
4. Добавьте режим Dark в коллекцию Semantic Colors и настройте соответствующие значения для тёмной темы.

Заметка: Все эти переменные будут храниться в вашем файле Figma. Хорошая организация и понятные названия — залог успеха!

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