Figma Variables промениха начина, по който работим с дизайн системи. Преди тях имахме Styles (за цветове, текст, ефекти). Полезни, но ограничени. Variables добавят нещо, което Styles не можеха: стойности, които се сменят по контекст. Light mode, dark mode, различни брандове, различни платформи, всичко от едно място.

Тази статия е практически гайд. Ще настроим token система за реален клиентски проект: цветове, spacing, типография и light/dark mode. В края ще имаш шаблон, който можеш да преизползваш на всеки следващ проект.

1. Какво са Variables и защо заменят Styles

Variable в Figma е именувана стойност, която можеш да прикачиш към property на елемент. Цвят, число, текст или boolean. Когато промениш стойността на variable-а, всеки елемент, който го ползва, се обновява автоматично.

Звучи като Styles, но разликите са ключови:

• Modes: една variable може да има различни стойности за различни modes (Light, Dark, Brand A, Brand B). Styles нямат modes.

• Aliasing: variable може да реферира друга variable. color/bg/primary реферира color/blue/600 в Light mode и color/blue/200 в Dark mode. Styles не поддържат aliasing.

• Numbers: variables поддържат числа (spacing, border-radius, font-size). Styles поддържат само цветове, текст стилове и ефекти.

• Scoping: можеш да ограничиш variable да се показва само за определени properties (fill, stroke, gap, padding). Styles се показват навсякъде.

На практика: Styles все още работят за текст стилове (font family + size + weight + line height като комбинация). За всичко останало, Variables са по-добрият инструмент.

Съвет: не мигрирай всичко от Styles към Variables наведнъж. Започни с цветовете (най-голям ефект) и после добави spacing и border-radius.

2. Настройка на Color Token система

Color tokens са фундаментът. Ето структурата, която работи за 90% от клиентски проекти:

Ниво 1: Primitive colors (палитра)

Това са суровите цветове. Не се ползват директно в дизайна, а само като reference за semantic tokens.

• color/blue/50 до color/blue/900 (10 нюанса)

• color/gray/50 до color/gray/900

• color/green/500, color/red/500, color/yellow/500 (за success, error, warning)

• color/white, color/black

Ниво 2: Semantic tokens

Тези описват намерение, не конкретен цвят. Реферират primitive tokens чрез aliasing.

• color/bg/primary = color/white (Light) / color/gray/900 (Dark)

• color/bg/secondary = color/gray/50 (Light) / color/gray/800 (Dark)

• color/text/primary = color/gray/900 (Light) / color/gray/50 (Dark)

• color/text/secondary = color/gray/600 (Light) / color/gray/400 (Dark)

• color/action/primary = color/blue/600 (Light) / color/blue/400 (Dark)

• color/action/primary-hover = color/blue/700 (Light) / color/blue/300 (Dark)

• color/border/default = color/gray/200 (Light) / color/gray/700 (Dark)

Как да ги създадеш:

1. Отвори Local Variables panel (иконата с ромб в лявата лента или Cmd + Shift + V).

2. Създай Collection: "Primitives".

3. Добави color variables за палитрата.

4. Създай втора Collection: "Semantic".

5. Добави semantic variables и ги свържи с primitives чрез alias (кликни на стойността, после на иконата за alias).

3. Spacing, Border Radius и Number Tokens

Цветовете са най-видимите tokens, но spacing tokens са тези, които правят дизайна консистентен. Без тях всеки дизайнер (или всеки ден) ползва различни стойности.

Spacing scale (number variables):

• space/xs = 4

• space/sm = 8

• space/md = 16

• space/lg = 24

• space/xl = 32

• space/2xl = 48

• space/3xl = 64

• space/4xl = 80

Прилагай тези variables към padding и gap на Auto Layout frames. Вместо да пишеш "16" ръчно, избираш space/md. Ако после решиш, че md трябва да е 20 вместо 16, промяната се отразява навсякъде.

Border radius:

• radius/sm = 4

• radius/md = 8

• radius/lg = 12

