figma-code-workflows
Import or upload local HTML or project files into Figma, choose editable Design frames, runnable Code Layers or standalone Code (also known as Make), and repair imported previews. Use only when the user explicitly names editable Design layers, a runnable Code Layer, or a standalone Code/Make file, or supplies a Figma file key/link as the import destination. Generic code or code-component requests need output clarification before using this workflow.
- Installs
- 180
- Last 24h
- +11
- Trending rank
- #8430
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/figma/mcp-server-guide --skill figma-code-workflows- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads figma-code-workflows automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Import a project into Figma
Only use this workflow for an explicitly requested Figma output (standalone Code/Make, runnable Code Layer, or editable Design layers), or a Figma file key/link given as its destination. Generic “make a code project” or “create a code component” requests, and Figma Code/Make names alone, do not specify that output. If output intent is unclear, ask whether the user wants local code or a Figma output, then wait before starting this workflow.
Preserve the user's project. Use each tool's current description and schema for prerequisites and parameters.
Keep the user updated at the main stages: preparing and validating the project, uploading the archive, and completing the import in Figma. Report pending imports, recovery work and blockers as they occur; do not describe an unconfirmed stage as complete.
1. Choose the output and destination
Identify the user's intended output, then load the appropriate skill according to the table below. If the output is unclear, ask the user before proceeding.
| Input | User's requested output | Next action |
|---|---|---|
| Running app or static HTML | Unspecified — just put/import it in Figma | Ask "Editable design layers or a code layer?" and end your turn. Wait for the answer. |
| Running app | Editable Design layers | Load figma-generate-design, then call generate_figma_design in a Design file. |
| Static HTML | Editable Design layers | Call html_to_figma in a Design file. |
| Running app | Runnable Code Layer or standalone Code/Make | Continue with this skill and call send_code_to_figma. |
| Static HTML | Runnable Code Layer or standalone Code/Make | Continue with this skill and call send_code_to_figma. |
An HTML project with working buttons is still ambiguous when the user has not chosen the output. A Design link only chooses the destination, not the output.
Before choosing a runnable destination, call whoami. Only choose or import a Design Code Layer when whoami.code_layers_enabled is true; otherwise use standalone Code/Make, or explain the limitation and ask before changing an explicitly supplied Design destination.
Honor an explicit code-layer or standalone request before applying the screen-count heuristic. For runnable code with a Design link, use a Code Layer. For a standalone Code link, use standalone. With no destination or explicit code-layer/standalone choice, estimate screens: fewer than 10 or unknown → Code Layer; 10 or more → standalone. Never ask Code Layer versus standalone or ask the user to count screens. Explicit destinations and links take precedence after the output choice.
Use the supplied file URL. If a new file is needed, use create_new_file with the selected destination type and the user's chosen plan.
Create a Design file for a requested code layer when no destination is provided.
Keep the confirmed output choice fixed; do not ask the user to choose again after creating the file.
For editable Design layers, follow the selected tool's instructions: generate_figma_design captures the running app's rendered page; html_to_figma converts a self-contained static HTML document. Inspect the resulting layers and share the Design link. Continue below only for runnable code output.
2. Follow the import response
Call send_code_to_figma with the selected local source and destination using its current schema. Follow the returned preparation and archive instructions; preserve the app and validate locally before uploading when instructed.
Follow each response's instructions and returned nextStep exactly for preparation, validation, upload, pending imports and setup recovery. Complete the returned prerequisites before advancing and pass complete continuation arguments unchanged. Do not invent a missing recovery step. When no nextStep is present, follow the response's instructions and the tool's current description.
Finish with the returned file/layer link and report only the import and preview outcomes established by the result.
FAQ
What does the figma-code-workflows skill do?
Import or upload local HTML or project files into Figma, choose editable Design frames, runnable Code Layers or standalone Code (also known as Make), and repair imported previews. Use only when the user explicitly names editable Design layers, a runnable Code Layer, or a standalone Code/Make file, or supplies a Figma file key/link as the import destination. Generic code or code-component requests need output clarification before using this workflow.
How do I install figma-code-workflows?
Run npx skills add https://github.com/figma/mcp-server-guide --skill figma-code-workflows in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/figma-code-workflows/ (personal) or .claude/skills/figma-code-workflows/ (project).
Which AI agents can use figma-code-workflows?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is figma-code-workflows safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains figma-code-workflows?
It is published by figma in figma/mcp-server-guide. It has 180 recorded installs.
More from figma/mcp-server-guide
figma-use
figma/mcp-server-guide
MANDATORY prerequisite — you MUST invoke this skill BEFORE every usefigma tool call. NEVER call usefigma directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.
figma-generate-design
figma/mcp-server-guide
Use 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, dialog, drawer, sidebar, panel, form, dashboard, list, table, card, header, message preview, or other composed product UI in Figma from code or a description—even when the user calls that composed UI a component. Discovers design system components, variables, and styles from Code Connect files, existing screens, and library search, then imports them and assembles views incrementally section-by-section using design system tokens instead of hardcoded values.
implement-design
figma/mcp-server-guide
Translates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions "implement design", "generate code", "implement component", "build Figma design", provides Figma URLs, or asks to build components matching Figma specs. Requires Figma MCP server connection.
figma-generate-library
figma/mcp-server-guide
Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, create individual components with proper variant sets and variable bindings, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. Also use when the user asks to create or generate any component in Figma — even a single one — since components require proper variable foundations, variant states, and design token bindings to be production-quality. This skill teaches WHAT to build and in WHAT ORDER — it complements the figma-use skill which teaches HOW to call the Plugin API. Both skills should be loaded together.
figma-implement-design
figma/mcp-server-guide
Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via usefigma, use figma-use.
figma-create-new-file
figma/mcp-server-guide
Always use this skill when the user wants to create a new Figma Design, FigJam, or Slides file. You MUST invoke this skill BEFORE every createnewfile tool call.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.