Системы именования и организация стилей цвета

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

Зачем нужна система именования цветов?

Представьте большой проект с сотнями оттенков. Без чёткой системы легко запутаться, выбрать не тот цвет или создать дубликат. Систематизация цветов помогает:

• Ускорить работу: Быстро находите нужный оттенок.
• Сохранить консистентность: Гарантируете, что по всему проекту используются правильные цвета.
• Упростить масштабирование: Легко добавляете новые цвета и меняете существующие.
• Облегчить командную работу: Все понимают, какой цвет для чего.
• Улучшить передачу разработчикам: Чёткие названия цветов упрощают их внедрение в код.

Принципы именования цветовых стилей

Есть несколько подходов к именованию цветов. Выберите тот, что подходит вашему проекту и команде.

1. Функциональное именование (по назначению)

Этот подход фокусируется на том, для чего используется цвет, а не на его внешнем виде. Он особенно полезен для дизайн-систем, так как позволяет легко менять палитру, не трогая названия стилей.

Примеры:

• --color-primary-default (основной цвет бренда)
• --color-secondary-accent (вторичный акцентный цвет)
• --color-text-body (цвет основного текста)
• --color-background-page (цвет фона страницы)
• --color-feedback-success (цвет для сообщений об успехе)
• --color-feedback-error (цвет для сообщений об ошибке)

Совет: Используйте префиксы, например --color- или clr-. Это сразу покажет, что это цветовой стиль, и поможет в поиске.

2. Именование по шкале (нейтральные цвета)

Для серых или нейтральных оттенков часто используют шкалу от светлого к тёмному.

Примеры:

• --color-neutral-50 (очень светлый серый)
• --color-neutral-100
• --color-neutral-200
• ...
• --color-neutral-900 (очень тёмный серый)

3. Семантическое именование (для состояний)

Применяется для цветов, которые меняют значение в зависимости от состояния элемента (например, кнопка активна или неактивна).

Примеры:

• --color-button-primary-default
• --color-button-primary-hover
• --color-button-primary-pressed
• --color-button-primary-disabled

Комбинированный подход

Самый эффективный подход — комбинированный. Используйте функциональное именование для основных цветов, шкалу для нейтральных и семантическое для состояний.

Организация цветовых стилей в Figma

Figma даёт мощные инструменты для создания и организации цветовых стилей.

Создание цветовых стилей

1. Выберите объект с нужным цветом или создайте новый.
2. В панели Design (Свойства) рядом с заливкой (Fill) или обводкой (Stroke) нажмите на иконку "Style" (четыре точки).
3. Нажмите "+" для создания нового стиля.
4. Введите название стиля, используя выбранную систему именования.

Группировка стилей с помощью слешей (/)

Figma автоматически группирует стили, если в их названии есть слеши. Это создаёт иерархическую структуру, которая сильно упрощает навигацию.

Примеры названий и их группировка:

• Primary/Default
• Primary/Hover
• Secondary/Accent
• Text/Body
• Background/Page
• Feedback/Success
• Neutral/50
• Neutral/100

В Figma это будет выглядеть как папки:

- Primary
    - Default
    - Hover
- Secondary
    - Accent
- Text
    - Body
- Background
    - Page
- Feedback
    - Success
- Neutral
    - 50
    - 100

Важно: Используйте логичную иерархию. Например, сначала категория (Primary, Text, Background), затем назначение или оттенок.

Документирование цветовой палитры

Недостаточно просто создать стили. Важно их документировать. В Figma создайте отдельную страницу для вашей цветовой палитры. Разместите там все стили с их названиями, HEX/RGB/HSL значениями и примерами использования. Это будет наглядное руководство для всей команды.

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

Закрепим знания на практике.

1. Создайте новую страницу в вашем файле Figma и назовите её "Цвета".
2. Определите 5-7 основных цветов для гипотетического проекта (например, основной цвет бренда, акцентный, цвет текста, фона, и один-два цвета для состояний — успех/ошибка).
3. Создайте цветовые стили для каждого из них, используя функциональное именование и группировку через слеши.
   • Пример: Brand/Primary/Default, Text/Body, Feedback/Success.
4. Добавьте несколько нейтральных оттенков (серых) и назовите их по шкале, также используя группировку (например, Neutral/100, Neutral/200).
5. Разместите эти цвета на странице "Цвета" в виде небольших прямоугольников. Рядом с каждым укажите название стиля и его HEX-значение.

Это упражнение поможет вам на практике освоить принципы организации и именования, которые станут основой для всей вашей дизайн-системы.

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