🧩Компоненты

Компоненты — переиспользуемые группы элементов. Сохраните кнопку один раз и используйте на всех экранах.

Мастер и копии: что где меняется

Компонент существует в двух ролях. Мастер — исходник, хранящий структуру и стили. Копия — экземпляр на холсте, связанный с мастером. Правка мастера расходится по всем копиям сразу: поменяли радиус кнопки один раз — обновились все экраны, где она стоит. Это и есть смысл дизайн-системы: единственный источник правды вместо десятка похожих кнопок, которые разъезжаются на третьей итерации.

Варианты вместо копий-близнецов

Кнопка редко бывает одна: primary и secondary, обычная и с иконкой, активная и заблокированная. Заводить под каждую отдельный компонент — путь к библиотеке, в которой невозможно найти нужное. Соберите их в группу вариантов: один компонент с переключаемыми состояниями. На холсте вы ставите кнопку и выбираете вариант из списка, а не ищете «Button / Primary / Disabled / With icon» среди сорока похожих имён.

Именование — половина успеха

Разделяйте имена косой чертой: Button / Primary, Button / Ghost, Card / Product. Rugma строит по этим путям дерево в панели компонентов, и библиотека остаётся навигируемой, когда элементов станет сто. Имя должно описывать роль, а не внешность: Button / Danger переживёт смену красного на оранжевый, а Button / Red — нет.

Токены вместо захардкоженных значений

Цвета, отступы и радиусы лучше держать в переменных: компонент ссылается на токен, а не на конкретный #7C5CFF. Тогда смена акцентного цвета или переход на тёмную тему — правка одного значения, а не обход всех компонентов. Переменные живут в панели Variables и поддерживают режимы — светлый и тёмный набор значений под одним именем.

Когда компонент не нужен

Не превращайте в компонент всё подряд. Хороший критерий: элемент повторяется минимум трижды и вы ожидаете, что он будет меняться. Разовый декоративный блок в компоненте только засорит библиотеку и добавит лишний слой связей, который придётся распутывать.