Figma MCP сервер: дизайн у код за один промпт

Класичний design-to-code виглядав так: дизайнер здає макет, розробник відкриває Dev Mode, вручну переписує відступи, копіює HEX-и, і на виході — код, який лише схожий на дизайн. Кожна ітерація — новий раунд «а тут ще 4 пікселі».

Figma MCP сервер прибирає цей проміжок. Тепер AI-агент у Cursor чи Claude Code читає ваш фрейм напряму з Figma — не скріншот, а структуру: шари, Auto Layout, змінні, компоненти — і генерує код, що спирається на реальні дані, а не на здогадки моделі.

Що таке MCP і до чого тут дизайн

MCP (Model Context Protocol) — це стандартний спосіб, яким AI-інструмент отримує доступ до зовнішнього джерела. Figma підняла свій MCP-сервер, і будь-який MCP-сумісний редактор — Cursor, Claude Code, VS Code, Windsurf — може під'єднатися й «бачити» ваші файли.

Різниця з простим «кинь скріншот у чат» принципова. Скріншот — це пікселі: модель вгадує, що там 16px відступу і що це кнопка. MCP віддає справжній контекст: дерево шарів, значення змінних (токенів), назви компонентів, констрейнти. Код виходить не «намальований на око», а зібраний з ваших власних величин.

Важливо розуміти й другий бік: MCP-канал двонапрямний. Через remote-сервер можна не лише витягувати дизайн у код, а й писати назад у канвас — наприклад, надіслати живий веб-інтерфейс у Figma як редаговані шари. Для дизайнера це означає, що зв'язок «макет ↔ код» перестає бути дорогою в один бік: правки з кодової бази можуть повертатись у дизайн, а не жити двома окремими життями. Саме тому MCP — не чергова «генерилка верстки», а інфраструктурна річ, яка змінює сам стик двох професій.

Remote чи desktop: який сервер обрати

Figma дає дві версії сервера, і плутанина тут коштує години налаштування:

Remote (за замовчуванням для більшості) — підключення до https://mcp.figma.com/mcp. Доступний на всіх тарифах і сітах, включно з безкоштовним. Має найширший набір можливостей, зокрема запис назад у канвас. Це те, що вам треба у 9 з 10 випадків.
Desktop — працює локально через десктоп-застосунок Figma. Потрібен для специфічних сценаріїв організацій та enterprise; вимагає Dev або Full сіт на платному тарифі.

Якщо ви дизайнер-одинак чи в малій команді — беріть remote. Нижче все на його прикладі.

Крок 1: підключити сервер

Найнадійніший шлях — встановити офіційний плагін Figma для вашого редактора: він приносить і налаштування MCP-сервера, і готові Agent Skills під типові сценарії. Але під'єднати можна й вручну, додавши URL сервера в конфіг.

У Cursor це файл ~/.cursor/mcp.json:

