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

С чего начать дизайн-систему

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

• Зафиксируйте цветовые токены: базовые, текстовые, фоновые, акцентные.
• Создайте типографическую шкалу: заголовки, body, подписи.
• Определите токены отступов и размеров на модульной сетке.
• Используйте Variables в Figma для тем и масштабирования.

Собирайте систему по принципам Atomic Design: атомы → молекулы → организмы. Все ключевые элементы делайте на Auto Layout.

Для состояний применяйте Variants: state (default/hover/disabled), size, icon и другие свойства в одном компоненте.

• Опишите, когда использовать каждый компонент и когда не использовать.
• Зафиксируйте правила доступности, контрастов и поведения состояний.
• Ведите changelog, чтобы команда видела эволюцию системы.
• Опубликуйте библиотеку Figma и подключайте ее к рабочим файлам.