Дизайн-система з Figma MCP та Claude Code: як зменшити роботу руками

💡 Усі статті, обговорення, новини про AI — в одному місці. Приєднуйтесь до AI спільноти!

Привіт! Я Настя, продуктова дизайнерка з понад 5 роками досвіду роботи. Зараз я працюю в OneReach.ai — проєктую веб-інтерфейси для AI-driven B2B SaaS-рішень у сфері conversational AI та enterprise automation і постійно інтегрую штучний інтелект у свій дизайн-процес.

Останні кілька днів я буквально живу в пабліках та стрічці LinkedIn. Читаю все підряд, збираю кейси та рішення чужих проблем, щоб просто скласти в голові картинку: як це все взагалі має працювати? Технології змінюються з шаленою швидкістю, тому намагаюся не втрачати контекст. Сподіваюся, цей матеріал залишатиметься актуальним хоча б якийсь час, тому що навіть у процесі написання цієї статті інструменти встигали оновитися.

Про що тут буде:

1. Офіційний Figma MCP: що це і як працює.
2. База по Claude: таби, проєкти та термінал.
3. Візуальний статус-лайн у Claude Code для контролю витрат.
4. Налаштування Figma MCP через термінал та десктоп.
5. Чи може AI побудувати дизайн-систему з нуля?

Головна новина минулого тижня — Figma випустила офіційний Figma MCP.

Для контексту: Model Context Protocol (MCP) — це відкритий стандарт від Anthropic, створений для підключення AI до зовнішніх систем (наприклад, з Cursor, Claude Code чи v0). Це означає, що тепер AI-агенти можуть «читати» макети, створювати та редагувати компоненти у ваших Figma файлах.

Насправді офіційний Figma MCP існував трохи раніше в базовому вигляді (для читання), але саме зараз Figma додала Write capabilities (запис на канвас) та Figma Skills.

Figma skills — це текстові інструкції формату .md, які дають моделі контекст, як правильно взаємодіяти з базовими примітивами, створювати компоненти, генерувати макети або навіть синхронізувати змінні (variables) між кодом та дизайном.

Як було раніше і що маємо зараз:

• До цього всі користувалися (й продовжують) Figma Console MCP від Southleft. Це неофіційний open-source інструмент. Він повністю безкоштовний і зараз має навіть більше можливостей, ніж офіційний, проте, скоріш за все, це питання часу.
• Рідний Figma MCP зараз у безкоштовній беті, але офіційно заявлено, що фіча запису (write capabilities) стане платною (usage-based). Тому тестуйте офіційний інструмент зараз, поки є вільний доступ. А далі вже будемо спостерігати, хто з розробників запропонує кращий функціонал.

Порівняння Figma MCP vs. Figma Console MCP

База по Claude: таби, проєкти та термінал

У складних дизайн-процесах Claude зараз помітно випереджає OpenAI. По-перше, стандарт MCP створили саме в Anthropic, тому їхні агенти підключаються до Figma нативно. По-друге, Claude значно краще тримає великі обсяги контексту (брифи, стайлгайди) і генерує точніший код без галюцинацій, якими часто грішить ChatGPT. І по-третє — це Артефакти: окреме вікно поруч із чатом, де результати видаються не суцільним кодом чи текстом, а як готові об’єкти. Завдяки цьому прямо в інтерфейсі зручно «поклікати» згенеровані UI-компоненти, переглянути візуалізовані схеми User flows, відрендерену SVG-графіку та структуровані брифи.

Сьогодні розглянемо саме його, хоча я тестувала також Codex, про нього, можливо, іншим разом. Тут важливо більше розібратися в сутностях та в тому, як все працює. Допоможе з цим тільки практика, а питання інструменту насправді другорядне.

Щоб отримати максимум, вам знадобиться підписка Pro (або вище), адже саме там відкриваються інтеграції MCP та більшість просунутих можливостей.

Якщо ви, як і я, спочатку губилися у всіх цих проєктах, скілах та різноманітних агентах, давайте розкладемо все по поличках. Перше, що треба розуміти: десктопний застосунок Claude (звична апка з інтерфейсом) та Claude Code (робота через термінал) — це різні речі з різними можливостями.

У десктопній версії з платною підпискою у вас з’являться три основні таби:

• Chat — класичний AI-помічник. Звичний режим діалогу для швидких запитів, брейншторму, ревʼю UX-копі чи розбору невеликих брифів. Важлива деталь, у цьому табі Claude має наскрізну пам’ять, він підтягує інформацію та загальний контекст з усіх ваших попередніх чатів.
• Cowork — агентні можливості Claude Code, але зі зручним інтерфейсом. Дає доступ до локальних файлів на комп’ютері, інтеграції через конектори та вміє автономно виконувати складні багатокрокові задачі. На відміну від чату, агент працює строго ізольовано: він спирається виключно на заданий вами контекст і має доступ тільки до тієї локальної папки на комп’ютері, яку ви йому вказали для роботи.
• Code — простір для роботи з кодом. Для нас, дизайнерів, це місце, щоб згенерувати UI-компоненти, написати працюючий прототип або перевірити логіку взаємодії.

