# figma

Плагин подключает проекты Figma к ИИ-агентам для извлечения стилей, токенов и вёрстки. Он помогает генерировать код по макетам и связывать компоненты через Code Connect.

- плагин · `type=plugin` · Claude Code, GitHub Copilot · ★ 2113
- Автор: figma
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/figma/mcp-server-guide
- Обновлён: 2026-10-20
- HTML: https://affpapa.org/nevibecode/plugins/figma

## Что делает

Плагин открывает ИИ-ассистентам доступ к макетам через MCP-сервер `https://mcp.figma.com/mcp`. Агент считывает параметры слоёв, дизайн-токены, переменные и разметку Auto Layout. С помощью Code Connect модель подставляет в сгенерированный код реальные компоненты из репозитория проекта. Также инструмент умеет создавать плейсхолдеры через функцию `generate_image`, запрашивая разрешение перед тратой кредитов Figma AI.

У плагина есть жёсткое ограничение для бесплатных аккаунтов. На тарифе Starter и с местами View или Collab действует лимит: не более 6 чтений через инструменты в месяц. Без платного места Dev или Full с тарифом Professional, Organization или Enterprise регулярно верстать макеты не выйдет. Запись на холст пока работает бесплатно в рамках бета-теста, но позже перейдёт на платную модель по объёму использования.

## Требования
- Работает с: Figma

## Установка

### Claude Code (родная платформа)

**Через маркетплейс плагинов**
В чате агента (не в терминале):
```text
/plugin install figma@claude-plugins-official
```
В чате агента (не в терминале):
```text
/plugin marketplace add anthropics/claude-plugins-community
```
В чате агента (не в терминале):
```text
/plugin install figma-test@claude-community
```
В чате агента (не в терминале):
```text
/plugin marketplace add anthropics/claude-plugins-official
```

### GitHub Copilot

**Команда из источника**
```bash
copilot plugin install figma@awesome-copilot
```

## Когда брать
- сгенерировать готовый код по выбранному фрейму
- выгрузить дизайн-токены и переменные макета в проект
- связать компоненты кодовой базы с элементами дизайна через Code Connect
- создать плейсхолдеры для недостающих картинок

## Примеры запросов агенту
- Преврати выбранный фрейм Figma в компонент React
- Вытащи цвета и дизайн-токены из макета в CSS-переменные
- Проверь привязку компонентов через Code Connect для экрана профиля

## Похожие
- [example-skills](https://affpapa.org/nevibecode/plugins/example-skills.md) — плагин · ★ 183839
- [impeccable](https://affpapa.org/nevibecode/plugins/impeccable.md) — плагин · ★ 88212
- [hyperframes](https://affpapa.org/nevibecode/plugins/hyperframes.md) — плагин · ★ 72481
- [playground](https://affpapa.org/nevibecode/plugins/playground.md) — плагин · ★ 44635
- [frontend-design](https://affpapa.org/nevibecode/plugins/frontend-design.md) — плагин · ★ 44635
- [visual-explainer](https://affpapa.org/nevibecode/plugins/visual-explainer.md) — плагин · ★ 10630

## Другие версии с тем же именем
- [figma · openai](https://affpapa.org/nevibecode/plugins/figma-figma.md) — ★ 7596

Из того же набора: [figma/mcp-server-guide](https://affpapa.org/nevibecode/by/figma/mcp-server-guide.md) — 5 карточек

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md