Реализация дизайнов из Figma в production-ready код с pixel-perfect точностью. Use when: implement design, реализовать дизайн из Figma, Figma URL, build component from Figma.
Структурированный workflow для перевода Figma дизайнов в production-ready код.
Если MCP не подключён — помочь пользователю:
{
"mcp": {
"Figma Desktop": {
"type": "remote",
"url": "http://127.0.0.1:3845/mcp"
}
}
}
Из URL: https://figma.com/design/:fileKey/:fileName?node-id=1-2
/design/node-id параметраИз Figma Desktop: автоматически из выбранного элемента.
get_design_context(fileKey=":fileKey", nodeId="1-2")
Данные: layout, typography, colors, design tokens, компоненты, spacing.
Если ответ слишком большой:
get_metadata(fileKey, nodeId) — карта узловget_design_context для каждого дочернего узла.get_screenshot(fileKey=":fileKey", nodeId="1-2")
Ключевые принципы:
Чеклист:
src/components/ui/ или доменную папку