Далі в Claude є своя ієрархія сутностей:

• Проєкти — ваші ізольовані робочі простори з власною базою знань. По суті, кожен проєкт — це окремий Claude, специфічно «натренований» на документах вашого продукту.
• Скіли — папки з конкретними інструкціями та ресурсами. Claude підтягує їх автоматично, коли бачить, що вони релевантні вашій поточній задачі.
• Плагін — це ніби коробка, в яку можна поставити все попереднє. Він зручно пакує в собі і скіли, і конектори, щоб ви могли встановити все необхідне одним кліком.

Claude Code (Термінал):

Окремо від десктопного застосунку існує Claude Code (робота через термінал). Наприклад, команда use_figma та повний доступ до всіх 16 інструментів взаємодії з макетами доступні саме тут.
Щоб агент у терміналі працював максимально автономно та правильно, він використовує:

• CLAUDE.md — базовий текстовий файл-інструкція (onboarding-документ). Коли AI починає працювати в папці проєкту, він читає цей файл першим.
• Хуки (Hooks) — це автоматичні тригери, які спрацьовують на певних моментах роботи. Працює за правилом: «якщо сталося X — зроби Y автоматично». (Наприклад, після оновлення макета — автоматично запусти скрипт синхронізації нових дизайн-токенів).

Детальніше в статті, яка генерується користувачами Claude для новачків

Візуальний статус-лайн у Claude Code

Коли працюєте через термінал, ви платите за використання API. За великих обсягів контексту гроші за токени можуть списуватися досить швидко і непомітно. Щоб контролювати витрати, попросіть Claude додати візуальний статус-лайн. Він у реальному часі показуватиме активну модель, заповненість контексту, витрачені токени та поточну вартість сесії.

Просто скопіюйте цей промпт, вставте у термінал і натисніть Enter:

/statusline Create a colorful visual status linescript with these exact colors using ANSI escape codes: 1) Model name in gray (e.g. «Sonnet 4.6»), 2) A 10-char progress bar using █ and ░ — green below 50%, yellow 50-80%, red above 80% — followed by ctx percentage in matching color, 3) Input tokens with downward arrow «↓in:» in cyan/blue color, output tokens with upward arrow «↑out:» in green color — if arrow symbols are not supported show «in:» and «out:» in gray instead, 4) Cached tokens «cached:» in magenta/purple with k suffix for thousands, 5) Session cost «cost:$» in yellow. Separate sections with gray " | " dividers. Example format: Sonnet 4.6 | [████░░░░░░] 10% | ↓in:1 ↑out:180 cached:18.4k | cost:$0.117

Додаємо Figma MCP

1. Налаштовуємо Figma MCP через Claude Code (Термінал)

Я деякий час звикала до термінала, тому декілька слів про нього. Термінал (або командний рядок) — це просто текстове вікно, де ви спілкуєтеся зі своїм комп’ютером за допомогою команд, а не кліків мишкою.

• Використовуйте стрілки на клавіатурі (Вгору/Вниз), щоб переміщатися між варіантами вибору або гортати історію своїх попередніх команд. Щоб підтвердити дію — тисніть Enter.
• Коли тексту стає забагато і ви губитеся, просто введіть команду clear і натисніть Enter (або використайте шорткат Cmd + K на Mac).

Почнемо:

1. В терміналі перевірте, чи маєте Node.js, відкрийте термінал і введіть: node --version. Якщо у вас щось типу v18.x.x або вище, то все ок. Якщо термінал видає помилку command not found — вам потрібно спершу завантажити та встановити Node.js з офіційного сайту nodejs.org.
2. Встановіть Claude Code, якщо ще його не маєте. Встановіть пакет командою npm install -g @anthropic-ai/claude-code. Залогіньтеся у свій профіль Anthropic та переконайтеся, що маєте підписку Pro (детальніше в їхній інструкції Quickstart). Перевірити, чи все працює, можна командою: claude --version.
3. У тому ж терміналі вводимо команду для встановлення офіційного плагіна від Figma: claude plugin install figma@claude-plugins-official (детальніше в інструкції Set up the remote server)
4. Введіть у терміналі /mcp, щоб відкрити менеджер ваших MCP-серверів. Стрілками виберіть figma у списку. Оберіть Authenticate та натисніть Enter. Вас перекине в браузер, де потрібно надати доступ до свого акаунта Figma. Повернувшись до термінала, ви маєте побачити повідомлення: Authentication successful. Connected to figma.

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

Щоб перевірити, чи все підключилося, відкрийте будь-який файл у Figma, перейдіть у Dev Mode і подивіться у правий сайдбар. У розділі MCP Servers статус має бути Enabled.

