Новый Figma MCP-сервер: как настроить AI-агента для автоматической сборки дизайна по вашей системе

Почему именно сейчас? Потому что MCP стал стандартом

Март 2026 стал точкой кипения для MCP (Model Context Protocol). После того как llama.cpp официально встроил поддержку MCP в свои релизы, а Anthropic, OpenAI и Google добавили нативные клиенты, любой AI-агент теперь может работать с Figma на уровне API. Но с одной оговоркой — нужно правильно его настроить.

Что может сломаться при автоматизации дизайна

Представьте, что вы дали AI доступ к Figma и сказали: "Сделай дашборд для аналитики". Без правильных ограничений он:

• Создаст 50 новых цветовых стилей с названиями вроде "color_#FF5733"
• Размножит компоненты с отступом в 0.5 пикселя
• Использует шрифт Comic Sans, потому что он был последним в списке
• Удалить основную библиотеку компонентов, посчитав её мусором

Поэтому настройка — это не просто "включи и работай". Это создание жёстких рамок, в которых AI будет творческим, но не разрушительным.

Собираем связку: AI-агент + Figma MCP

Вам нужны три компонента:

1. Figma MCP-сервер v3.0+ — тот самый инструмент с read/write доступом. Обновите до последней версии, старые версии не умеют создавать объекты.
2. AI-агент с поддержкой MCP — Claude 3.7 Sonnet, GPT-4.5 Turbo или локальная модель через LM Studio. Локальные модели сейчас догнали по качеству кодогенерации, подробности в статье про "Архитектуру AI-фабрики".
3. Дизайн-система в Figma — готовая библиотека компонентов, цветов, типографики. Если её нет, AI будет творить хаос.

1 Установка и аутентификация

Сначала устанавливаем Figma MCP-сервер. Он написан на TypeScript и требует Node.js 20+.

npm install -g @figma/mcp-server
# Или через yarn
yarn global add @figma/mcp-server

Теперь аутентификация. Figma MCP использует Personal Access Token (PAT). Получить его можно в настройках Figma → Account settings → Personal access tokens. Дайте токену права: file:read, file:write, library:read.

export FIGMA_ACCESS_TOKEN="your_token_here"
# Проверяем подключение
mcp-figma list-files

2 Конфигурация MCP-сервера

Создаём конфигурационный файл figma-mcp-config.json. Здесь мы ограничиваем доступ AI к определённым файлам и операциям.

{
  "server": "@figma/mcp-server",
  "options": {
    "accessToken": "${FIGMA_ACCESS_TOKEN}",
    "allowedFileIds": [
      "DESIGN_SYSTEM_FILE_ID",
      "PROJECT_TEMPLATE_FILE_ID"
    ],
    "readOnly": false,
    "maxOperationsPerMinute": 30,
    "componentLibraryMode": "read_only",
    "styleLibraryMode": "read_only",
    "autoVersioning": true
  }
}

Ключевые настройки:

• allowedFileIds — белый список файлов, которые можно редактировать. AI не сможет даже увидеть другие файлы.
• componentLibraryMode — ставим read_only, чтобы AI не мог ломать библиотеку компонентов.
• maxOperationsPerMinute — лимит на количество операций в минуту. Без этого AI может заспамить API и получить бан.
• autoVersioning — автоматически создаёт версии файла перед каждым изменением. Спасает от необратимых ошибок.

3 Подключение к AI-агенту

Теперь нужно сказать вашему AI-агенту о существовании Figma MCP. Конфигурация зависит от клиента:

Для Claude Desktop редактируем ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["@figma/mcp-server"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your_token_here"
      }
    }
  }
}

Для LM Studio или локальных моделей настройка сложнее, но подробно описана в статье "LM Studio MCP". Если коротко — нужно добавить сервер в список MCP в настройках LM Studio.

Для Cline, Windsurf или других AI-редакторов — аналогично, через конфигурационные файлы.

4 Создание промпт-инструкций для агента

Теперь самая важная часть. AI-агент не знает вашу дизайн-систему. Ему нужно объяснить правила. Создайте файл figma_instructions.md и дайте его агенту как контекст.

# Инструкция по работе с Figma для AI-агента

## ДИЗАЙН-СИСТЕМА COMPANY 2026

### Цвета (использовать ТОЛЬКО эти)
- primary: #3B82F6 (синий для кнопок и акцентов)
- secondary: #10B981 (зелёный для успешных действий)
- background: #FFFFFF (белый фон)
- text: #1F2937 (основной текст)

### Типографика
- Заголовки: Inter, Bold, 24px, line height 32px
- Основной текст: Inter, Regular, 16px, line height 24px
- Кнопки: Inter, Medium, 14px

### Компоненты (брать из библиотеки "Company UI Kit")
- Кнопки: primary_button, secondary_button, ghost_button
- Карточки: card_default, card_with_image
- Формы: text_input, dropdown, checkbox

