Планирование структуры дизайн-системы в Figma

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

Зачем планировать структуру?

Правильное планирование структуры дизайн-системы в Figma поможет:

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

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

Иерархия файлов и страниц в Figma

В Figma есть несколько уровней организации, которые идеально подходят для дизайн-системы:

1. Команда (Team): Это самый высокий уровень. Здесь хранятся все проекты вашей компании или отдела. Внутри команды создайте отдельный проект для дизайн-системы.
2. Проект (Project): Внутри команды создайте проект, например, «Дизайн-система [Название вашей компании/продукта]». Так вы отделите файлы системы от других рабочих файлов.
3. Файл (File): Внутри проекта дизайн-системы можно создать несколько файлов. Обычно их делят по категориям атомарного дизайна или по функциональному назначению.
   • Design System Core.fig: Основные стили (цвета, типографика, тени), иконки, базовые атомы (кнопки, поля ввода).
   • Components Library.fig: Более сложные компоненты (молекулы, организмы), построенные на основе атомов.
   • Templates & Pages.fig: Примеры использования компонентов в шаблонах и готовых страницах.
   • Documentation.fig: Файл для документации дизайн-системы. Хотя часто документацию ведут во внешних инструментах, базовую можно держать и здесь.
4. Страницы (Pages): Внутри каждого файла используйте страницы для детализации и организации.
   • Например, в Design System Core.fig могут быть страницы: Colors, Typography, Icons, Spacing, Elevation.
   • В Components Library.fig: Buttons, Inputs, Cards, Navigation.

Пример структуры файлов и страниц:

📦 Команда: [Название вашей компании]
 ├─ 📁 Проект: Дизайн-система [Название продукта]
 │   ├─ 📄 Файл: Design System Core
 │   │   ├─ 📄 Страница: 🎨 Colors
 │   │   ├─ 📄 Страница: 🅰️ Typography
 │   │   ├─ 📄 Страница: 🖼️ Icons
 │   │   ├─ 📄 Страница: 📏 Spacing
 │   │   └─ 📄 Страница: 💡 Elevation
 │   ├─ 📄 Файл: Components Library
 │   │   ├─ 📄 Страница: 🔘 Buttons
 │   │   ├─ 📄 Страница: 📝 Inputs
 │   │   ├─ 📄 Страница: 💳 Cards
 │   │   ├─ 📄 Страница: 🧭 Navigation
 │   │   └─ 📄 Страница: ... (другие компоненты)
 │   ├─ 📄 Файл: Templates & Pages
 │   │   ├─ 📄 Страница: 📄 Login Page
 │   │   ├─ 📄 Страница: 📄 Dashboard Template
 │   │   └─ 📄 Страница: ... (другие шаблоны)
 │   └─ 📄 Файл: Documentation
 │       ├─ 📄 Страница: 📖 Overview
 │       ├─ 📄 Страница: ⚙️ How to use
 │       └─ 📄 Страница: 🚀 Changelog

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

Единообразное именование — залог порядка в дизайн-системе. Используйте логичные и предсказуемые соглашения:

• Файлы: [Название системы] - [Категория].fig (например, DS - Core.fig, DS - Components.fig).
• Страницы: Короткие, описательные названия, можно с эмодзи для визуальной навигации.
• Слои и фреймы:
  • Используйте PascalCase для компонентов (ButtonPrimary, InputField).
  • Используйте camelCase для слоев внутри компонентов (iconLeft, labelText).
  • Используйте префиксы для категорий (например, btn/primary, input/text).
• Стили: Подробнее об этом поговорим в следующих разделах, но уже сейчас держите в уме иерархию: [Категория]/[Тип]/[Состояние] (например, Colors/Brand/Primary, Text/H1/Bold).

Совет: В России часто используют транслитерацию или английские названия для элементов дизайн-систем. Это удобно для международных команд или при работе с зарубежными фреймворками. Выберите один подход и придерживайтесь его.

Практическое задание: Планируем структуру

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

1. Создайте новый проект в Figma с названием «Моя Первая DS».
2. Внутри проекта создайте три файла:
   • DS - Core
   • DS - Components
   • DS - Templates
3. В каждом файле создайте страницы, основываясь на предложенной выше структуре и принципах атомарного дизайна. Подумайте, какие базовые элементы (цвета, шрифты) и какие компоненты (кнопки, поля ввода, карточки) вам понадобятся в первую очередь.

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

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