Пошаговый гайд по созданию автоматизированной дизайн-системы в Figma с нуля. Рассмотрим принципы атомарного дизайна Брэда Фроста, научимся создавать компоненты и управлять ими через Variants и Auto Layout. В результате вы сможете собирать адаптивные интерфейсы, как конструктор, и вносить правки за секунды, а не часы.
Если вы устали от бесконечных правок, когда заказчик просит поменять цвет всех кнопок или переставить столбцы в таблице, то эта статья для вас. В Figma есть подход, который превращает такую рутину в дело пары кликов.
Сегодня разберем применение принципов атомарного дизайна на практике. Мы не просто изучим теорию из книги Брэда Фроста «Atomic Design», а сразу же соберем рабочий пример — автоматизированную таблицу. Вы наглядно поймете, как работают дизайн-токены, атомы, молекулы и организмы, и как они экономят ваше время.
Содержание
- Что такое атомарный дизайн и зачем он вам?
- Шаг 1. Подготовка фундамента: создаем дизайн-токены в Figma
- Шаг 2. Собираем «атомы» — создаем основные компоненты
- Шаг 3. Собираем «молекулу» — ячейку таблицы
- Шаг 4. Конструируем «организм» — строку таблицы
- Шаг 5. Финальная сборка: от организмов к целой таблице
- Вывод: Почему атомарный дизайн в Figma — это ваша суперсила
Что такое атомарный дизайн и зачем он вам?
Атомарный дизайн (Atomic Design) — это методология, которую придумал Брэд Фрост. Она предлагает создавать интерфейсы, как из конструктора Lego, от простого к сложному. Вся система строится на пяти уровнях:
- Токены (Tokens): Самые базовые, неделимые элементы. Цвета, стили текста, иконки.
- Атомы (Atoms): Простейшие UI-компоненты. Кнопки, поля ввода, чекбоксы, созданные на основе токенов.
- Молекулы (Molecules): Более сложные блоки, собранные из нескольких атомов. Например, строка поиска (поле + кнопка).
- Организмы (Organisms): Цельные секции интерфейса. Шапка сайта, карточка товара, строка таблицы.
- Шаблоны (Templates) и Страницы (Pages): Макеты и конечный результат.
Зачем это нужно? Для автоматизации дизайн-процессов.
Изменив один главный компонент (Master Component) в Figma, вы автоматически отредактируете все его копии в макете. Хотите поменять шрифт во всем проекте? Сделайте это один раз в стиле текста. Этот подход — фундамент для создания масштабируемой дизайн-системы.
разрабатывают в рамках курса «Дизайн сайтов в Figma».
Приведем пример. На изображениях выше — две молекулы. Они выглядят по-разному, но в дизайн-системе это один и тот же элемент в разных состояниях (отмечено стрелкой), переключение между которыми возможно в один клик. Работа с такими вариациями одного объекта сильно экономит время дизайнера.
Шаг 1. Подготовка фундамента: создаем дизайн-токены в Figma
Сейчас мы с вами научимся делать атомарный дизайн таблицы в Figma. Этот навык повысит ваш уровень как веб-дизайнера, поможет сэкономить время и силы в будущем.
Прежде чем строить дом, нужно завезти кирпичи. В нашем случае это дизайн-токены — наименьшие элементы вашего дизайна и стандартизированные стили:
1. Создаем Color Styles. Создайте объекты и окрасьте их в цвета основной палитры. Выделите один из них (1). В панели Design > Fill нажмите на иконку с четырьмя точками (2), далее в панели Library нажмите на кнопку + (3) и в панели Style дайте стилю имя, например Blue (4).
Часто одного цвета нам бывает мало, требуются его варианты для различных ситуаций, выделения, интерактивных элементов и тп. Здесь будет удобно сразу создать группу цветов Blue и дать имя для цвета внутри этой группы. Если вы укажете название через слеш: например, Blue/solid, то будет создана группа Blue (если ее ещё не было) и в ней цвет с именем solid, что очень удобно. В дальнейшем в эту группу можно будет добавлять другие варианты голубого цвета.
Это следует проделать со всеми цветами основной палитры. Теперь ваши цвета всегда под рукой в правой панели Libraries.
2. Аналогично создаем Text Styles. Определите основные шрифты: для заголовков, основного текста, подписей. Создайте стили аналогично, через панель Text. Это ваши стили текста.
3. Создаем Иконки в едином стиле, если они требуются на будущем сайте.
4. Создаем Шкалу прогресса. Сформируйте полоску из прямоугольника и закрасьте цветом из Стилей. Поместите ее внутри закрашенного фрейма. В зависимости от размещения в таблице вы сможете удлинять/укорачивать эту полоску.
Эти дизайн-токены — основа консистентности. Используя их, вы гарантируете, что весь проект будет выполнен в едином стиле (один оттенок синего, один размер шрифта для параграфов, единое расстояние между объектами и так далее).
Шаг 2. Собираем «атомы» — создаем основные компоненты
Атомы в Figma — это Компоненты (Components). Давайте создадим нашу первую библиотеку.
Создаем атом «Кнопка» с Auto Layout:
1. Создайте фрейм, поместите туда текстовый блок.
2. Ключевой момент: Выделите фрейм и в правой панели нажмите Auto layout. Выберите направление (горизонтально) и настройте отступы (Padding). Это сделает кнопку адаптивной: она будет растягиваться под текст.
3. Назначьте созданные ранее Стили цвета и текста.
4. Превратите фрейм в компонент: нажмите Create Component (горячая клавиша Ctrl+Alt+K). Фрейм станет фиолетовым — это главный компонент (Main Component).
Создаем атом «Иконка» с Auto Layout:
1. Поместите каждую из нарисованных вами иконок в отдельный фрейм. Каждый фрейм должен быть единого размера (например, 24×24).
2. Выделите их все и нажмите Create component set. Figma объединит их в один компонент с вариантами (Variants).
3. В панели Edit variant property (правая боковая панель при выделенном компоненте) дайте каждому варианту иконки имя (например, Search, Filter и тп).
Теперь вы сможете выбирать нужную иконку из выпадающего списка Variant.
Создаем атом «Статус» с Variants:
1. Создайте небольшую плашку с текстом «Активен», назначьте ей цвет из ваших стилей.
2. Превратите в компонент.
3. Нажмите + в секции настройки компонента в правой панели или + в нижней части вашего компонента, чтобы добавить новые состояния («Ожидание», «Проблемы»).
Что важно знать о компонентах?
1. Все созданные вами Компоненты доступны в библиотеке Assets: левое боковое меню —> Assets —> All libraries
2. Изменения в главном компоненте (Master component) будут автоматически внесены во все привязанные копии этого компонента. Однако, наоборот не получится: привязанную копию редактировать нельзя (только текст).
3. Визуально отличить Master component от Копии несложно: первый отображается закрашенным фиолетовым ромбом, а второй — пустым ромбом.
Если вам необходимо внести изменения в Копию, то «отвяжите» ее от главного компонента с помощью Detach Instance —> У копии исчезнет фиолетовый фрейм —> Теперь вы можете редактировать.
Шаг 3. Собираем «молекулу» — ячейку таблицы
Молекула — это группа атомов, выполняющая одну функцию. Для таблицы это ячейка.
1. Создайте фрейм с текстом (например, «Имя клиента»). Добавьте Auto layout и превратите в компонент.
2. Создайте несколько копий этого компонента (это Instances) внутри компонента.
3. Выберите одну копию → Панель Assets → Найдите ваш компонент «Иконка» и перетащите его в ячейку → Настройте Auto layout внутри ячейки, чтобы элементы правильно выравнивались → Повторите для других типов ячеек (со статусом, с прогресс-баром, т.д.):
4. В итоге у вас будут молекулы-ячейки разных типов, внутри которых можно подставлять различные атомы из библиотеки
Шаг 4. Конструируем «организм» — строку таблицы
Организм — это самостоятельный блок. Наша цель — собрать строку (Row) и шапку (Header) таблицы.
- Возьмите несколько молекул-ячеек и расположите их в ряд.
- Выделите все и примените Auto layout (горизонтальный). Это ваш будущий организм «Строка».
- Назначьте наполнение ячеек через меню Assets.
- Настройте ширину столбцов — это ключ к адаптивности строк с длинным текстом:
- Для столбца с чекбоксом выберите Fixed width — назначенное вами число.
- Для столбцов с текстом выберите Fill container — они будут растягиваться.
- Для столбцов с иконками выберите Hug contents — фреймы «обнимут» содержимое.
- Полученный фрейм превратите в Компонент и назовите Raw, чтобы не запутаться.
- Сделайте копию → Detach instance → Превратите в самостоятельный Компонент → Переименуйте в Header.
- Настройте Header как шапку таблицы, заменив молекулы-ячейки и тексты в них.
- У последних двух столбцов нет названия, но нужно настроить их ширину: так как в строке Raw в этих молекулах мы указали ширину Hug Contents, то нужно запомнить эти цифры и проставить их в Ширине соответствующих столбцов.
Шаг 5. Финальная сборка: от организмов к целой таблице
Теперь соберем все в шаблон.
- Добавьте на холст 2 организма (Header и Row) и объедините их во фрейм (Frame selection). Назовите его Body.
- Внутри фрейма назначьте Ширину каждой из строк как Fill Container. Так все элементы будут растягиваться вместе с границей таблицы.
- А теперь про саму границу. Лайфхак для ленивых (и эффективных) дизайнеров:
- Скопируйте любую вашу кнопку, Detach instance и удалите элементы. У вас останется фрейм со стилизованной обводкой.
- Перетащите в него фрейм с Header и Raw.
- Смените направление Auto Layout на вертикальное. Теперь таблица ровная и находится в аккуратной рамке.
- Добавьте на холст 2 атома-кнопки (будущие кнопки «Поиск» и «Фильтр») и объедините их во фрейм (Frame selection). Это будет панель Controls.
- Назначьте для нее ширину Fill container, чтобы кнопки расположились по углам таблицы.
- Добавьте на холст еще 1 атом-кнопку (это будет кнопка «Страница»).
- Настройте все кнопки через панель Variants. Если забыли, как они должны выглядеть, опирайтесь на фото конечного результата:
- Объедините все получившиеся фреймы (Controls, Body и Страница) с помощью Frame selection. Теперь вы можете регулировать расстояние.
Ваша автоматизированная таблица готова! Попробуйте:
- Дублировать строки — они будут идеально вставать в ряд.
- Менять статус и иконки в любой строке через выпадающий список Variant..
Вывод: Почему атомарный дизайн в Figma — это ваша суперсила
Мы прошли полный путь создания веб-интерфейса: от дизайн-токенов к целому шаблону. Теперь вы знаете, как применение принципов атомарного дизайна в Figma создает не просто картинку, а живую, гибкую систему.
Ее главные преимущества:
- Скорость: Правки вносятся в разы быстрее.
- Согласованность: Интерфейс выглядит целостным.
- Масштабируемость: Новые страницы собираются как конструктор.
Начинайте с малого — создайте библиотеку кнопок и карточек для своего следующего проекта. Помните: время, потраченное на построение дизайн-системы, окупится, когда придут первые правки от заказчика. Дизайнер должен быть ленивым (в хорошем смысле) — чтобы каждый его клик был максимально эффективным. Удачи в ваших веб-дизайнах!
Статья основана на лекции Александра Серакова, основателя школы графического дизайна «Юниверс». Смотрите этот урок и другие материалы платформы, оформив пробный период всего за 100 рублей.
Редактор: Полина Бобышева