## ПРАВИЛА
1. НЕ создавать новые цвета или шрифты. Использовать только из дизайн-системы.
2. Все отступы должны быть кратны 8px (8, 16, 24, 32, 40, 48).
3. При создании нового фрейма сразу задавать ему название на английском.
4. Все элементы группировать в Frame, а не оставлять разбросанными.
5. Если нужен новый компонент — сначала проверить библиотеку, возможно он уже есть.
6. После изменений создать версию файла с комментарием.

## ДОСТУПНЫЕ ОПЕРАЦИИ ЧЕРЕЗ MCP
- create_frame(width, height, name) — создать фрейм
- create_rectangle(width, height, x, y) — создать прямоугольник
- apply_style(nodeId, styleType, styleName) — применить стиль
- create_instance(componentKey) — создать инстанс компонента
- set_position(nodeId, x, y) — переместить элемент
- group_nodes(nodeIds, groupName) — сгруппировать элементы

Эту инструкцию нужно передавать агенту с каждым запросом к Figma. Некоторые платформы позволяют закрепить системный промпт — используйте эту возможность.

Рабочий пример: собираем дашборд за 2 минуты

Теперь посмотрим, как это работает на реальной задаче. Допустим, нам нужен дашборд аналитики с тремя карточками статистики, графиком и таблицей.

Промпт для AI-агента:

Используя Figma MCP и дизайн-систему из инструкции, создай дашборд аналитики.

Требования:
1. Размер артборда: 1440x900
2. Вверху заголовок "Analytics Dashboard"
3. Три карточки с метриками: "Total Users", "Revenue", "Conversion"
4. График посещаемости за 7 дней (линейный график, use card_with_image component)
5. Таблица последних транзакций (5 строк)
6. Все элементы должны использовать компоненты из библиотеки.
7. Отступы между элементами — 24px.
8. Назови фрейм "Dashboard_v1".

Агент с правильной инструкцией:

1. Создаст фрейм 1440x900 с названием Dashboard_v1
2. Добавит заголовок используя стиль заголовков из дизайн-системы
3. Возьмёт компонент card_default из библиотеки, создаст три инстанса, подпишет их
4. Для графика использует card_with_image и нарисует внутри условную линию
5. Создаст таблицу используя прямоугольники и текст с отступами 8px
6. Всё аккуратно сгруппирует и выровняет
7. В конце создаст версию файла

Ошибки, которые убьют ваш проект

Продвинутые сценарии: когда это реально полезно

Простые дашборды — это только начало. Где Figma MCP выстреливает по-настоящему:

• Генерация 100+ экранов onboarding по одному шаблону с разным текстом и иконками. Вручную — неделя работы, AI — 15 минут.
• Адаптация дизайна под разные разрешения. Даёте мобильную версию, AI создаёт десктопную, сохраняя компоненты и стили.
• Автоматический редизайн цветовой схемы. "Используй тёмную тему везде, где primary цвет был синим".
• Создание презентаций из дизайн-материалов. AI копирует компоненты из UI Kit и собирает слайды.
• Интеграция с реальными данными. Подключаете Self-Aware MCP Server для доступа к API, и AI может наполнять дизайн реальными данными из вашего бэкенда.

Что дальше? MCP становится операционной системой для агентов

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

Представьте связку: агент берёт задачу из Jira (через Jira MCP), анализирует требования, создаёт дизайн в Figma, потом генерирует код компонента в GitHub, и всё это в одном потоке. Звучит как фантастика, но это уже работает в тестовых средах.

Figma MCP в этой экосистеме — критически важный мост между дизайном и разработкой. Особенно с учётом того, что в 2026 году многие компании перешли на AI-driven разработку, где дизайн-система напрямую конвертируется в код.

Финальный совет: начинайте с песочницы

Не бросайтесь автоматизировать продакшн-дизайны в первый же день. Создайте в Figma отдельную песочницу — файл с копией вашей дизайн-системы и пустыми страницами. Дайте агенту доступ только к этому файлу. Пусть первые 20-30 экспериментов пройдут там, где ничего не сломается.

И запомните главное: AI-агент не заменит дизайнеров в 2026 году. Он заменит рутинную, скучную работу вроде создания 50 однотипных карточек или адаптации макетов под 10 разных разрешений. Освободившееся время дизайнеры потратят на то, что AI не умеет — на креатив, стратегию и человеческое взаимодействие.

Вся информация в статье актуальна на март 2026 года. Figma MCP-сервер v3.0+ с поддержкой read/write доступа официально выпущен 10 марта 2026. Интеграция с Claude 3.7 Sonnet и GPT-4.5 Turbo подтверждена. Для локальных моделей рекомендуется использовать модели с размером контекста не менее 128k токенов для обработки подробных инструкций по дизайн-системе.

Подписаться на канал