Figma Canvas (AI agent canvas)

Что такое Figma Canvas?

Figma Canvas, как описано в этом посте в блоге Figma, — это рабочий процесс холста Figma, открытый для AI-агентов, чтобы они могли проектировать прямо внутри файлов Figma. Основная цель — позволить агентам создавать и обновлять дизайн-ассеты, используя тот же контекст дизайна, который команды поддерживают в Figma, — такой как дизайн-система, компоненты, переменные и командные соглашения.

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

Ключевые возможности

• AI-агенты могут писать прямо в файлы Figma на холсте, чтобы генерируемая работа создавалась или изменялась в том же месте, где команды итерируют дизайны.
• Бета-версия сервера Figma MCP, которая интегрирует Figma в рабочий процесс разработчиков/LLM для поддержки генерации кода на основе дизайна и операций с дизайн-ассетами.
• Инструмент use_figma для операций на холсте, позволяющий клиентам MCP (включая Claude Code и Codex, упомянутые в посте) генерировать и изменять дизайн-ассеты, привязанные к дизайн-системе.
• Общий контекст между кодом и холстом, чтобы агенты могли плавно переходить между обновлением UI на основе кода и доработкой дизайнов в Figma.
• Навыки для руководства поведением агента с помощью markdown-инструкций, где навыки определяют шаги рабочего процесса, последовательность и соглашения, которым агенты должны следовать в Figma.

Как использовать Figma Canvas

1. Используйте клиент MCP, поддерживающий сервер Figma MCP (пост упоминает инструменты вроде Claude Code и Codex) для доступа к возможностям Figma через MCP.
2. Используйте инструмент use_figma, чтобы направить агента создавать или обновлять компоненты и другие дизайн-ассеты внутри Figma, используя контекст вашей дизайн-системы.
3. Добавьте руководство через навыки, предоставляя markdown-инструкции, которым агент может следовать для выполнения задач в Figma (включая базовый навык /figma-use, упомянутый в посте).
4. Опционально синхронизируйте из живых UI с помощью generate_figma_design, начиная с HTML/кода, затем перейдите к use_figma для редактирования этих дизайнов с существующими компонентами и переменными.

Сценарии использования

• Преобразовать кодовую базу в начальные компоненты Figma: Используйте навык вроде /figma-generate-library для создания новых компонентов в Figma из кодовой базы.
• Генерировать новые экраны с использованием существующих компонентов и переменных: Используйте /figma-generate-design, чтобы агент строил дизайны в Figma, опираясь на компоненты/переменные вместо свободной верстки.
• Применять спецификации доступности из описаний UI: Используйте create-voice для генерации спецификаций экранных ридеров (VoiceOver, TalkBack, ARIA) из спецификаций UI.
• Обеспечивать соглашения по отступам с помощью правил, осведомлённых о системе: Используйте rad-spacing для применения иерархических паттернов отступов в Figma.
• Подключать или переназначать существующие дизайны к системным компонентам: Используйте apply-design-system для выравнивания дизайнов по системным компонентам вместо оставления их как несвязанных слоёв.

FAQ

Это платная функция?

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

Какие инструменты позволяют агентам работать в Figma?

Пост описывает инструмент use_figma для операций агентов на холсте с использованием контекста дизайн-системы. Также упоминается существующий инструмент generate_figma_design для преобразования HTML из живых приложений/сайтов в редактируемые слои Figma.

Что такое «навыки» в этом рабочем процессе?

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

Нужно ли создавать плагин для создания навыков?

Нет. Пост говорит, что любой может создать навык, и для этого не требуется разрабатывать плагин или писать код.

Упомянутые инструменты только для конкретных агентов (например, Claude Code)?

Пост называет Claude Code и Codex как клиентов MCP, которые могут использовать use_figma, и описывает «другие клиенты MCP». Полная матрица совместимости не приведена.

Альтернативы

• Рабочие процессы перевода дизайн-в-код (без прямого редактирования агентами на холсте): Можно генерировать дизайны вне Figma или использовать Figma как целевой просмотрщик только для чтения, а затем вручную воссоздавать ассеты в Figma. Это отличается отсутствием прямых правок агентов, привязанных к вашей дизайн-системе внутри холста.
• Использование существующей автоматизации или плагинов только в Figma: Если нужны согласованные компоненты и переменные без AI-агентов, можно полагаться на плагины Figma или подходы на основе шаблонов. Это обменивает автономию агентов на более детерминированное поведение.
• Рабочие процессы агентов, генерирующие артефакты дизайна вне Figma: Некоторые цепочки LLM могут выводить файлы дизайна или спецификации для реализации дизайнером. По сравнению с описанным здесь подходом, агенты не будут напрямую изменять те же компоненты/переменные Figma через use_figma.
• Только перевод HTML-в-Figma: Если фокус на импорте существующих UI в Figma (через возможности типа generate_figma_design) без цикла редактирования на холсте агента, это снижает сложность, но может потребовать больше ручных доработок для согласования с дизайн-системой.