Щоб перетворити сирі hex у Figma Variables автоматично, запустіть скрипт у безкоштовному плагіні UX Hero: Code Runner. Він знаходить усі кольори без змінної, склеює майже однакові відтінки, будує систему з двох колекцій (Brand · Primitives з палітрою і Brand · Theme з ролями text, bg, border, action через alias) і привʼязує до них кожен шар. На нашому демо-файлі скрипт знайшов 51 захардкоджений шар і за ~1,1 секунди створив 13 примітивів, рольові токени і всі привʼязки.
Нижче: як виглядає проблема, що саме робить скрипт по кроках, як те саме зробити вручну і чим ці два шляхи відрізняються за часом і помилками. Готовий скрипт лежить у безкоштовному воркбуці «Автоматизація Figma».
Що таке хардкод-колір у Figma?
Хардкод-колір - це заливка або рамка, де стоїть сире значення на кшталт #2E6BFF, а не змінна чи стиль.
Як це стається, знає кожен. Пара ітерацій з клієнтом, кілька правок «на швидку», колір піпеткою з референсу, і от у файлі сотні хексів. Дизайн-система ніби є, а розробник бачить #2E6BFF у Dev Mode і пише свій синій. А поруч лежить #2F6CFE, який на око не відрізнити, але в коді це вже другий колір.
Чим це погано на практиці:
- Темна тема стає ручною роботою. Режим можна перемкнути тільки там, де шар дивиться на змінну.
- Ребрендинг перетворюється на пошук. Замість однієї зміни значення ви перебираєте шари.
- AI-агент копіює хаос. Claude Code через Figma MCP читає назви змінних. Якщо змінних нема, у код їдуть сирі hex.
Чому токени взагалі важливі і які в них рівні, я розбирав у матеріалі design tokens простими словами. Тут зосередимось на конкретній задачі: файл уже є, хексів у ньому багато, треба навести лад.
Як знайти всі захардкоджені кольори у файлі?
У Code Runner є готовий сніпет Audit colors. Він обходить сторінку, виділяє всі шари, де колір не привʼязаний ні до змінної, ні до стилю, і показує в консолі таблицю: шар і його кольори. Внизу загальна кількість.
- Встановіть UX Hero: Code Runner з Figma Community.
- Правий клік на канвасі → Plugins → UX Hero: Code Runner.
- У рядку Snippets натисніть Audit colors, потім Run.
- Запишіть цифру. На демо-файлі для відео це був 51 шар.
Ця цифра - ваша точка відліку. Після конвертації запускаєте аудит ще раз і маєте отримати «No hardcoded colors».
Що робить скрипт «хекси → токени» по кроках?
Скрипт працює з виділенням, а якщо нічого не виділено, то з усією сторінкою. Ось його логіка:
- Збирає сирі кольори. Усі видимі solid-заливки і рамки без змінної. Шари з color style і шари всередині інстансів пропускає і рахує окремо.
- Склеює майже однакові відтінки. Якщо кольори відрізняються не більше ніж на 6 одиниць з 255 у кожному каналі (параметр
MERGE), вони стають одним токеном. Так#2E6BFFі#2F6CFEперестають бути двома синіми. Назву групі дає колір, який використовується найчастіше. - Називає примітиви. За відтінком і світлістю:
blue/500,neutral/950,white. Якщо назви збігаються, додає-2,-3. - Визначає роль за типом шару. Заливка тексту стає
text/primary, рамка стаєborder/default, заливка фрейму стаєbg/canvas, а насичена заливка (кнопки, акценти) стаєaction/primary. Порядок назв іде за частотою використання. - Створює дві колекції. Brand · Primitives з палітрою і Brand · Theme, де кожна роль посилається на примітив через alias.
- Ховає примітиви з пікера. У примітивів порожні scopes, тому в макеті їх не взяти напряму. Ролям виставлені правильні scopes:
textтільки для тексту,borderтільки для рамок. - Привʼязує кожен шар до його рольового токена. Змінні, які вже існують з такою назвою, перевикористовує, а не дублює.
Початок скрипта виглядає так, і ці два рядки - єдине, що варто чіпати руками:
const APPLY = true; // false = лише план у консолі, нічого не змінює
const MERGE = 6; // 0-255: наскільки близькі кольори склеюються в один токенМоя порада: перший запуск робіть з APPLY = false. Скрипт виведе таблицю «токен, примітив, hex, кількість шарів», і ви побачите план до того, як щось зміниться. Подобається - ставите true і запускаєте ще раз. Не подобається результат після застосування - один Cmd+Z відкочує весь запуск.
Як виглядає система з двох колекцій?
Двошарова система - це примітиви, які зберігають значення, і ролі, які описують призначення та посилаються на примітиви.
| Колекція | Приклад змінних | Що в ній | Видна в пікері |
|---|---|---|---|
| Brand · Primitives | blue/500, neutral/950, white | сама палітра, сирі значення | ні |
| Brand · Theme | text/primary, bg/canvas, border/default, action/primary | ролі, alias на примітиви | так, з потрібними scopes |
Чому саме так, а не одна колекція з хексами? Бо шари привʼязані до ролей. Коли захочете темну тему, ви додаєте режим Dark у Brand · Theme і перенаправляєте alias на інші примітиви, а шари не чіпаєте взагалі. Як це зробити покроково, є в матеріалі темна тема у Figma через токени.
Важливий момент: скрипт використовує тільки режим за замовчуванням у кожній колекції, тому працює і на безкоштовній Figma, де в колекції один режим.
Як зробити те саме вручну?
Вручну це реально, і на маленькому файлі навіть корисно один раз пройти шлях руками. Кроки:
- Виділіть фрейм і подивіться панель Selection colors справа. Це ваш список унікальних кольорів.
- Вирішіть, які відтінки склеїти. Тут доведеться порівнювати hex очима або в окремому інструменті.
- У Variables створіть колекцію примітивів і додайте змінну під кожен колір палітри.
- Створіть другу колекцію з ролями і для кожної виставте alias на примітив.
- Налаштуйте scopes: приберіть примітиви з пікера, ролям дайте тільки потрібні типи шарів.
- Пройдіться по Selection colors і привʼяжіть кожен колір до ролі. Окремо перевірте текст і рамки, бо один hex може бути і фоном, і текстом.
- Запустіть аудит знову і доробіть те, що загубилось.
Вручну чи скриптом: що швидше і надійніше?
| Критерій | Вручну | Скрипт у Code Runner |
|---|---|---|
| Час на демо-файл (51 шар) | кожна змінна, alias і привʼязка руками | ~1,1 секунди на запуск |
| Склеювання схожих відтінків | на око, легко пропустити #2F6CFE | за порогом MERGE, однаково для всього файлу |
| Пропущені шари | часто, особливо рамки і вкладені фрейми | обходить усе дерево, аудит після запуску показує залишок |
| Роль за типом шару | вирішуєте самі для кожного кольору | текст, рамка, фон, акцент визначаються автоматично |
| Alias і scopes | налаштовуєте кожну змінну окремо | створюються разом зі змінними |
| Назви токенів | одразу продумані | робочі, варто переглянути і перейменувати |
| Відкат | багато кроків undo | один Cmd+Z на весь запуск |
Чесний мінус скрипта в одному рядку таблиці: назви. text/secondary чи bg/subtle - це розумне припущення за частотою, а не ваша продумана семантика. Тому після запуску відкрийте Variables і перейменуйте все, що просить іншої назви. Привʼязки при цьому лишаються. Як домовитись про схему назв, є в гайді з нейменінгу токенів.
Що робити з кольорами в інстансах і стилях?
- Інстанси. Скрипт їх пропускає навмисно. Виправляйте колір у головному компоненті, і він доїде до всіх копій. Якщо почати правити інстанси, ви створите overrides, які потім важко прибрати.
- Color styles. Теж пропускаються: стиль вже є іменованим рішенням. Переводити стилі на змінні - окрема задача.
- Градієнти і картинки. Скрипт працює тільки з solid-кольорами.
- Повторний запуск безпечний. Колекції і змінні з такими самими назвами перевикористовуються, дублікатів не буде.
Хто пише такі скрипти, якщо я не знаю JavaScript?
Claude. Такі скрипти я не пишу з нуля, їх пише Claude за моїм описом задачі. У Code Runner є кнопка Copy prompt for Claude: вона копіює інструкцію з правилами плагіна і списком хелперів. Ви дописуєте задачу своїми словами, наприклад «переведи всі відступи не по сітці 4 px на найближчі кратні», і отримуєте код, який зазвичай запускається з першого разу. Детально про плагін і цей процес у матеріалі Code Runner v2 і Claude.
Одне правило лишається: читайте скрипт перед запуском і пробуйте на копії файлу. Писати код за вас може AI, а відповідальність за файл ваша. Як ці скрипти працюють наживо, я показую на YouTube-каналі UX Hero, а сторінка плагіна з усіма деталями тут: uxhero.design/plugins/code-runner.
Часті питання
Як автоматично перетворити hex-кольори на Figma Variables?
Найшвидший спосіб - скрипт у безкоштовному плагіні UX Hero: Code Runner. Він знаходить усі заливки і рамки без змінної, склеює майже однакові кольори, створює колекцію Brand · Primitives з палітрою і колекцію Brand · Theme з ролями (text, bg, border, action), які посилаються на палітру через alias, і привʼязує кожен шар до його ролі. На демо-файлі з 51 захардкодженим шаром це зайняло близько 1,1 секунди.
Чи працює скрипт на безкоштовному тарифі Figma?
Так. Скрипт використовує тільки режим за замовчуванням у кожній колекції, тому вкладається в обмеження безкоштовної Figma. Сам плагін UX Hero: Code Runner теж безкоштовний, без акаунта і без доступу до мережі.
Що скрипт робить з кольорами всередині інстансів і з color styles?
Пропускає. Шари всередині інстансів треба виправляти в головному компоненті, тоді зміна доїде до всіх копій. Кольори, які вже мають color style або змінну, скрипт не чіпає і не дублює: існуючі змінні з тією ж назвою він перевикористовує.
Чи можна спершу подивитись, що зміниться, і як відкотити?
Так. Якщо на початку скрипта поставити APPLY = false, він лише виведе в консоль таблицю: токен, примітив, hex і кількість шарів. Нічого не створює і не привʼязує. Якщо запустили з APPLY = true і результат не подобається, весь запуск відкочується одним Cmd+Z.
Чим це відрізняється від створення змінних вручну?
Результат той самий: дві колекції і шари на змінних. Різниця у швидкості і помилках. Вручну ви самі вирішуєте, які відтінки склеїти, створюєте кожну змінну, налаштовуєте alias і scopes і проходите всі шари. Скрипт робить це за один запуск і нічого не пропускає. Зате вручну ви одразу даєте ролям продумані назви, тому після скрипта варто переглянути і перейменувати токени, привʼязки при цьому не злітають.
Скрипт за секунду прибирає наслідки. Але якщо хекси знову розлітаються через місяць, проблема не у файлі, а в тому, що системи немає в процесі: токенів у три шари, компонентів з усіма станами і коду, який на них спирається. Цьому я, Dmytro Nikolaienko, вчу на курсі UX Hero «Дизайн-система + AI», і Code Runner там один з робочих інструментів.