Figma MCP обновился — разбираемся что появилось и с чего начать.
Раньше с помощью Figma MCP агент мог «смотреть» на макет и точнее писать код. Теперь встречаем новый инструмент —use_figma, который дает агентам прямой доступ к холсту, к самому файлу Figma. Claude Code, Cursor, Codex, Copilot — все они теперь могут создавать и редактировать дизайн прямо в файле. Они могут не только видеть дизайн, но и менять экраны, менять блоки интерфейса, менять макеты по вашим правилам дизайна и работать через вашу библиотеку компонентов.
Ключевое новшество это все же не инструмент, а пачка новых skills. Это инструкции, которые объясняют агенту правила работы с вашей дизайн‑системой и объясняют агенту, какие шаги делать, как использовать дизайн‑систему, чтобы не сломать структуру макета. Пять штук, кратко по очереди:
figma-use
Базовый skill. Нужен для любых действий на холсте. Ставим первым - без него остальные не имеют смысла.
figma-create-design-system-rules
Сохраняет правила команды: как дизайн переводится в код, какие токены используются, какие паттерны. Начинаем именно отсюда, если у вас есть дизайн-система.
figma-implement-design
Готовый макет → рабочий код в вашем проекте. Полезен когда дизайн доделан и нужно автоматически перевести в код.
figma-generate-design
Агент собирает экраны из ваших компонентов, переменных и стилей. Нужно, чтобы он не галлюцинировал фантазировал, а работал с тем что задано в системе. Требует настроенного figma-create-design-system-rules.
figma-generate-library
Строит или обновляет библиотеку/дизайн-систему Figma из кодовой базы.
Порядок подключения:
MCP-сервер Figma на GitHub → установить
Подключить к агенту (Claude Code / Cursor / Copilot)
Начать с
figma-useОписать правила системы через
figma-create-design-system-rulesПопробовать
figma-generate-designна тестовом экране
Пока бета это бесплатно, нужно успеть попробовать, позже станет платным.
Есть гайд по настройке, skills лежат тут.
Надеюсь тебе понравилось. Лучшая благодарность — это твоя подписка на мой Telegram-канал 😊
