Дизайн-система сайта в Figma

Базовая дизайн-система должна помогать продолжать реальный сайт, а не превращать Figma в выставку безупречных компонентов. Стройте её из решений текущего проекта и добавляйте структуру там, где она предотвращает расхождения.

Референс трёх карточек в Refframe хорошо показывает повторяемую анатомию: радиус, отступы, зона иконки, роль заголовка, описание и колоночная раскладка. Компонент должен сохранить эту структуру с длинным названием, без иконки, с разным объёмом описания и на узком экране.

Возьмите три показательные страницы

Не начинайте с универсальной кнопки. Выберите небольшой набор страниц, который раскрывает реальные потребности сайта. Главная показывает маркетинговую иерархию. Страница услуги или тарифа показывает повторяющиеся контентные блоки. Форма обратной связи, регистрации или покупки выявляет контролы и состояния.

Проведите аудит:

• цветов и их назначения;
• текстовых ролей, а не отдельных размеров шрифта;
• повторяющихся интервалов и ширины контейнеров;
• колонок, полей, линий выравнивания и точек перестройки;
• кнопок, ссылок, полей, карточек, навигации и медиа;
• состояний hover, focus, error, empty, loading и disabled;
• паттернов hero, features, testimonials, pricing и FAQ.

Отметьте почти одинаковые значения. Два серых цвета могут выполнять разные задачи, а могут быть случайным расхождением. Разберитесь до создания токенов.

Разделите файл на четыре зоны

Компактной структуры достаточно:

• Foundations для переменных, цвета, типографики, интервалов, сеток, радиусов и эффектов;
• Components для повторяемых контролов и контентных элементов;
• Patterns для комбинаций уровня страницы;
• Playground для стресс-тестов, крайних случаев и экспериментов.

Готовые экраны продукта лучше держать отдельно от библиотеки. Систему должно быть удобно изучать без прогулки по текущим макетам, а компоненты - проверять без публикации незавершённых вариантов.

Сначала примитивы, затем семантика

Переменные Figma поддерживают цветовые, числовые, строковые и логические значения, коллекции и режимы. Начните с примитивов: нейтральной палитры и шкалы интервалов. Затем создайте семантические алиасы: text-primary, text-muted, surface-default, surface-emphasis, border-subtle, action-primary и focus-ring.

Семантическое имя сохраняет роль при смене внешнего значения. Если основной action меняет синий цвет на зелёный, кнопке не нужна новая функция. Режимы подходят для реальных контекстов - светлой и тёмной темы, компактной и свободной плотности. Не создавайте режим только потому, что Figma это позволяет.

Шкала интервалов должна быть короткой. Набора 4, 8, 12, 16, 24, 32, 48 и 64 часто хватает, но ориентируйтесь на аудит проекта. Для особых ролей используйте названия layout-gutter или section-gap, чтобы не запоминать номер нужного значения.

Назначьте типографические роли

Создайте роли для display, заголовка страницы, заголовка секции, карточки, основного текста, метки и подписи. Зафиксируйте семейство, начертание, размер, межстрочный интервал и сценарий применения. Если сайт двуязычный, проверьте длинные русские и английские заголовки.

Шкала должна оставаться достаточно короткой, чтобы иерархия читалась. Если две роли визуально неразличимы, объедините их или объясните функциональную разницу.

Стройте компоненты вокруг поведения

Начните с того, что уже повторяется: Button, Text Link, Input, Textarea, Checkbox, Card, Navigation Item и Media Block. Варианты нужны для значимых различий - уровня, размера или состояния, а не для каждой косметической комбинации. Свойства текста, boolean и instance swap позволяют адаптировать экземпляр без detach.

Кнопке могут понадобиться hierarchy, size, icon position и state. Ей не нужен отдельный вариант для каждого текста. Карточке могут понадобиться наличие медиа, ориентация и интерактивное состояние. Она должна принимать настоящий контент без ручного выравнивания каждого экземпляра.

Figma рекомендует документировать структуру имён, потому что организация компонентов связана со структурой файла и страниц. Используйте словарь, который можно сопоставить с кодом: Button/Primary, Card/Feature.

Auto Layout должен моделировать поведение

Auto Layout управляет направлением, gap, padding, выравниванием, переносом и минимальными или максимальными размерами. Используйте его, чтобы показать реакцию компонента на контент.

Проверьте каждый важный компонент:

• подставьте самый длинный реальный текст;
• уберите необязательное изображение;
• переключите язык;
• измените ширину через предполагаемые брейкпоинты;
• увеличьте текст;
• добавьте и удалите элементы списка;
• покажите focus и сообщение об ошибке.

Десктопный и мобильный фреймы показывают две точки. Правила resizing и Auto Layout объясняют поведение между ними.

Документируйте решение рядом

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

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

Перед публикацией библиотеки удалите detached-дубликаты, эксперименты с именами и компоненты без понятного назначения. Создайте в Refframe доску с референсами, которые повлияли на систему, и подпишите, какое решение показывает каждый пример: анатомию карточки, типографическую иерархию, навигацию или адаптивную перестройку.