Щоб автоматично перевірити дизайн-систему у Figma, запустіть плагін UX Hero: Design System Doctor: він рахує health score від 0 до 100, знаходить кольори без змінних, текст без стилів, відступи поза сіткою 4/8 px і компоненти без станів, а більшість знайденого виправляє в один клік. Його пара, VooDoo Maker, робить зворотне: з одного кольору генерує систему зі змінними у три шари, Light і Dark темою та 12 компонентами. Обидва плагіни безкоштовні і працюють на Figma Starter.
Нижче: чому системи «хворіють» навіть у сильних командах, що саме перевіряє і як лікує DS Doctor, що генерує VooDoo Maker, що змінюється на безкоштовному плані, і робочий цикл «згенерував, зібрав екрани, перевірив».
Чому дизайн-система «хворіє» навіть у хороших командах?
Бо систему ламають по одному шару. Дедлайн, треба швидко поправити відтінок кнопки, і хтось вбиває хекс руками. Хтось копіює текст з іншого файлу разом зі шрифтом, але без стилю. Хтось ставить padding 13, бо «так красивіше». Через пів року відкриваю файл, а там:
- захардкоджені кольори замість змінних. На одному реальному аудиті американського стартапу таких було 73% від усіх кольорів у макетах;
- текст без текстових стилів, де «Body» існує у пʼяти варіантах, що відрізняються на піксель;
- відступи і радіуси поза сіткою: 13, 15, 22, а ще дробові координати на кшталт 120.5;
- компоненти без станів: у кнопки є Default і Hover, а Focus, Disabled і Loading девелопер домальовує сам.
Поки дизайн живе тільки у Figma, це просто неохайність. Коли ж код пише Claude чи Cursor, кожен такий хекс стає окремим кольором у продакшні. Система, яка дійшла до коду, вимагає, щоб у файлі не було самодіяльності. Ручний аудит я розписував у матеріалі аудит дизайн-системи за один день. DS Doctor робить ту саму роботу за хвилину.
Що перевіряє Design System Doctor?
DS Doctor - це плагін-лінтер для дизайн-системи: сканує поточну сторінку або виділення і розкладає проблеми на чотири перевірки.
| Перевірка | Що знаходить | Як лікує |
|---|---|---|
| Кольори | fill і stroke без змінної і без стилю, згруповані за хексом | привʼязує до вашої локальної змінної: спершу точний збіг, далі найближча за ΔE |
| Текст | текстові шари без стилю, згруповані за шрифтом, вагою, розміром і інтерліньяжем | застосовує ваш стиль до групи або створює нові стилі з груп, яким нема пари |
| Відступи і радіуси | gap і padding поза сіткою 4 або 8 px, радіуси не з вашого списку, дробові x, y, width, height | Snap по одному значенню або всі разом |
| Компоненти | набори без потрібних станів (Hover, Focus, Disabled, Error, Loading, Empty - список обираєте ви), інстанси без головного компонента, фрейми, схожі на відірвані компоненти | підсвічує на канвасі, щоб ви вирішили самі |
Health score - зважена оцінка від 0 до 100: кольори дають 35%, текст 25%, відступи 25%, компоненти 15%. Якщо якоїсь категорії у файлі нема, ваги перераховуються. Корисно не стільки саме число, скільки його динаміка: було 72, після прибирання 94, і це можна показати команді.
Як DS Doctor лікує в один клік і нічого не ламає?
Найцікавіше в кольорах. Плагін не просто шукає змінну з таким самим хексом:
- Семантика перед примітивами. Якщо
#111110є і вprimitives/neutral/950, і вtext/primary, переможе семантичний токен. Аліаси він розвʼязує сам. - Токен за типом шару. Текст отримає
text/primary, а рамка з тим самим кольоромborder/strong. - Найближчий за ΔE. Немає точного збігу, бо хтось зробив «трохи темніше»? Ви бачите найближчу змінну і ставите свій поріг толерантності.
- Спершу прев'ю. Dry run показує, що саме буде привʼязано, і тільки потім Bind для одного рядка або для всіх точних збігів.
З текстом та сама логіка: стиль підбирається за сімейством, вагою і розміром, тому Bold ніколи не сяде на Regular. Шари всередині інстансів плагін не чіпає взагалі, щоб не наплодити overrides. Кожен фікс це один крок undo, і після кожного плагін пише, що виправив, що пропустив і чому.
Наприкінці можна завантажити однофайловий HTML-звіт для команди або скопіювати короткий текстовий підсумок. Клік по будь-якій знахідці виділяє шар на канвасі.
Що генерує VooDoo Maker з одного кольору?
VooDoo Maker - це генератор стартової дизайн-системи: обираєте пресет або свій брендовий колір, тиснете Generate, і приблизно за хвилину у файлі зʼявляються:
- змінні у три шари. Primitives з 11-кроковими шкалами для primary, neutral і статусних кольорів плюс spacing і radius. Semantic з bg, text, border, action і status. Component, які посилаються на semantic, наприклад
component/button/primary/bg/hover; - Light і Dark як два режими однієї колекції. Нейтральні сірі виводяться з вашого primary, тому сірий виглядає «вашим»;
- 12 компонентів: Button, Input, Checkbox · Radio · Toggle, Badge, Avatar, Spinner · Skeleton, Card, Table row, Toast · Alert, Tooltip, Tabs · Segmented, Modal. З осями Type × Size × State, focus-кільцем як справжньою тінню і disabled через токени, а не через прозорість;
- сторінки специфікацій: анатомія і властивості, сітка всіх варіантів, приклади використання, плюс обкладинка з порівнянням Dark і Light та бібліотека іконок.
Чому три шари, а не одна палітра? Бо так токени читає розробник: component-токен мапиться на проп, semantic на CSS-змінну для кожної теми. Детально про це в матеріалі design tokens простими словами. Повторний запуск замінює тільки сторінки, які VooDoo створив сам, ваші не чіпає.
Чи працює це на безкоштовній Figma Starter?
Так, і це було обовʼязкове правило: більшість людей у Figma Community на безкоштовному плані, а плагін, який падає на Starter, отримує погані відгуки. На Starter діють два ліміти: один режим змінних на колекцію і три сторінки на файл.
| Figma Starter (безкоштовно) | Professional і вище | |
|---|---|---|
| VooDoo Maker: теми | тільки Light, на обкладинці пояснення, чому Dark пропущено | Light + Dark |
| VooDoo Maker: розкладка | усе на одній сторінці, кожен блок окремою секцією | окрема сторінка на кожен компонент |
| DS Doctor | працює повністю: не створює ні сторінок, ні режимів, змінні тільки читає | те саме |
Обидва плагіни працюють офлайн: доступу до мережі в них нема, акаунта теж, нічого не виходить за межі файлу.
Як побудувати цикл: згенерував, зібрав, перевірив?
- Згенеруйте основу у VooDoo Maker. Порожній файл, ваш брендовий колір, потрібні компоненти, Generate.
- Підкрутіть під продукт. Перейменуйте токени під свою мову, приберіть зайві компоненти, додайте свої. Темну тему одразу перевірте на реальних екранах, а не на обкладинці. Як влаштувати її правильно, є в гайді темна тема у Figma через токени.
- Збирайте екрани тільки з компонентів і змінних. Тут найбільше спокус «швиденько вбити хекс».
- Раз на тиждень або перед передачею в розробку запускайте DS Doctor. Дивіться health score, лікуйте кольори і текст пачкою, відступи вибірково.
- Віддайте HTML-звіт команді. Число, яке росте, переконує краще за будь-яку лекцію про дисципліну.
Якщо потрібна перевірка, якої нема в DS Doctor, напишіть її самі з Claude і запустіть у Code Runner: там є сніпет аудиту захардкоджених кольорів, з якого зручно почати. А як ці плагіни працюють на живому файлі, покажу на YouTube-каналі UX Hero.
Де взяти DS Doctor і VooDoo Maker?
Обидва плагіни безкоштовні. На момент написання вони проходять модерацію у Figma Community, тож посилання зʼявляться трохи пізніше:
- VooDoo Maker - опис, скріншоти і посилання на сторінці плагіна.
- UX Hero: Design System Doctor - окремої сторінки ще нема. Щоб не пропустити вихід, заходьте в Telegram-бот UX Hero: він дасть посилання на канал, де я першим поділюсь плагіном, як тільки Figma його пропустить.
Часті питання
Як зробити аудит дизайн-системи у Figma автоматично?
Запустіть плагін UX Hero: Design System Doctor на сторінці або виділенні. Він рахує health score від 0 до 100 і показує чотири групи проблем: кольори без змінних і стилів, текст без текстових стилів, відступи і радіуси поза сіткою, компоненти без потрібних станів. Кожну знахідку можна виправити окремо або всі відповідності одним кліком.
Як рахується health score у DS Doctor?
Це зважена оцінка від 0 до 100: кольори дають 35%, текстові стилі 25%, відступи і радіуси 25%, компоненти і стани 15%. Якщо якоїсь категорії у файлі немає, вона не враховується, а ваги решти перераховуються.
Чи працюють DS Doctor і VooDoo Maker на безкоштовній Figma Starter?
Так. DS Doctor не створює сторінок і режимів змінних, тому на Starter працює повністю. VooDoo Maker на Starter будує тільки світлу тему, бо там дозволено один режим на колекцію, і кладе все на одну сторінку секціями, бо файл обмежений трьома сторінками. На платному плані VooDoo генерує Light і Dark та окрему сторінку на кожен компонент.
Чи замінює VooDoo Maker справжню дизайн-систему?
Він дає старт: змінні в три шари, 12 компонентів зі станами і сторінки специфікацій за хвилину. Але рішення про продукт, власні компоненти, документацію і перенесення токенів у код ви все одно робите самі. Цьому присвячений курс UX Hero «Дизайн-система з AI».
Де завантажити DS Doctor і VooDoo Maker?
Обидва плагіни безкоштовні і зараз проходять модерацію у Figma Community. Опис і посилання на VooDoo Maker є на uxhero.design/plugins/voodoo-maker. Посилання на DS Doctor зʼявиться в Telegram-каналі UX Hero, щойно Figma його опублікує.
Плагін знайде хекс і привʼяже його до токена. Але чому цей хекс взагалі зʼявився, і як зробити, щоб система жила в коді так само, як у Figma, він не скаже. Це вже про процес: токени, компоненти з усіма станами, Storybook і Claude, який тримає все в порядку. Саме це ми збираємо на курсі «Дизайн-система з AI».