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. Функция записи на холст со временем станет платной функцией на основе использования, но в настоящее время доступна бесплатно в течение бета-периода.

• Генерация изображений-заглушек: Когда исходные, захваченные или библиотечные изображения недоступны, агенты могут использовать generate_image после запроса разрешения и раскрытия информации об использовании Figma AI кредитов. Сгенерированные изображения загружаются с помощью upload_assets и применяются к дизайну.

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

  Выберите фрейм 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, а также Agent Skills для распространенных рабочих процессов.

Установите плагин, введя следующую команду в чате агента 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, а также Agent Skills для распространенных рабочих процессов.

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

claude plugin install figma@claude-plugins-official

Узнайте больше о Claude Code Plugins и Agent Skills от 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)
• Используйте Auto layout для передачи адаптивного намерения.

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

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

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

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

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

Примеры:

• "Сгенерируй код SwiftUI для iOS из этого фрейма"
• "Используй 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 для отображения любых иконок, содержащихся в этом репозитории.