• radius/xl = 16

• radius/full = 9999 (за кръгли елементи)

Scoping: когато създадеш number variable, отиди в settings (десен клик > Edit variable) и задай Scoping. За spacing, включи само "Gap" и "Padding". За radius, включи само "Corner radius". Така когато избираш variable за gap, виждаш само spacing tokens, не radius tokens.

Съвет: 8px spacing grid не е произволен. Той съвпада с browser default font size (16px = 2 * 8), субпиксел rendering граници и стандартните CSS spacing utilities (Tailwind, Bootstrap). Ползвай го и developer-ите ще те обичат.

4. Light/Dark Mode с Modes

Modes са причината, поради която Variables заменят Styles за цветове. Една variable, две (или повече) стойности. Превключваш mode-а на frame и всичко се сменя.

Настройка:

1. В Semantic collection кликни + до "Mode 1" за да добавиш втори mode.

2. Преименувай: "Light" и "Dark".

3. За всяка semantic variable задай различна стойност за Dark mode (обикновено обърнат contrast).

Примери за Light vs Dark:

• color/bg/primary: white (Light) -> gray/900 (Dark)

• color/text/primary: gray/900 (Light) -> gray/50 (Dark)

• color/action/primary: blue/600 (Light) -> blue/400 (Dark). По-светъл в dark mode за по-добър contrast.

• color/border/default: gray/200 (Light) -> gray/700 (Dark)

Как да превключиш: избери frame (page или section), в Properties panel кликни на mode indicator (до "Semantic" collection). Избери "Dark". Всички елементи вътре се обновяват.

За какво е полезно:

• Dark mode на приложение или сайт (очевидно)

• Секции с тъмен фон на otherwise светъл сайт (hero секция, footer)

• Презентация на клиент: "Ето как изглежда в light, ето в dark" с 1 клик

Можеш да имаш повече от 2 modes. За multi-brand проект: "Brand A", "Brand B", "Brand C". Същата структура, различни цветове. Един дизайн файл обслужва 3 бранда.

5. Mini case study: token система за клиентски проект

Ето как настроих token система за фирмен сайт с 8 страници, light и dark секции, и developer handoff.

Стъпка 1: Primitive Collection (15 минути)

Взех brand цветовете от клиента (primary blue, accent green) и генерирах палитра с 10 нюанса за всеки. Добавих neutral gray scale и utility colors (success, error, warning). Общо: 35 color variables.

Стъпка 2: Semantic Collection с 2 Modes (30 минути)

Създадох 20 semantic tokens: bg/primary, bg/secondary, bg/tertiary, text/primary, text/secondary, text/disabled, action/primary, action/primary-hover, action/secondary, border/default, border/strong, surface/card, surface/overlay. Всеки с Light и Dark стойности.

Стъпка 3: Spacing и Radius (10 минути)

8 spacing tokens (4 до 80px) и 5 radius tokens. Scoped правилно.

Стъпка 4: Прилагане (постоянно)

Всеки елемент в дизайна ползва variables, не raw стойности. Бутон с color/action/primary fill, space/sm vertical padding, space/md horizontal padding, radius/md corner radius.

Резултат:

• Клиентът поиска промяна на primary color: 1 минута вместо 2 часа.

• Developer-ът получи design token names, които директно mapping-нат към CSS custom properties.

• Dark секции (hero, footer, CTA banner) се направиха с 1 клик, промяна на mode на frame-а.

Цялата настройка отне 55 минути. Спести ми поне 4-5 часа на проекта. На следващия проект ще дупликирам файла и ще сменя само primitive стойностите. Настройката ще отнеме 15 минути.

Заключение

Figma Variables са инвестиция от 1 час, която се изплаща на всеки проект. Примитивни цветове, semantic tokens с modes, spacing scale и scoping покриват нуждите на 90% от клиентски проекти. Dark mode става тривиален, brand промените отнемат минути, а developer handoff е чист и еднозначен. Направи го веднъж, преизползвай го винаги.