Щоб далі працювати створіть папку проєкту, або можете попросити Claude створити її:

mkdir ~/design-system-audit

cd ~/design-system-audit

claude

cd — це команда «перейти в папку» (change directory). Після цього Claude Code бачить всі файли в цій папці і може читати/записувати їх.

Саме тут Claude буде зберігати всі контекстні файли, експортовані іконки чи згенерований код. Тут же буде лежати файл інструкцій CLAUDE.md. Папка гарантує, що AI працює тільки з потрібним проєктом і не розкидає згенеровані файли по всьому вашому комп’ютеру.

2. Налаштовуємо Figma MCP через десктопний Claude

Тут усе значно простіше:

1. Перейдіть у налаштування: Customize → Connectors.
2. Знайдіть Figma, натисніть підключити та пройдіть авторизацію в браузері.

Щоб суттєво розширити можливості вашого агента, ви можете підключати до нього різноманітні кастомні скіли. Вони дозволяють AI виконувати більш специфічні задачі — від глибокого аналізу дизайн-токенів до генерації коду саме за вашими стандартами. Знайти такі розширення можна у Figma Community або на GitHub, а для активації достатньо просто додати їх у свій проєкт через інтерфейс Claude у вкладці Skills.

Чи може AI побудувати дизайн-систему з нуля

Часто буває, що ви працюєте над проєктом або тільки починаєте новий, вже маєте певні компоненти та стилі, але потрібно швидко все організувати та документувати. Figma-файл з компонентами є, але все розкидане хаотично. Кольори існують лише в styles, а не в design tokens. Частина компонентів з якоїсь дизайн-системи, частина — кастомні. Але створення повноцінної дизайн-системи з нуля — це тижні рутини. Тому я вирішила перевірити: чи можна делегувати цей процес AI і отримати готову архітектуру за години?

Впровадження дизайн-системи значно оптимізує ресурси команди. Час на проєктування типових екранів скорочується вдвічі, оскільки дизайнери використовують готові компоненти, а не малюють їх з нуля. Крім того, архітектура на основі токенів дозволяє вносити глобальні візуальні зміни за лічені години замість тижнів.

У моєму кейсі це був один Figma-файл з уже готовими дизайнами. Усередині були веб-сторінки, mobile, dashboard і маркетингові сторінки. Частина стилів і компонентів уже існувала, але система була неповною: десь кольори були захардкоджені, десь не вистачало variables, десь компоненти були зібрані не до кінця.

Я хотіла, щоб AI допоміг зібрати все, що вже є у файлі, структурувати це в логічну дизайн-систему, створити tokens, variables, компоненти, стани, variants і потім підключити це назад до макетів.

Я почала роботу з планування, опису завдання та контексту. Попросила AI поставити мені всі уточнюючі запитання. Їх було аж 45! Після відповідей AI згенерував промпт, поділений на 6 фаз:

• Session Kickoff
• Phase 1: Audit / Extraction
• Phase 2: Tokenization / Foundations
• Phase 3: Components / Variants / Variable Binding
• Phase 4: Migration
• Phase 5: Documentation

Логіка була такою: спочатку проаналізувати весь файл (hardcoded values, кольори, відступи). Раціоналізувати це в token architecture. Потім побудувати Foundations, створити компоненти, прив’язати variables і лише тоді замінити raw elements у макетах на компоненти та згенерувати документацію.

Не скажу, що результати моїх спроб одразу були ідеальними чи супершвидкими. Variables не всюди підключалися, доводилося повертатися. Але те, що вони автоматично зібралися і структурувалися у таблицю, вже дуже добре. Над самими компонентами краще працювати точково та описувати їх детальніше. Якщо давати запит на все загалом, результат виходить неякісним.

Ось як AI згенерував нотатки для дизайн-системи та що саме він змінив у файлі:

На завершення

Робота з AI у Figma вимагає від нас трохи іншого підходу до завдань. Ми стаємо своєрідними менеджерами для AI-агентів. Штучний інтелект вже класно справляється з рутиною: аудитом макетів, витягуванням стилів та генерацією масивів даних (variables, токени). Але збирати складні компоненти з варіантами поки що краще точково, постійно контролюючи результат.

AI ще не може зробити ідеальну дизайн-систему в один клік. Іноді variables прив’язуються криво, а налаштування fill та hug можуть десь злетіти чи не проставитися. Проте час на створення бази токенів та Foundations вже суттєво скоротився, і це не може не тішити.

Враховуючи, що Figma тільки-но запустила ці функції й зараз активно збирає фідбек, є сподівання, що далі генерація ставатиме якіснішою. Принаймні такі очікування.

Пишіть про свій досвід, які AI-інструменти зараз тестуєте ви? Можливо, вже маєте свої перевірені промпти чи лайфхаки для роботи з Figma MCP?

Сподобалась стаття? Підписуйтесь на автора, щоб отримувати сповіщення про нові публікації на пошту.