Figma

Figma MCP Server Guide

Сервер Figma MCP интегрирует Figma непосредственно в ваш рабочий процесс, предоставляя важную информацию о дизайне и контекст для AI-агентов, генерирующих код из файлов дизайна Figma.

[!NOTE] Для инструментов Figma MCP server, которые читают данные из Figma, действуют ограничения частоты запросов. Некоторые инструменты, например те, которые записывают данные в файлы Figma, освобождены от этих ограничений.

Пользователи тарифного плана Starter или с ролями View или Collab на платных планах будут ограничены максимум 6 вызовами инструментов в месяц.

Пользователи с Dev или Full местом на тарифных планах Professional, Organization или Enterprise имеют поминутные ограничения частоты запросов, которые соответствуют ограничениям уровня Tier 1 Figma REST API. Как и в случае с Figma REST API, Figma оставляет за собой право изменять ограничения частоты запросов.

Полный набор документации по Figma MCP server см. в нашей документации для разработчиков. Используя Figma MCP server и связанные ресурсы (включая эти навыки), вы соглашаетесь с Условиями для разработчиков Figma. Эти навыки в настоящее время доступны как бета-функция.

Возможности

• Запись на холст (только удаленный сервер): Создавайте и изменяйте нативный контент Figma непосредственно из вашего MCP-клиента. С помощью соответствующих навыков агенты могут создавать и обновлять фреймы, компоненты, переменные и авто-макет в ваших файлах Figma, используя вашу дизайн-систему как источник истины.

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

• Генерация кода из выбранных фреймов

  Выберите фрейм Figma и превратите его в код. Отлично подходит для продуктовых команд, создающих новые потоки или итерирующих функции приложений.

• Извлечение контекста дизайна

  Импортируйте переменные, компоненты и данные макета непосредственно в вашу IDE. Это особенно полезно для дизайн-систем и рабочих процессов на основе компонентов.

• Более умный код с Code Connect

  Повышайте качество вывода, переиспользуя ваши реальные компоненты. Code Connect обеспечивает согласованность генерируемого кода с вашей кодовой базой.

  Узнайте больше о Code Connect →

• Генерация дизайнов Figma из веб-страниц (постепенно внедряется)

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

Установка и настройка

Подключение к Figma MCP server

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

VS Code

1. Используйте сочетание клавиш ⌘ Shift P, чтобы найти MCP:Add Server.
2. Выберите HTTP.
3. Вставьте URL сервера https://mcp.figma.com/mcp в строку поиска. Затем нажмите Enter.
4. Когда появится запрос на идентификатор сервера, введите figma.
5. Выберите, хотите ли вы добавить этот сервер глобально или только для текущего рабочего пространства. После подтверждения вы увидите конфигурацию, подобную этой, в вашем файле mcp.json:

