Один колір → дизайн-система, 6 екранів і темна тема

Відкрий сторінку плагіна → Open in Figma (або Try it out). Далі будь-який плагін запускається так: правий клік по канвасу → Plugins → назва плагіна.

Якщо сторінка ще не відкривається, плагін на модерації Figma, з'явиться за кілька днів; напиши боту, і я пришлю, щойно вийде.

1. Новий файл Figma → правий клік → Plugins → UX Hero: VooDoo Maker.
2. У поле основного кольору встав цей колір:

3. Натисни Generate і дочекайся кінця прогрес-бару.

Чому саме #E11D48. VooDoo за WCAG сам вирішує, який текст ставити на кнопки. Для помаранчевого #FB4A1B виходить чорний текст, для рожевого #E11D48 - білий, на екранах це виглядає краще. Свій бренд-колір теж підійде, просто кнопки будуть іншими.

Що отримаєш:

• 159 змінних у трьох колекціях: VooDoo · Primitives, VooDoo · Theme (Light і Dark), VooDoo · Components. Наприклад semantic/bg/canvas, semantic/action/primary/default, primitives/space/16.
• 21 текстовий стиль: від VooDoo/H1 до VooDoo/Caption.
• 12 компонентів з варіантами і станами, шкала відступів і радіусів. Нейтральні сірі VooDoo підмішує під відтінок бренду.

На безкоштовному Figma (Starter) буде тільки світла тема і секції на одній сторінці: Starter дозволяє один режим на колекцію і обмежує кількість сторінок. Для решти воркбука цього вистачить.

1. Перейди на порожню сторінку (наприклад Page 1). VooDoo кладе компоненти на свої сторінки, а на Starter може покласти секції. Рендер на чистій сторінці, де будуть тільки демо-екрани.
2. Правий клік → Plugins → UX Hero: Claude to Figma. Натисни Copy prompt for Claude і встав у новий чат на claude.ai: так Claude вивчить схему плагіна.
3. Далі для кожного екрана: скопіюй промпт нижче в той самий чат → скопіюй відповідь Claude (JSON) → встав у плагін → Render.

Токени в трьох рядках. Кожен колір у JSON записаний як {"token": "$semantic/bg/elevated", "fallback": "#FFFFFF"}, відступ як "$primitives/space/24", текст як "textStyle": "VooDoo/H3". У файлі з VooDoo плагін прив'язує їх до твоїх змінних і стилів. У порожньому файлі малює на запасних значеннях (fallback), тому той самий JSON працює будь-де.

Якщо не хочеш чекати Claude, встав готовий JSON: кнопка Копіювати JSON під кожним промптом. Це ті самі екрани з відео, перевірені на 0 помилок.

Generate JSON for the "UX Hero: Claude to Figma" plugin (schema v1, see SCHEMA.md).
Use my VooDoo Maker design system tokens, always with a fallback:
- colors: {"token": "$semantic/bg/canvas", "fallback": "#F7F7F8"}, semantic/bg/elevated,
  semantic/text/primary|secondary|muted, semantic/border/subtle,
  semantic/action/primary/default, semantic/text/on-accent, semantic/status/<tone>/<bg-subtle|text|icon>
- spacing: "$primitives/space/4|8|12|16|20|24|32|40|48|64", radius: $primitives/radius/sm|md|lg|xl|full
- text: "textStyle": "VooDoo/H3", "VooDoo/Body", "VooDoo/Body SM Strong", "VooDoo/Caption"... plus size/weight as fallback
Icons: Phosphor duotone as inline SVG images, layer name "icon/<name> [<token>]".
Auto layout everywhere, 4 px grid, real English copy, no lorem ipsum.

3.1 · SaaS-дашборд Orbit

1 фрейм · 1440 px

промпт для Claude · дашбордКопіювати промпт

A revenue analytics dashboard for a SaaS called Orbit, 1440 wide: left sidebar with
workspace switcher, nav, trial upgrade card and user; top bar with search and "New report";
4 KPI cards with sparklines; a 12-month stacked bar chart with a tooltip; an activity feed;
a "Top customers" table with plan and status badges.

Кнопка копіює загальну частину і цей опис разом.

готовий JSON · dashboard.json · 95 КБКопіювати JSON

