«Дизайн-система» звучит как роскошь для крупных продуктовых компаний. На деле даже команде из двух-трёх человек она экономит часы и спасает от разнобоя в макетах. Не нужно строить громоздкую библиотеку с сотней компонентов — достаточно небольшого ядра, которое наведёт порядок. Разберём этот минимум на примере Figma.

Зачем это нужно команде без штата дизайнеров

Когда над макетами работают несколько человек без единых правил, появляются три оттенка синего, пять размеров кнопок и шрифты, которые «вроде одинаковые». Каждый новый экран приходится собирать с нуля. Дизайн-система решает это так:

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

С чего начать: токены, а не компоненты

Соблазн — сразу рисовать красивые кнопки. Правильнее начать с основ, на которых всё держится. В Figma это переменные (variables) и стили:

  1. Цвета. Заведите палитру с осмысленными именами — не «синий-2», а «primary», «text», «surface». Это позволит позже добавить тёмную тему одним переключением.
  2. Типографика. Ограничьтесь несколькими размерами заголовков и тела текста. Меньше вариантов — меньше хаоса.
  3. Отступы и сетка. Договоритесь о шаге (например, кратном 4 или 8) и используйте только его.

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

Какие компоненты собрать первыми

Не пытайтесь покрыть всё. Соберите то, что встречается на каждом экране:

  • кнопки в основных состояниях (обычная, нажатая, неактивная);
  • поля ввода;
  • карточку контента;
  • навигацию или шапку.

Используйте варианты (variants) Figma, чтобы держать состояния одного элемента в одном компоненте, а не плодить копии.