Перейти к содержимому

Figma Dev Mode расширяет интеграцию с GitHub Copilot для генерации компонентов UI

Figma обновила MCP сервер, который даёт агентам вроде GitHub Copilot доступ к точным данным из файлов дизайна для автоматизации генерации компонентов.

Рейтинг 4.9 7 оценок
Рабочее место разработчика с экраном Figma Dev Mode и интеграцией GitHub Copilot

Figma Dev Mode получил обновления MCP сервера, которые позволяют GitHub Copilot и другим агентам напрямую читать структурированные данные из файлов дизайна. Обновления анонсировали 15 октября 2026 года на конференции Config India. Интеграция использует протокол Model Context Protocol и не требует скриншотов или ручного экспорта.

Теперь разработчики могут копировать ссылку на слой или фрейм в Figma и вставлять её в чат GitHub Copilot в VS Code. Агент вызывает инструменты MCP, получает точные значения переменных, авто-лейаута, токенов и компонентов, а затем формирует код на React или других фреймворках. Поддерживается двусторонняя связь: агент может записывать обратно правки на холст Figma.

Figma Dev Mode и механизм работы MCP сервера

Удалённый MCP сервер размещён по адресу mcp.figma.com/mcp и доступен на всех тарифах Figma. Он отдаёт данные о компонентах, переменных и измерениях напрямую клиентам. Для работы с GitHub Copilot требуется подписка на Copilot и VS Code. Локальный сервер на компьютере доступен только владельцам платных мест Dev или Full.

Функция Code Connect связывает компоненты Figma с реальными файлами в репозитории GitHub. После авторизации репозитория агент предпочитает существующие production-компоненты вместо генерации новых. Это снижает расхождения между дизайном и кодом. Интерфейс Code Connect находится внутри Dev Mode и поддерживает прямую авторизацию через GitHub.

На Config India компания сообщила о повышении производительности MCP, добавлении новых партнёров и улучшении совместной работы Code Connect с MCP. Также открыли бету Code Layers и Specs. Эти изменения касаются всех пользователей, которые используют Dev Mode для передачи дизайна в разработку.

Практическое применение и доступность обновления

Типичный сценарий выглядит так: дизайнер выбирает фрейм, копирует ссылку и передаёт её разработчику. Разработчик вставляет ссылку в Copilot Agent mode, и агент получает полный контекст дизайна. Генерация кода учитывает систему дизайна компании и уже существующие компоненты в кодовой базе. Время на согласование уменьшается, поскольку данные берутся напрямую из файла Figma.

Интерфейс Figma Dev Mode и генерация кода компонентов через Copilot
Figma Dev Mode передает контекст макета напрямую в Copilot для точной генерации UI.

Функция работает с VS Code, Cursor и Claude Code. Полный список совместимых клиентов опубликован в каталоге MCP на сайте Figma. Для российских пользователей ограничений по доступу не объявлено, но требуется соблюдение общих правил аккаунта Figma. Документация на английском и японском языках уже обновлена, русскоязычные блоги TECHSCORE и JBS опубликовали инструкции по настройке.

В ближайшие месяцы Figma планирует добавить больше клиентов MCP и расширить возможности Code Connect для крупных дизайн-систем. Платные функции для продвинутых сценариев могут появиться позже, сейчас большинство возможностей MCP доступны в бете бесплатно.

Частые вопросы

Как подключить GitHub Copilot к Figma Dev Mode?

Нужно настроить удалённый MCP сервер по адресу mcp.figma.com/mcp в VS Code и вставить ссылку на слой из Figma в чат Copilot. Для этого требуется подписка на GitHub Copilot и доступ к файлу в Figma.

Какие данные передаёт MCP сервер агентам?

Сервер отдаёт переменные, компоненты, авто-лейаут, токены и точные измерения. Агент получает структурированные данные без скриншотов и может генерировать код, соответствующий дизайн-системе.

Нужна ли подписка на Figma для использования интеграции?

Удалённый сервер доступен на всех планах. Локальный сервер требует платного места Dev или Full. Функции Code Connect работают после авторизации репозитория GitHub.

Поддерживает ли интеграция запись изменений обратно в Figma?

Да, MCP позволяет агентам создавать и редактировать слои на холсте. Эта возможность доступна через удалённый сервер и требует соответствующего разрешения в настройках файла.

Комментарии

Комментариев пока нет. Будьте первым!

Оставить комментарий