Figma Design To Code
figma/mcp-server-guide/skills-figquery/figma-design-to-codeby figmaf0493295acf5f7cbdebcbcc483c06de814420cb1No license2K starsListed Oct 9, 2026Updated Oct 9, 2026Repository updated 4 days ago
**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 NOT be skipped.
- f0493295acf5f7cbdebcbcc483c06de814420cb1Currentcommit f049329Published Oct 9, 2026
Source and attribution
Source:figma/mcp-server-guideinskills-figquery/figma-design-to-codeat commitf049329
License: No license
Content belongs to its original authors. SourceWeft indexes it from a public repository.
More from figma/mcp-server-guide
Figma Code Connect
figma
Creates and maintains Figma Code Connect .figma.ts template files that map Figma components to code snippets.
Figma Create New File
figma
Guides creating a new Figma Design, FigJam, or Slides file through the create_new_file MCP tool.
Figma Shaders
figma
Guides authoring and updating Figma shader effects and fills through the Figma MCP server.
Figma Generative Plugins
figma
Guides authoring and updating reusable generative Figma plugins through the create and update plugin tools.
Figma Design To Code
figma
Guides an agent through implementing Figma designs as code using Figma MCP design context and screenshots.
Figma Create New File
figma
Guides creating a new Figma Design, FigJam, or Slides file through the create_new_file MCP tool.
More in Software Development
Playground
anthropics
Builds self-contained interactive HTML playgrounds with controls, live preview, and copyable prompt output.
M5 Onboard
anthropics
Provisions M5Stack ESP32 boards by detecting them on USB, flashing UIFlow 2.0 firmware, and installing a MicroPython app bundle.
Cardputer Buddy
anthropics
Guides iterating on a Cardputer-Adv MicroPython app bundle: adding apps, pushing files over USB-serial, tailing logs, and running REPL commands.
Web Design Guidelines
vercel-labs
Reviews UI code against Web Interface Guidelines fetched from a remote source and reports findings as file:line entries.
Vercel React Native Skills
vercel-labs
React Native and Expo best-practice rules covering list performance, animation, navigation, UI patterns, state, and monorepo setup.
Vercel React Best Practices
vercel-labs
Vercel's React and Next.js performance guidelines, organized as 70 rules for writing, reviewing, and refactoring code.