{
  "mcpServers": {
    "Figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

У Claude Code — одна команда в терміналі: claude mcp add --transport http figma https://mcp.figma.com/mcp. Далі редактор попросить авторизуватись у Figma через браузер — це разова дія.

Крок 2: вибрати фрейм і попросити код

Тепер практика. Відкрийте потрібний екран у Figma, виділіть фрейм або скопіюйте посилання на нього (Copy link to selection). У чаті редактора напишіть простий промпт:

Згенеруй React-компонент для цього фрейму. Використай Tailwind, дотримуйся значень зі змінних, стан hover теж.

Агент викличе інструменти сервера: get_code дістає структуру й генерує розмітку, get_image віддає візуальне представлення для контролю, get_variable_defs підтягує токени (кольори, відступи, радіуси). На виході — компонент, де padding береться з вашого spacing/md, а не з випадкового числа.

Порівняйте два підходи на простій картці товару. Кинули скріншот — модель написала padding: 16px; color: #1A1A1A; border-radius: 12px, вгадавши числа на око; за тиждень дизайнер змінив радіус на 10, і код мовчки розійшовся з макетом. Через MCP той самий компонент вийшов з padding: var(--spacing-md); border-radius: var(--radius-lg) — прив'язаним до змінних. Змінили токен у Figma — наступна генерація вже інша, без ручного полювання за HEX-ами по файлах.

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

Крок 3: Code Connect — щоб код був «ваш», а не абстрактний

Це крок, який відрізняє іграшку від інструменту. За замовчуванням MCP генерує новий код з нуля. Але у вас уже є дизайн-система з компонентами <Button>, <Card>, <Input>. Ви не хочете, щоб агент щоразу вигадував кнопку заново.

Code Connect зв'язує Figma-компонент із реальним компонентом у вашому репозиторії. Після налаштування MCP-сервер знає: цей елемент у макеті — це <Button variant="primary"> з вашої бібліотеки, а не абстрактний <button>. Генерований код починає використовувати вашу систему, а не паралельну.

Ми розбирали Code Connect окремо — якщо ще не налаштовували, почніть звідти, бо без нього MCP дає красиві, але «чужі» шматки коду.

Що MCP робить добре, а що ні

Чесний розділ, щоб не було завищених очікувань.

Робить добре:

Точні відступи, кольори й радіуси зі змінних — без ручного копіювання HEX-ів.
Структуру: Auto Layout коректно перекладається у flexbox, ієрархія шарів — у дерево DOM.
Перший чорновий компонент за секунди замість півгодини верстки.

Не робить (поки що) добре:

Складну логіку стану й даних — це все одно на вас.
Ідеальний адаптив: брейкпоінти краще довести руками.
Великі екрани цілком — розбивайте на компоненти.

Правильна ментальна модель: MCP — це не «дизайн сам стає продакшн-кодом», а дуже сильний старт, який прибирає нудну механічну частину й лишає вам інженерні рішення. Приблизно як в одному з розборів на нашому YouTube: цінність не в тому, що AI пише за вас, а в тому, що ви перестаєте витрачати годину на перенесення пікселів.

Типові помилки на старті

Більшість розчарувань у MCP — не про сам сервер, а про те, як його годують. Чотири речі, що ламають результат частіше за все:

Хардкод замість змінних у макеті. Якщо у Figma кольори й відступи вбиті числами, а не токенами — MCP просто перенесе ці числа в код. Сервер віддає рівно стільки системності, скільки її у вашому файлі. Порядок у дизайні = порядок у коді.
Генерація цілими екранами. Спокуса «зроби мені всю сторінку» велика, але результат — нечитабельна портянка, яку легше переписати, ніж полагодити. Дробіть на компоненти.
Ігнорування Code Connect. Без нього кожна генерація народжує нову кнопку. За місяць у вас три різні <Button> і жодної системи. Налаштуйте зв'язки один раз.
Сліпа довіра до виходу. MCP дає чорновик, а не фінал. Не закомітили — не перевіривши get_image-прев'ю поруч із живим рендером. Око ловить розбіжність за секунди, код-рев'ю — за півгодини.

Ще один нюанс: remote-сервер працює з тим, що виділено або передано посиланням. Якщо агент «не бачить» ваш фрейм — переконайтесь, що ви скопіювали лінк саме на selection, а не на весь файл, і що авторизація Figma в редакторі жива.

Як це вбудувати в реальний процес

Схема, що працює для дизайнера, який хоче кодити:

Тримайте макет чистим: змінні замість хардкоду, компоненти замість копій. MCP дає рівно стільки, скільки порядку у вашому файлі.
Налаштуйте Code Connect на 5–10 базових компонентів — цього достатньо, щоб більшість генерацій попадали у вашу систему.
Генеруйте покомпонентно, не екранами.
Перевіряйте get_image-прев'ю поруч із живим результатом — око швидко ловить розбіжності.
Доводьте руками стан, логіку й адаптив.

За тиждень такої практики зникає межа між «я намалював» і «я передав у розробку». Ви робите і те, і те — а MCP тримає їх синхронними.

Figma MCP сервер — не магія й не заміна інженера. Це міст, який нарешті прибрав ручне перенесення дизайну в код. Дизайнер, що вміє ним користуватись, у 2026 закриває задачу, на яку раніше йшли двоє. Саме сюди рухається професія.