{
  "servers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

6. Откройте панель чата с помощью ⌥⌘B или ⌃⌘I и переключитесь в режим Agent.
7. При открытом чате введите #get_design_context, чтобы подтвердить, что инструменты Figma MCP server доступны. Если инструменты не отображаются, перезапустите VS Code.

[!NOTE] У вас должен быть включен GitHub Copilot в вашей учетной записи, чтобы использовать MCP в VS Code.

Для получения дополнительной информации см. официальную документацию VS Code.

Cursor

Рекомендуемый способ настройки Figma MCP server в Cursor — установка плагина Figma, который включает настройки MCP server, а также навыки агента для распространенных рабочих процессов.

Установите плагин, введя следующую команду в чате агента Cursor:

/add-plugin figma

Плагин включает:

• Конфигурацию MCP server для Figma MCP server
• Навыки для реализации дизайнов, подключения компонентов через Code Connect и создания правил дизайн-системы
• Правила для правильной обработки ресурсов из Figma MCP server

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

Claude Code

Рекомендуемый способ настройки Figma MCP server в Claude Code — установка плагина Figma, который включает настройки MCP server, а также навыки агента для распространенных рабочих процессов.

Выполните следующую команду, чтобы установить плагин из официального маркетплейса плагинов Anthropic.

claude plugin install figma@claude-plugins-official

Узнайте больше о плагинах Claude Code и навыках агента от Anthropic.

claude mcp add --transport http figma https://mcp.figma.com/mcp

Gemini CLI

Установите расширение Figma для Gemini CLI, выполнив следующую команду:

gemini extensions install https://github.com/figma/mcp-server-guide

После установки авторизуйтесь в Figma, выполнив gemini, а затем выполните следующую команду в CLI:

/mcp auth figma

Чтобы удалить расширение:

gemini extensions uninstall figma

Другие редакторы

Другие редакторы кода и инструменты, поддерживающие Streamable HTTP, также могут подключаться к Figma MCP server.

Если вы используете другой редактор или инструмент, проверьте его документацию, чтобы убедиться, что он поддерживает связь на основе Streamable HTTP. Если да, вы можете вручную добавить Figma MCP server, используя эту конфигурацию:

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

Подсказки для вашего MCP-клиента

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

Чтобы предоставить контекст дизайна Figma вашему AI-клиенту:

1. Скопируйте ссылку на фрейм или слой в Figma.
2. Попросите клиента помочь вам реализовать дизайн по выбранному URL.

[!NOTE] Ваш клиент не сможет перейти по выбранному URL, но он извлечет node-id, который необходим MCP server для определения объекта, информацию о котором нужно вернуть.

Инструменты и навыки

Figma поддерживает список инструментов, предоставляемых Figma MCP server, в документации для разработчиков.

Вы также можете узнать больше о навыках, включенных в плагин Figma для поддерживаемых агентов, в Справочном центре Figma. В зависимости от агента вы также можете увидеть термины connector, extension или power; они включают тот же набор навыков.

Этот репозиторий также содержит автономные навыки рабочих процессов, которые не входят в комплект плагина Figma:

• workflow-skills/video-interaction-mapper: Превращает записи UI в аннотированные раскадровки Figma
• workflow-skills/generate-project-plan: Превращает PRD (плюс необязательная привязка к кодовой базе) в доску планирования проекта FigJam

Рекомендации по MCP

Качество генерируемого кода зависит от нескольких факторов. Некоторые контролируются вами, а некоторые — инструментами, которые вы используете. Вот несколько рекомендаций для чистого и согласованного вывода.

Структурируйте файл Figma для лучшего кода

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

• Используйте компоненты для всего, что переиспользуется (кнопки, карточки, поля ввода и т. д.)
• Связывайте компоненты с вашей кодовой базой через Code Connect. Это лучший способ добиться согласованного переиспользования компонентов в коде. Без этого модель угадывает.
• Используйте переменные для отступов, цвета, радиуса и типографики.
• Называйте слои осмысленно (например, CardContainer, а не Group 5)
• Используйте авто-макет, чтобы передать адаптивное намерение.

[!TIP] Измените размер фрейма в Figma, чтобы проверить, что он ведет себя как ожидается, перед генерацией кода.

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

Пишите эффективные подсказки для управления AI

MCP предоставляет вашему AI-ассистенту структурированные данные Figma, но результат определяет ваша подсказка. Хорошие подсказки могут:

• Согласовывать результат с вашим фреймворком или системой стилей
• Следовать структуре файлов и соглашениям об именовании
• Добавлять код в конкретные пути (например, src/components/ui)
• Добавлять или изменять код в существующих файлах вместо создания новых
• Следовать конкретным системам макета (например, grid, flexbox, absolute)

Примеры:

• "Сгенерируй iOS SwiftUI код из этого фрейма"
• "Используй Chakra UI для этого макета"
• "Используй компоненты src/components/ui"
• "Добавь это в src/components/marketing/PricingCard.tsx"
• "Используй наш компонент макета Stack"

Думайте о подсказках как о брифе для коллеги. Четкое намерение приводит к лучшим результатам.

Запускайте конкретные инструменты при необходимости

MCP поддерживает разные инструменты, и каждый предоставляет вашему AI-ассистенту разный вид структурированного контекста. Иногда ассистент не выбирает нужный автоматически, особенно когда доступно больше инструментов. Если результаты неудовлетворительные, попробуйте быть более явными в подсказке.

• get_design_context предоставляет структурированное представление React + Tailwind вашего выбора в Figma. Это отправная точка, которую ваш AI-ассистент может перевести в любой фреймворк или стиль кода в зависимости от вашей подсказки.
• get_variable_defs извлекает переменные и стили, используемые в вашем выборе (цвет, отступы, типографика и т. д.). Это помогает модели ссылаться на ваши токены непосредственно в генерируемом коде.

Например, если вы получаете сырой код вместо токенов, попробуйте что-то вроде:

• "Получи имена и значения переменных, используемых в этом фрейме."

Добавляйте пользовательские правила

Установите рекомендации на уровне проекта, чтобы поддерживать согласованность вывода — так же, как заметки для онбординга нового разработчика. Это могут быть:

• Предпочтительные примитивы макета
• Организация файлов
• Паттерны именования
• Что не следует хардкодить

Вы можете предоставить это в любом формате, который использует ваш MCP-клиент для файлов инструкций.

Примеры:

Обеспечение стабильно хорошего вывода

## Figma MCP Integration Rules
These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.

### Required flow (do not skip)
1. Run get_design_context first to fetch the structured representation for the exact node(s).
2. If the response is too large or truncated, run get_metadata to get the high‑level node map and then re‑fetch only the required node(s) with get_design_context.
3. Run get_screenshot for a visual reference of the node variant being implemented.
4. Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation.
5. Translate the output (usually React + Tailwind) into this project's conventions, styles and framework.  Reuse the project's color tokens, components, and typography wherever possible.
6. Validate against Figma for 1:1 look and behavior before marking complete.

### Implementation rules
- Treat the Figma MCP output (React + Tailwind) as a representation of design and behavior, not as final code style.
- Replace Tailwind utility classes with the project's preferred utilities/design‑system tokens when applicable.
- Reuse existing components (e.g., buttons, inputs, typography, icon wrappers) instead of duplicating functionality.
- Use the project's color system, typography scale, and spacing tokens consistently.
- Respect existing routing, state management, and data‑fetch patterns already adopted in the repo.
- Strive for 1:1 visual parity with the Figma design. When conflicts arise, prefer design‑system tokens and adjust spacing or sizes minimally to match visuals.
- Validate the final UI against the Figma screenshot for both look and behavior.

Cursor

---
description: Figma MCP server rules
globs:
alwaysApply: true
---
- The Figma MCP server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided

Claude Code

# MCP Servers

## Figma MCP server rules

- The Figma MCP server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided

Общие правила качества

- IMPORTANT: Always use components from `/path_to_your_design_system` when possible
- Prioritize Figma fidelity to match designs exactly
- Avoid hardcoded values, use design tokens from Figma where available
- Follow WCAG requirements for accessibility
- Add component documentation
- Place UI components in `/path_to_your_design_system`; avoid inline styles unless truly necessary

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

Обязательно проверьте документацию вашей IDE или MCP-клиента о том, как структурировать правила, и экспериментируйте, чтобы найти то, что лучше всего подходит для вашей команды. Четкие и согласованные рекомендации часто приводят к лучшему и более переиспользуемому коду с меньшим количеством итераций.

Разбивайте большие выборки

Разбивайте экраны на более мелкие части (например, компоненты или логические блоки) для более быстрых и надежных результатов.

Большие выборки могут замедлять работу инструментов, вызывать ошибки или приводить к неполным ответам, особенно когда контекста слишком много для обработки моделью. Вместо этого:

1. Генерируйте код для меньших секций или отдельных компонентов (например, Card, Header, Sidebar)
2. Если работа кажется медленной или зависшей, уменьшите размер выборки

Это помогает поддерживать контекст управляемым, а результаты — более предсказуемыми, как для вас, так и для модели.

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

Добавление контекста Make вашему агенту

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

С помощью этой интеграции вы можете:

• Получать контекст проекта напрямую из Make (отдельные файлы или весь проект)
• Запрашивать использование существующих компонентов кода вместо создания с нуля
• Расширять прототипы реальными данными, чтобы быстрее валидировать и доводить дизайны до продакшена

Как это работает

[!NOTE] Эта интеграция использует возможность ресурсов MCP, которая позволяет вашему агенту получать контекст напрямую из проектов Make. Она доступна только на клиентах, поддерживающих ресурсы MCP.

Шаги для получения ресурсов из Make

1. Попросите вашего агента получить контекст, предоставив действующую ссылку Make
2. Получите список доступных файлов из вашего проекта Make
3. Скачайте нужные файлы, когда будет предложено

Пример рабочего процесса

Цель: Реализовать компонент всплывающего окна в вашей продакшен-кодовой базе, соответствующий дизайну и поведению, заданным в Make.

1. Поделитесь ссылкой на ваш проект Make с агентом.
2. Дайте агенту запрос: "Я хочу получить поведение и стили компонента всплывающего окна из этого файла Make и реализовать его с помощью моего компонента всплывающего окна."

Ваш агент получит соответствующий контекст из Make и поможет вам расширить существующий компонент всплывающего окна функциональностью и стилями прототипа.

Рекомендации по иконкам

См. Руководство по использованию бренда Figma для отображения любых иконок, содержащихся в этом репозитории.