Figma Design To Code

figma/mcp-server-guide/skills-figquery/figma-design-to-code

Figma· v1.0.0

ai-mlResmi

Resmi Sağlayıcı Skill'iView repo

**MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'design to code'. This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code and must N

Dosyalar1 dosya

SKILL.md29 satır

Loading editor…

Kurulum

Önerilen

Tek komut — ajanınız otomatik olarak devreye alır.

AI aracını seç

Kurulum komutunu görmek için yukarıdan bir AI aracı seçin.

veya

Manuel Kurulum

Daha fazla adım

Dosyayı indirin ve ajanınızın sistem istemine yapıştırın.

Skill detayları

Versiyonv1.0.0

YazarFigma

Kategoriai-ml

Skill IDfigma/mcp-server-guide/skills-figquery/figma-design-to-code

İlgili skill'ler

Figma Code ConnectCreates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files.Figma Code ConnectCreates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files.Figma Create New FileAlways use this skill when the user wants to create a new Figma Design, FigJam, or Slides file. You MUST invoke this skill BEFORE every `create_new_file` tool call.Figma Create New FileAlways use this skill when the user wants to create a new Figma Design, FigJam, or Slides file. You MUST invoke this skill BEFORE every `create_new_file` tool call.Figma Design To Code**MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'design to code'. This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code and must N Figma Generate DesignUse this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code', 'convert this modal/dialog/drawer/panel to Figma'. This is the preferred workflow skill whenever the user wants to build or update a full page, modal,