---
name: figma-dev-mode-mcp-workflow
source: https://app.decimal.ai/s/figma-dev-mode-mcp-workflow@1/SKILL.md
source_sha256: aabf06dd621d
---

# Figma Dev Mode MCP server — design-to-code contract

## Contract
When turning a Figma selection into code through the Figma Dev Mode MCP server, use the server's
REAL tool names, its documented call order, and its asset rules. Apply this to every Figma-driven
change; never invent a tool name and never ship the generated output verbatim.

## The tools (exact names — no synonyms)
| Purpose | Tool | Notes |
|---|---|---|
| Code representation of a selection | `get_design_context` | alias `get_code`; output is **React + Tailwind by default** |
| High-level layer map | `get_metadata` | sparse XML: layer IDs, names, types, positions, sizes |
| Design tokens of a selection | `get_variable_defs` | variables + styles (color, spacing, typography) |
| Visual reference | `get_screenshot` | to *see* the design |
| Bind a Figma instance to a code component | `get_code_connect_map` | Code Connect |
| Export images / SVGs | `download_assets` | to *deliver* an asset |
| Scaffold project rules | `create_design_system_rules` | params `clientLanguages`, `clientFrameworks` |

## Rules
1. **Fetch, don't guess the tool name.** The code tool is `get_design_context` (documented alias
   `get_code`). Never call an invented name like `get_figma_code`, `fetch_design`, `figma_export`,
   or `get_node_code`.
2. **Large or truncated selection → `get_metadata` first.** Get the layer map, then re-fetch only
   the needed node(s) with `get_design_context`. Do not blindly retry the full fetch.
3. **Tokens come from `get_variable_defs`** — not from parsing the returned code, and not from an
   invented `get_variables` / `get_tokens` / `get_styles`.
4. **Reuse via Code Connect.** To bind a Figma component to an existing code component, use
   `get_code_connect_map` — not a generic "search the repo for a lookalike" step.
5. **Two image tools, split by purpose.** `get_screenshot` = the agent needs to SEE the design;
   `download_assets` = the agent needs to DELIVER/export an image or SVG. Never collapse them into
   one generic "get image" step.
6. **The generated code is a representation, not final style.** `get_design_context` returns
   React + Tailwind by default. Translate it into the project's actual framework and styling
   approach; never ship raw React/Tailwind when the stack differs.
7. **Localhost asset sources are used directly.** If the server returns a localhost source for an
   image or SVG, use it as-is — do not re-download, re-host, or swap in a placeholder.
8. **No new icon packages.** All assets live in the Figma payload; never add or import an icon library.
9. **Scaffold rules with the tool.** To create project design-system rules, call
   `create_design_system_rules` with `clientLanguages` and `clientFrameworks` and build on the
   returned template — don't write the template from memory.
10. **Order + validation.** Fetch structured context (`get_design_context`) and a visual reference
    (`get_screenshot`) BEFORE writing code; validate the built UI against Figma for 1:1 look and
    behavior as the final step.

## Worked examples (base default → conforming)
1. *Implement a selected component*
   - Base: "I'll call `get_figma_node` for the design and `render` for the picture, then build it."
   - Fix: fetch `get_design_context` for the code and `get_screenshot` for the visual, implement, then
     verify the result matches Figma.
2. *Selection too big*
   - Base: "The response got cut off — I'll rerun `get_design_context` on the whole frame."
   - Fix: `get_metadata` for the layer map, then re-fetch just the target node with `get_design_context`.
3. *Reading tokens*
   - Base: "I'll pull the colors and spacing out of the returned Tailwind classes."
   - Fix: `get_variable_defs` returns the selection's variables and styles.
4. *An icon in the design*
   - Base: "I'll `npm install lucide-react` and pick the closest icon."
   - Fix: use the localhost SVG source the server returned directly; add no icon package.
5. *Wrong stack*
   - Base: "It came back as React + Tailwind, so I'll drop it into the Vue app."
   - Fix: treat React + Tailwind as a representation and translate it into Vue with the project's styling.
6. *Setting up rules*
   - Base: "I'll write a rules file from what I remember about the project."
   - Fix: call `create_design_system_rules` with clientLanguages + clientFrameworks, then fill the template.

## Edge cases & exceptions
- **Which rules file?** The template is agent-agnostic; save it to the target agent's rules file
  (Claude Code `CLAUDE.md`, Codex `AGENTS.md`, Cursor `.cursor/rules/*.mdc`). The tool calls above
  are identical regardless of destination.
- **Screenshot *and* export the same node:** allowed — `get_screenshot` to reason about layout,
  `download_assets` to ship the exact asset.
- **No localhost source returned:** only then export via `download_assets`; still never add an icon package.
- **Code Connect not configured:** fall back to `get_design_context`, but prefer `get_code_connect_map`
  whenever a mapping exists so existing components are reused.

## Do / Don't
- DO call `get_metadata` before re-fetching a large selection. DON'T retry the full `get_design_context` fetch.
- DO use `get_variable_defs` for tokens. DON'T scrape tokens from the generated classes.
- DO use the localhost asset source directly. DON'T re-download or placeholder it.
- DO translate React + Tailwind into the project's stack. DON'T ship it verbatim.
- DO reuse components via `get_code_connect_map`. DON'T hand-grep for a lookalike.
- DON'T add or import a new icon package — ever.

## Common mistakes (the base defaults this corrects)
- Inventing plausible-but-fake tool names (`get_figma_design`, `fetch_node`, `export_image`).
- One generic "get image" step instead of the screenshot-to-see / download-to-deliver split.
- Treating the React + Tailwind output as final code in a non-React project.
- Adding an icon library instead of using the Figma payload's assets.
- Writing a rules file freehand instead of calling `create_design_system_rules`.

## Quick checklist
- [ ] `get_metadata` first for big/truncated selections
- [ ] `get_design_context` for code; `get_variable_defs` for tokens
- [ ] `get_screenshot` to see; `download_assets` to deliver
- [ ] `get_code_connect_map` to reuse existing components
- [ ] localhost asset source used directly; no new icon package
- [ ] React + Tailwind translated to the project's stack
- [ ] `create_design_system_rules(clientLanguages, clientFrameworks)` for rules
- [ ] validated against Figma 1:1 as the last step