Для дизайн-системи у 2026 вистачає шести безкоштовних плагінів Figma, по одному на кожну задачу. VooDoo Maker генерує систему з одного кольору, Design System Doctor і Design Lint шукають те, що випало з системи, Code Runner запускає скрипти від Claude прямо у файлі, Tokens Studio синхронізує токени з кодом, а Stark перевіряє контраст. Три з них від UX Hero (VooDoo Maker, Design System Doctor, Code Runner) повністю безкоштовні і працюють навіть на тарифі Figma Starter, у Stark і Tokens Studio частина функцій платна.
Нижче список не «топ-50 плагінів», а набір під конкретні задачі: що поставити, навіщо, і де чесні обмеження. Я Дмитро Ніколаєнко, 15 років у продуктовому дизайні, засновник UX Hero, і три плагіни з цього списку написав сам, бо мені їх бракувало на реальних проєктах.
Які задачі дизайн-системи взагалі закривають плагіни?
Плагін Figma - це маленька програма всередині файлу, яка робить за вас повторювану роботу з шарами, змінними і стилями. Для дизайн-системи таких робіт п'ять:
- Згенерувати старт - змінні, текстові стилі, базові компоненти.
- Провести аудит - зрозуміти, наскільки файл реально сидить на системі.
- Виправити хардкод - знайти кольори-хекси і текст без стилів, прив'язати до токенів.
- Автоматизувати рутину - масові правки, перейменування, темна тема, генерація станів.
- Перевірити доступність - контраст тексту і кнопок.
Якщо ви ще плутаєте змінні, токени і стилі, спершу прочитайте design tokens простими словами. Далі буде легше.
Порівняльна таблиця: який плагін для чого?
| Плагін | Задача | Безкоштовний? | Працює на Figma Starter? |
|---|---|---|---|
| VooDoo Maker (UX Hero) | згенерувати систему з одного кольору | так, повністю | так, але тільки світла тема (1 режим) |
| Design System Doctor (UX Hero) | аудит файлу, оцінка 0-100 | так, повністю | так |
| Code Runner (UX Hero) | скрипти від Claude, аудит кольорів | так, повністю | так |
| Design Lint | знайти шари без стилів | так, open source (MIT) | так |
| Tokens Studio | токени і синхронізація з Git | базова версія, теми і гілки в Pro | так |
| Stark | контраст і доступність | базова перевірка контрасту, решта платна | так |
Як згенерувати дизайн-систему з одного кольору?
VooDoo Maker - безкоштовний плагін UX Hero, який з одного бренд-кольору будує готовий фундамент системи за хвилину. Задаєте основний колір (за бажанням ще вторинний, третинний і статусні), бачите живе прев'ю у світлій і темній темі, тиснете Generate.
Що виходить у файлі:
- близько 159 змінних у трьох колекціях: Primitives (шкали по 11 кроків, відступи, радіуси), Theme з режимами Light і Dark (semantic-токени на кшталт
semantic/action/primary/default) і Components (component/button/primary/bg/hover) - 21 текстовий стиль від H1 до Caption
- 12 компонентів з варіантами і станами: Button (4 типи × 3 розміри × 5 станів), Input, Checkbox, Radio, Toggle, Badge, Avatar, Card, Table row, Toast, Tooltip, Tabs, Modal та інші, з векторними іконками, які можна підмінити
Нейтральні сірі плагін підмішує під відтінок бренду, а колір тексту на кнопках обирає за контрастом WCAG. Повторний запуск замінює тільки ті сторінки, які створив сам, ваші не чіпає.
Чесне обмеження: на безкоштовній Figma Starter у колекції змінних дозволений лише один режим, тому темної теми не буде, а компоненти ляжуть секціями на одну сторінку. Для першої системи і навчання цього достатньо. Встановити: VooDoo Maker у Figma Community.
Як перевірити, що випало з дизайн-системи?
Design System Doctor - безкоштовний плагін UX Hero, який одним натисканням Run audit ставить файлу оцінку від 0 до 100. Він ловить те, що зазвичай шукають очима на рев'ю:
- кольори поза палітрою
- текст без текстових стилів
- відступи не по сітці 4 px
- радіуси не зі шкали
- компоненти без станів
Клік по рядку в списку виділяє шар на канвасі, знайдене можна виправити пачкою, і кожна правка відкочується одним undo. На демо-файлі з шести екранів, які Claude намалював на токенах VooDoo, Doctor одразу дав 91 бал: 846 з 1044 кольорів були на токенах, а мінус йшов за SVG-іконки зі своїм кольором. Після одного скрипта стало 99.
Альтернатива з open source - Design Lint. Він безкоштовний під ліцензією MIT, без акаунта, шукає шари без прив'язаних стилів заливки, тексту, обведення, ефектів і радіусів, і вміє виправляти частину знахідок автоматично. Він орієнтований насамперед на стилі, тож для файлів, де система побудована на змінних, я б брав Doctor.
Як провести повний аудит системи за день, а не тільки запустити плагін, ми розбирали в матеріалі аудит дизайн-системи за один день.
Як виправити захардкоджені кольори і рутину скриптом з Claude?
Code Runner - безкоштовний плагін UX Hero, у якому ви вставляєте JavaScript, тиснете Cmd+Enter (Ctrl+Enter на Windows), і код виконується у відкритому файлі через Figma Plugin API. Писати код самому не треба: кнопка Copy prompt for Claude копіює промпт з правилами плагіна, ви дописуєте задачу, і Claude повертає готовий скрипт.
Усередині 8 готових сніпетів, серед них:
- Audit colors - знаходить і виділяє всі шари з кольором без змінної і без стилю
- Button - збирає кнопку 3 типи × 3 стани в одному component set
- Palette - малює всі локальні змінні кольору свотчами, прив'язаними до них
Весь запуск - один крок undo, плагін працює офлайн. Саме Code Runner у демо вище прив'язав SVG-іконки до токенів і зробив темні копії шести екранів за один запуск. Покроковий приклад з Claude є в статті Code Runner v2: скрипти для Figma з Claude. Встановити: Code Runner у Figma Community.
Чи потрібен Tokens Studio, якщо є Figma Variables?
Не завжди. Tokens Studio потрібен, коли токени мають жити в JSON у Git-репозиторії і синхронізуватися з кодом. Безкоштовна версія дає основну роботу з токенами, застосування до шарів і синхронізацію одним файлом з Git. Створення і редагування тем, колірні модифікатори та гілки в репозиторії потребують Pro-ліцензії.
Для системи, яка поки живе тільки у Figma, нативних Variables вистачає. Детальне порівняння - у матеріалі Figma Variables vs Tokens Studio.
Чим безкоштовно перевірити контраст?
Stark - найвідоміший плагін доступності для Figma. У безкоштовному тарифі є базова перевірка контрасту і симуляція порушень кольоросприйняття, а розширені функції (звіти, порядок фокусу, alt-тексти, командна робота) у платних планах. Для перевірки окремих пар «текст на фоні» безкоштовної частини достатньо.
Важливіше інше: якщо контраст закладений у semantic-токени один раз, перевіряти його на кожному екрані вже не треба. Саме тому VooDoo Maker обирає колір тексту на кнопках за WCAG ще на етапі генерації.
У якому порядку встановлювати плагіни?
Мій робочий порядок для нової системи:
- VooDoo Maker у новому порожньому файлі - фундамент зі змінних, стилів і компонентів.
- Design System Doctor - перша оцінка, щоб бачити точку старту.
- Code Runner зі сніпетом Audit colors - добити хекси і масові правки скриптами від Claude.
- Stark - точкова перевірка контрасту в нетипових місцях.
- Tokens Studio - тільки коли токени підуть у репозиторій.
Усі три плагіни UX Hero зібрані на одній сторінці безкоштовних Figma-плагінів UX Hero разом із воркбуком: один колір, шість екранів і темна тема за кілька хвилин. Як це виглядає наживо, я показую на YouTube-каналі UX Hero.
І головне: плагін дає старт, але не систему. Генерувати картинки і змінні сьогодні вміє кожен. Цінність дизайнера у 2026 - довести систему до коду так, щоб вона не розвалилась на першому ж релізі.
Часті питання
Який безкоштовний плагін Figma згенерує дизайн-систему з нуля?
VooDoo Maker від UX Hero. Ви задаєте один бренд-колір і натискаєте Generate, а плагін створює близько 159 змінних у трьох шарах (primitives, semantic, component) зі світлою і темною темою, 21 текстовий стиль і 12 компонентів з варіантами і станами. Плагін безкоштовний, без акаунта, працює офлайн.
Чи працюють ці плагіни на безкоштовному тарифі Figma Starter?
Так, усі три плагіни UX Hero (VooDoo Maker, Code Runner, Design System Doctor) працюють на Figma Starter. Обмеження йде від самої Figma: на Starter у колекції змінних лише один режим, тому VooDoo Maker створить тільки світлу тему, а компоненти покладе секціями на одну сторінку. Для навчання і першої системи цього вистачає.
Як знайти у Figma кольори, які не прив'язані до змінних?
Є два безкоштовні способи. Design System Doctor від UX Hero натисканням Run audit дає файлу оцінку від 0 до 100 і показує кольори поза палітрою, текст без стилів, відступи не по сітці 4 px і радіуси не зі шкали. Code Runner має готовий сніпет Audit colors, який за секунду виділяє на канвасі всі шари з кольором без змінної і без стилю.
Чи безкоштовні Stark і Tokens Studio?
Частково. У Stark безкоштовно доступні базова перевірка контрасту і симуляція порушень кольоросприйняття, а розширені функції доступності платні. У Tokens Studio безкоштовна основна робота з токенами і синхронізація одним файлом у Git, а створення тем, колірні модифікатори і робота з гілками потребують Pro-ліцензії.
Чи замінять плагіни побудову дизайн-системи власноруч?
Ні. Плагіни дають старт і прибирають рутину, але рішення про назви токенів, стани компонентів і те, як система доїде до коду, лишаються за дизайнером. Цьому вчить курс UX Hero «Дизайн-система + AI» від Dmytro Nikolaienko: токени з Figma, компоненти з усіма станами, Storybook і Claude, який тримає систему в порядку.
Поставте VooDoo Maker, Design System Doctor і Code Runner сьогодні, це нуль гривень і п'ять хвилин. А коли захочеться розуміти, що всередині токенів, і доводити систему до коду, приходьте на курс.