Как использовать варианты компонентов в Penpot.

Когда Брэд Фрост в 2013 году популяризировал концепцию дизайн-систем (через идею Atomic Design), он предложил не просто новый подход к созданию интерфейсов, а целую архитектуру для их систематизации.
С тех пор дизайн-системы стали незаменимым инструментом для компаний, которые хотят создавать повторно используемые, согласованные элементы интерфейса.

Одним из ключевых элементов дизайн-систем являются варианты компонентов (component variants) — то есть различные состояния и версии одного и того же элемента.

Например, кнопка может иметь варианты:

• Default — обычное состояние,
• Hover — при наведении,
• Disabled — неактивная.

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

Теперь работать с вариантами можно и в Penpot — открытом, веб-базированном инструменте дизайна, где интерфейс описывается как код.
Давайте разберём, как устроены варианты, зачем нужны токены и как всё это объединить в масштабируемую систему.

⚙️ Шаг 1. Разберитесь с дизайн-токенами

Дизайн-токены — это единицы данных, которые описывают визуальные параметры (цвета, отступы, типографику и т. д.) в виде переменных.
Они позволяют менять дизайн глобально — через значения, а не вручную в макете.

Представим, что фирменный цвет бренда имеет значение hsl(270 100 42).
Вместо того чтобы прописывать его в каждом объекте, мы создаём токен:

color.brand.default = hsl(270 100 42)

Теперь мы можем использовать этот токен в других токенах:

background.button.primary.default = {color.brand.default}

Такой приём называется алиас (alias) — один токен ссылается на другой.
Это даёт гибкость: если мы изменим базовый цвет бренда, фон кнопки поменяется автоматически.

💡 Пример токенов для кнопки:

🎨 Создание токенов в Penpot

1. Перейдите во вкладку Tokens (в левом меню).
2. Нажмите + рядом с «Color».
3. Задайте имя (например, color.brand.default) и значение hsl(270 100 42).

Чтобы создать алиас, просто введите в значение ссылку на другой токен в фигурных скобках, например:
{color.brand.default}.

Penpot использует стандартизированный формат W3C DTCG,
поэтому ваши токены совместимы с web, iOS и Android — их можно экспортировать в код.

🧱 Шаг 2. Создаём компонент

Создайте основной компонент (main component), который будет служить «источником правды».
Все остальные экземпляры (instances) будут ссылаться на него, чтобы обновления вносились централизованно.

1. Выберите элемент (например, кнопку).
2. Щёлкните правой кнопкой → Create component
   или используйте Ctrl / ⌘ + K.
3. Назовите компонент (например, Button / Primary).

Теперь это ваш базовый компонент.

🎛 Шаг 3. Создаём варианты компонента

1. Выберите основной компонент.
2. Нажмите Ctrl / ⌘ + K или иконку Create variant.
3. Настройте внешний вид каждого варианта: цвета, состояния и т. д.
4. Примените соответствующие токены.

Например:

• Default — background.button.primary.default
• Hover — background.button.primary.hover
• Disabled — background.button.primary.disabled

📋 Именование

Вместо стандартного Property 1 дайте свой параметр, например State.
Затем назовите значения: Default, Hover, Disabled.

Теперь у компонента появилось свойство, по которому можно переключать состояния прямо в интерфейсе Penpot.

🚀 Как это масштабируется

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

• Токены обеспечивают гибкость и глобальные изменения.
• Компоненты дают переиспользуемость.
• Варианты обеспечивают контекст и порядок.

Например, если вы используете text.button.primary.default,
то сможете поменять цвет текста только у кнопок, не затрагивая весь брендовый цвет color.brand.lightest.

🔧 Структурируйте систему заранее

Перед масштабированием стоит продумать:

• какие токены будут общими (цвета, шрифты, тени);
• где использовать алиасы;
• как сгруппировать токены по наборам и темам;
• какие компоненты и варианты нужны;
• какие состояния и свойства вы будете поддерживать (hover, active, focus, dark mode и т. д.).

🧩 Пример масштабирования

Даже простая кнопка может иметь десятки вариаций:

• primary, secondary, tertiary;
• light / dark mode;
• hover, focus, active, disabled;
• с иконкой или без.

Если всё собрано по системе токенов и вариантов, эти комбинации не усложняют работу — наоборот,
они становятся управляемыми и легко обновляемыми.

🏁 Заключение

Компоненты + варианты + токены — это тройка, на которой держится любая масштабируемая дизайн-система.
Они дают баланс между гибкостью и управляемостью, позволяют централизованно менять дизайн без хаоса и ошибок.

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