# implement-from-figma

Команда переносит фреймы и компоненты из макетов Figma прямо в код проекта. Она скачивает графику и сверяет вёрстку с дизайном.

- команда · `type=command` · Codex, ChatGPT · ★ 7604
- Автор: Figma · официальный репозиторий OpenAI
- Лицензия: LicenseRef-Figma-Developer-Terms · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/openai/plugins/tree/HEAD/plugins/figma/commands/implement-from-figma.md
- Обновлён: 2026-10-08
- HTML: https://affpapa.org/nevibecode/commands/implement-from-figma

## Что делает

Команда разбирает ссылку на макет, извлекая идентификатор узла `node-id`. Если ссылка не передана, скрипт попытается взять активный элемент через MCP-сервер `figma-desktop`. Затем через вызовы `get_design_context` и `get_screenshot` агент собирает контекст дизайна и снимок экрана.

Графика скачивается напрямую из MCP без подмены иконочными пакетами или заглушками. Это снижает риск расхождений с дизайном. Агент пишет код с учётом существующих компонентов репозитория, проверяет результат локально и составляет список отличий.

Для масштабной переработки интерфейса или правок сразу в нескольких файлах команда передаёт задачу субагенту `figma-implementation-agent`.

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

## Установка

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

**Вручную: положить файлы**
- Файл: `~/.codex/prompts/implement-from-figma.md` — Вызов — /prompts:implement-from-figma. В Codex этот формат помечен устаревшим, замена — скиллы

### Claude Code

**Вручную: положить файлы**
- Файл: `.claude/commands/implement-from-figma.md` — Вызов — /implement-from-figma. Для всех проектов — ~/.claude/commands/

### GitHub Copilot

**Вручную: положить файлы**
- Файл: `.github/prompts/implement-from-figma.prompt.md`

### Gemini CLI

**Вручную: положить файлы**
- Файл: `.gemini/commands/implement-from-figma.toml` — Gemini хранит команды в TOML: текст запроса — в поле prompt

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/openai/plugins/tree/HEAD/plugins/figma/commands/implement-from-figma.md

## Когда брать
- перенести компонент или экран из макета Figma в кодовую базу
- выгрузить оригинальные графические ассеты через MCP без моков
- проверить соответствие вёрстки дизайну и составить список расхождений
- делегировать масштабную вёрстку субагенту figma-implementation-agent

## Примеры запросов агенту
- /implement-from-figma <figma_url> target="src/components/Header.tsx" mode="component"
- Сверстай экран профиля по ссылке <figma_url> в режиме screen
- /implement-from-figma target="src/Button.tsx"

## Похожие
- [figma-implement-design](https://affpapa.org/nevibecode/skills/openai-figma-implement-design.md) — скилл · 6700 установок
- [Figma-Context-MCP](https://affpapa.org/nevibecode/mcp/figma-context-mcp.md) — MCP-сервер · ★ 16073
- [figma-create-design-system-rules](https://affpapa.org/nevibecode/skills/figma-create-design-system-rules.md) — скилл · 2900 установок
- [figma](https://affpapa.org/nevibecode/skills/figma.md) — скилл · 858 установок
- [figma-integration](https://affpapa.org/nevibecode/skills/figma-integration.md) — скилл · 718 установок
- [figma-build](https://affpapa.org/nevibecode/skills/figma-build.md) — скилл · 1300 установок

Из того же набора: [openai/plugins](https://affpapa.org/nevibecode/by/openai/plugins.md) — 420 карточек

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