{"version":1,"theme":{"mode":"light","bg":{"token":"$semantic/bg/canvas","fallback":"#F7F7F8"},"surface":{"token":"$semantic/bg/elevated","fallback":"#FFFFFF"},"text":{"token":"$semantic/text/primary","fallback":"#27272B"},"muted" …

Повний файл копіюється кнопкою. Якщо не хочеш чекати Claude, встав готовий JSON.

Встав у Claude to Figma → Render. Дашборд з'явиться на канвасі за секунду.

3.2 · Лендинг Lumen

2 фрейми · 1440 px + мобільна версія 390 px

промпт для Claude · лендингКопіювати промпт

A landing page for Lumen, an AI meeting-notes app, 1440 wide: header, hero with a big
headline, two CTAs and a product screenshot built from layers, logo row, 3 feature cards,
pricing with 3 tiers (middle one highlighted), testimonial with stats, FAQ, CTA band, footer.
Plus a 390 mobile version of the hero and features as a second frame.

Кнопка копіює загальну частину і цей опис разом.

готовий JSON · landing.json · 116 КБКопіювати JSON

{"version":1,"theme":{"mode":"light","bg":{"token":"$semantic/bg/canvas","fallback":"#F7F7F8"},"surface":{"token":"$semantic/bg/elevated","fallback":"#FFFFFF"},"text":{"token":"$semantic/text/primary","fallback":"#27272B"},"muted" …

Повний файл копіюється кнопкою. Якщо не хочеш чекати Claude, встав готовий JSON.

Встав → Render. Кожен новий рендер стає праворуч від попереднього.

3.3 · Мобільний застосунок Stride

3 екрани · 390 × 844

промпт для Claude · мобільний застосунокКопіювати промпт

Stride, a habit and running app, 3 screens 390 x 844: onboarding with an illustration made
of shapes, Today screen with a week strip, daily goal card, stats and habit list with a tab bar,
and a run details screen with a weekly bar chart, 4 metrics, a reminder toggle and a sticky CTA.

Кнопка копіює загальну частину і цей опис разом.

готовий JSON · mobile.json · 61 КБКопіювати JSON

{"version":1,"theme":{"mode":"light","bg":{"token":"$semantic/bg/canvas","fallback":"#F7F7F8"},"surface":{"token":"$semantic/bg/elevated","fallback":"#FFFFFF"},"text":{"token":"$semantic/text/primary","fallback":"#27272B"},"muted" …

Повний файл копіюється кнопкою. Якщо не хочеш чекати Claude, встав готовий JSON.

Встав → Render. Тепер на сторінці 6 екранів у ряд.

Очікувано: 0 помилок і 0 попереджень. У порожньому файлі без VooDoo будуть лише попередження «token not found», це нормально: екран намалюється на fallback-кольорах.

Кожен екран, який збудував плагін, пам'ятає свій JSON. Тому правки - це діалог з Claude, а не новий промпт з нуля.

1. Виділи екран на канвасі (наприклад Orbit).
2. У плагіні натисни Copy iteration prompt: Claude отримає правила, нагадування про схему і поточний екран.
3. Встав у чат і допиши правку своїми словами, наприклад: «додай у таблицю колонку з країною клієнта».
4. Встав відповідь у плагін, у Render to вибери Replace selection → Render.

Нова версія стає на місце старої, а стара переїжджає в секцію History поруч: підписана і заблокована. Так накопичуються v1, v2, v3, і будь-яку можна повернути. Кожен крок - один Cmd+Z.

Ітерації з'являться в наступному оновленні плагіна (v1.1). Якщо у твоїй версії ще нема Replace selection, оновлення вже на підході.

Правий клік → Plugins → UX Hero: Design System Doctor → Run audit.

• Colors: 846 з 1044 кольорів на токенах.
• Text: 422 з 433 текстів зі стилями.
• Spacing: 0 проблем, 1 209 значень на токенах.

Що перевіряє: те, що зазвичай ловлять очима на рев'ю. Кольори поза палітрою, текст без стилів, відступи не по сітці 4 px, радіуси не зі шкали, компоненти без станів. Знайдене можна виправити пачкою, кожна правка - один undo.

Мінус бали лише за іконки: SVG приходить зі своїм кольором. Відкрий список неприв'язаних кольорів і клікни по рядку: Figma виділить цю іконку на канвасі. Виправимо їх скриптом на наступному кроці.

1. Правий клік → Plugins → UX Hero: Code Runner. Зверху редактор, знизу консоль.
2. Скопіюй скрипт, встав у редактор і натисни Run (або Cmd+Enter). Виділяти нічого не треба: скрипт сам знаходить усі фрейми на сторінці.

// UX Hero · Code Runner demo: "every screen, dark mode, one click"
// Paste into Code Runner on the page where Claude to Figma rendered the demos
// (Orbit dashboard, Lumen landing, Stride app) and press Run.
//
// 1. Binds every icon layer named "icon/<name> [<token>]" to its VooDoo variable,
//    so icons follow the theme too (Claude to Figma draws them as SVG with a fixed color).
// 2. VooDoo · Theme has a Dark mode (paid Figma plan): a dark copy of every screen
//    appears under the original. Only one mode (Figma Starter): builds a
//    "Screens overview" board with all screens scaled down and labeled instead.
// Works on every top-level frame of the page. Undo: one Cmd+Z. Safe to run again.
…

Що робить: спершу прив'язує кожну іконку до її токена (роль записана в назві шару, наприклад icon/bell [text/muted]), потім робить темну копію кожного екрана, перемикаючи режим колекції Theme. У консолі побачиш Screens: 6, кількість іконок на токенах і результат.

• Платний план Figma (у VooDoo · Theme є режим Dark): під кожним екраном з'являється темна копія. Іконки теж темніють, бо скрипт спершу прив'язав їх до токенів. Клікни по копії: у панелі Layer видно «VooDoo · Theme: Dark», можна перемкнути на Light і назад.
• Figma Starter (один режим на колекцію, Dark немає): скрипт пише в консоль чому і будує темну дошку Screens overview з усіма екранами в мініатюрах і статистикою.

Скасувати все - один Cmd+Z. Запускати повторно безпечно: старі темні копії скрипт замінює.