Дизайн-система и библиотеки

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

Когда компонентов десятки и над файлами работает команда, нужна единая библиотека-источник правды. Иначе каждый рисует свою кнопку.

Дизайн-система — это не просто папка с компонентами, а опубликованная библиотека, из которой все файлы команды берут единые элементы. Изменили компонент в библиотеке — обновления прилетают во все проекты.

Организуем систему

Хорошая структура файла дизайн-системы:

Файл «Design System»

  Page: Foundations
   +-- Цвета (переменные/стили)
   +-- Типографика (текст-стили)
   +-- Отступы и сетки
  Page: Components
   +-- Buttons (варианты + свойства)
   +-- Inputs
   +-- Cards
  Page: Patterns
   +-- Хедеры, навигация, формы

Публикуем библиотеку

1. В файле дизайн-системы откройте панель Assets и нажмите иконку библиотеки (книжка).
2. Откроется Team library — список компонентов, стилей и переменных к публикации.
3. Нажмите Publish и подтвердите. Все мастер-компоненты и стили станут доступны командам.
4. В рабочих файлах включите эту библиотеку — её ассеты появятся во вкладке Assets.

Обновления инстансов

Когда вы публикуете новую версию компонента, в файлах, где он используется, появляется уведомление об обновлении. Дизайнер нажимает Update — и все инстансы подтягивают свежую версию. Так система остаётся согласованной.

Версионирование и история

У каждого файла Figma есть история версий (меню файла → Show version history или Cmd/Ctrl+Alt+S). Можно вручную сохранять именованные вехи: «v1.0 — базовые компоненты», «v1.1 — добавлены инпуты». Это особенно важно для дизайн-системы: если обновление что-то сломало, вы откатываетесь к рабочей версии. Перед крупной публикацией библиотеки полезно поставить именованную точку.

При публикации Figma показывает список изменённых ассетов и позволяет добавить описание апдейта — что именно поменялось. Команда увидит это описание при принятии обновлений. Привыкайте писать понятные заметки: это документация изменений системы.

Документация и правила использования

Зрелая дизайн-система — это не только компоненты, но и документация: как и когда использовать каждый элемент, какие отступы канонические, что считается правильным, а что нет. В Figma это оформляют прямо на странице рядом с компонентами (текстовые описания, примеры «do / don't») или в подключённом FigJam/Notion. Хорошая документация превращает набор компонентов в настоящую систему, которой могут пользоваться люди, не задавая вам сто вопросов.

Горячие клавиши

Частые ошибки

• Публикуют незаконченные компоненты. Каждая публикация летит всей команде. Выкладывайте обдуманно.
• Не структурируют файл. Хаос из компонентов невозможно поддерживать. Разделяйте на Foundations / Components / Patterns.
• Игнорируют обновления. Накопленные непринятые апдейты ведут к рассинхрону. Обновляйтесь регулярно.

Совет профи: система живёт правилами, а не только компонентами

Набор компонентов — это ещё не дизайн-система. Системой её делают правила: как и когда использовать каждый элемент, какие отступы канонические, что считается «правильно», а что «так не делаем». Документируйте это прямо рядом с компонентами — текстом, примерами «do / don't», описаниями свойств. Тогда коллеги смогут пользоваться системой самостоятельно, не дёргая вас каждый раз. Поддерживайте дисциплину публикаций: осмысленные заметки к апдейтам, именованные версии перед крупными изменениями, регулярная чистка дублей. Дизайн-система — это живой продукт внутри продукта, у которого есть владелец, версии и пользователи. Вложенный в неё порядок возвращается сторицей: команда работает быстрее и согласованнее, а интерфейс остаётся целостным даже при росте.

Чек-лист

• Организовал файл на Foundations / Components / Patterns.
• Опубликовал библиотеку через Team library.
• Подключил библиотеку в рабочем файле.
• Принял обновление инстансов.

Итоги. Дизайн-система — это опубликованная библиотека компонентов, стилей и переменных, единая для команды. Публикация и обновления держат все файлы согласованными. Остался последний шаг — передача дизайна разработке через Dev Mode.