Figma MCP
AI читает ваш дизайн в Figma и превращает его в код — для веба, iOS и Android
Что это
AI-инструменты (Claude, Cursor и другие) умеют подключаться к Figma и читать ваши макеты — структуру слоёв, стили, компоненты. На основе дизайна AI генерирует готовый код для нужной платформы: веб (React, HTML/CSS), iOS (SwiftUI) или Android (Compose).
Схема простая:
Figma-макет → AI читает дизайн → Генерирует кодКак это выглядит на практике
- Открываете макет в Figma
- Копируете ссылку на нужный фрейм
- Вставляете ссылку в AI-чат и пишете, что хотите получить
- AI анализирует макет и выдаёт готовый код
Настройка
Шаг 1. Подключите Figma к AI-инструменту
1. Откройте Settings в Codex
2. Перейдите в раздел MCP Servers
3. Найдите Figma и нажмите Install
4. Пройдите авторизацию — после этого подключение будет активно
Шаг 2. Включите MCP Server в Figma
- Откройте файл в Figma
- Переключитесь в Dev Mode (режим разработчика)
- В правой панели инструментов найдите и включите MCP Server
Как пользоваться
Копирование ссылки на макет
- Откройте макет в Figma
- Выделите нужный фрейм или компонент
- Правый клик → Copy link (или
Cmd + L/Ctrl + L)
Ссылка будет выглядеть примерно так:
https://www.figma.com/design/XXXXX/Название?node-id=123-456Примеры запросов
Создать экран для iOS
Вот макет мобильного экрана: [вставьте ссылку]
Создай SwiftUI View для этого экрана.Создать экран для Android
Макет экрана: [вставьте ссылку]
Напиши этот экран на Jetpack Compose с Material 3.Достать стили из дизайн-системы
Посмотри дизайн-систему в файле: [вставьте ссылку]
Извлеки цвета, шрифты и отступы.
Оформи как CSS-переменные.Советы
- Выделяйте конкретный фрейм, а не весь файл — так AI получит точные данные
- Указывайте платформу — React, SwiftUI, Compose и т.д.
- Сложные макеты разбивайте на экраны — сначала один, потом следующий
- Проверяйте результат — AI может не уловить все нюансы, особенно анимации
- Dev Mode (платная Figma) — даёт AI ещё более точные данные о стилях
Что AI видит в вашем макете
| Что AI считывает | Примеры |
|---|---|
| Структура слоёв | Фреймы, группы, компоненты и их вложенность |
| Размеры | Ширина, высота, позиция каждого элемента |
| Цвета | Заливки, обводки — HEX, RGB, градиенты |
| Типографика | Шрифт, размер, жирность, межстрочный интервал |
| Отступы | Padding, gap (из Auto Layout) |
| Компоненты | Имена, варианты и свойства |
Что AI пока не умеет
- Анимации — AI не видит прототипные связи и переходы в Figma
- Hover-эффекты — их нужно описывать словами
- Сложные иллюстрации — могут упроститься при конвертации
- Pixel-perfect — возможны расхождения в несколько пикселей
Полезные ссылки
- Figma Dev Mode — режим разработчика в Figma
- Figma API — документация Figma API
- MCP Protocol — спецификация протокола
- figma-developer-mcp — MCP-сервер для Figma