What is the figma-design-system-handoff skill?
The figma-design-system-handoff skill is an agent skill that extracts a Figma web or app frame, read in chunks through the Figma MCP server, into a maintainable design package: CSS variables or Tailwind tokens, token JSON, primitives and a reference screen checked for pixel parity. A separate Canvas target can rebuild the frame in FigCraft instead.
It turns any web or app frame in Figma, read through the Figma MCP server, into a maintainable design system and working UI, rather than pasting raw generated code. It is brand-agnostic, so it points at a customer Figma source with or without an existing design package.
Two output targets come from one extraction. Code, the default, writes CSS variables, Tailwind, token JSON and TypeScript mirrors plus primitives and a reference screen. Canvas, added in version 1.1.0, can instead recreate the frame in the FigCraft tool from a Figma REST export.
The problem it targets
- One-shot calls to a Figma MCP server truncate on large frames and silently drop layer effects, variables and gradient-stroke detail.
- Generated screens become the whole architecture, with one giant component, expiring asset URLs and no tokens.
- Parity gaps hide in asymmetric padding, per-corner radii and effects that codegen typically skips.
The eight-step rubric
Step 0 parses the Figma URL and resolves an adapter for token paths and commands. Steps 1 to 2 chunk the MCP read and build an exact measurements checklist against a token diff. Steps 3 to 7 create or update foundations, primitives and page chrome, localize assets, then verify, build, visual-diff and check release readiness.
Bootstrap versus integration mode
Bootstrap mode starts from a Figma board with no design package yet, builds one reference consumer and promotes only proven repeated patterns. Integration mode maps the same steps onto an existing token and component setup, chosen only when those canonical paths already exist.
Who the figma-design-system-handoff skill is for
Best for
- Designers handed a finished Figma frame and asked to turn it into a working design system, with the skill driving extraction while they approve naming.
- Engineers wiring a Figma frame into tokens and components with pixel parity, or refreshing a package after the source changed.
- Figma frames that already use Auto Layout on major sections and components or variants for repeated controls.
Not for
- Checking an already-built page against its Figma frame after the fact, where Designfit MCP compares tokens and geometry and returns a fix list.
- Pulling colors, type and spacing tokens from a public website instead of a Figma source, where Extract Design System MCP Server writes starter token output from that live site.
- Opening the raw connection between an agent and a Figma source to read context and write to the canvas, where Figma MCP Server supplies that official link for any workflow to use.
- Turning Stitch-generated HTML screens into React Native components with navigation, where Stitch React Native Skill keeps the native code synced with later design edits.
How to install Figma Design System Handoff Skill: Tokens and Pixel Parity
npx skills add dancingteeth/figma-design-system-handoffInstall the skill
Run the command above, or copy the skills/figma-design-system-handoff path from the repository into the agent's own skills location, keeping it intact so its scripts still resolve.
Add the Figma MCP server
Configure a Figma MCP server in your agent client; authentication for it is kept client-side and is not bundled with the skill.
Check for updates
After a release, run npx skills check followed by npx skills update figma-design-system-handoff to pull the newer version.
Fill the adapter for a brand
Add a thin project skill or an AGENTS.md section that fills the adapter document with token paths, commands and version rules for that customer.
Check that it loaded
Point the skill at a real Figma frame and confirm it produces a token-diff JSON, updated token output and one reference screen, with a visual diff step before the run is marked complete.
Key features
- Chunked MCP discoveryReads a Figma frame in per-block passes with variables and a screenshot, instead of one root call that truncates on large frames and drops effect detail.
- Exact measurements checklistProduces a token-diff JSON from a measurements pass, so padding, radii and effects codegen tends to miss get checked explicitly.
- Two output targetsCode mode writes CSS variables, Tailwind, token JSON and TypeScript mirrors; Canvas mode instead rebuilds the frame natively in FigCraft.
- Pixel-parity reference screenBuilds one reference consumer against the new tokens and primitives, checked with a visual diff before anything is called done.
- Bootstrap and integration modesBootstrap builds a small package from scratch when no design system exists yet; integration maps the same steps onto an existing one.
- Brand overlay patternThe repository is the shared methodology; a thin project adapter supplies token paths, commands and brand specifics without forking the whole skill.
- Dependency-free helper scriptsNode and Python scripts extract primitives, diff a dump against token JSON, verify package exports and run consumer smoke checks for the release gate.
- pen.dev to FigCraft bridgeA dedicated tool converts a pen.dev or Pencil design straight into a FigCraft run script for the Canvas target.
Frequently asked questions
What is the figma-design-system-handoff skill?
It is an agent skill that extracts any Figma web or app frame, read through the Figma MCP server, into a maintainable design system rather than one-off generated code. It produces CSS or Tailwind tokens, token JSON, primitives and a pixel-parity reference screen, or can rebuild the frame natively on a Canvas target called FigCraft.
How do I install figma-design-system-handoff?
Run npx skills add dancingteeth/figma-design-system-handoff, or copy the skill's path from the repository into your agent's own skills location by hand, keeping the structure intact. A Figma MCP server still needs its own client-side configuration and authentication.
What problem does figma-design-system-handoff solve?
Figma MCP reads commonly truncate on large frames and drop layer effects or gradient detail, generated screens turn into one giant component with no tokens, and parity gaps hide in padding and corner radii that generated code tends to skip. The skill chunks the read, checks exact measurements and verifies pixel parity before calling a page done.
What is the Canvas target in figma-design-system-handoff?
Canvas, added in version 1.1.0, is an alternative to the default Code output. Instead of CSS or Tailwind tokens, it takes a Figma REST export and recreates the frame natively in FigCraft, with an id manifest, a gap report, two-pass instance overrides and a render-diff gate.
Does figma-design-system-handoff need a paid Figma seat?
Live Figma MCP access for an inventory pass generally needs a paid Dev Mode seat. Without one, the offline helper scripts and any saved design-context dumps still run, so earlier extraction output can still be checked and diffed.
Which AI coding agents work with figma-design-system-handoff?
The README lists Cursor with Figma MCP for chunked discovery, and Claude Code or Codex using a symlink or npx skills add. It also names Claude Code paired with figcraft-cli for the Canvas pipeline. The author calls this observed use rather than a certification matrix.
Does figma-design-system-handoff duplicate per customer brand?
No, by design. The repository stays the shared methodology, and a brand gets a thin project adapter or an AGENTS.md section that fills in token paths, commands and version rules. The README states this directly: copy the adapter, not the whole skill.
Can figma-design-system-handoff apply tokens to finished HTML exports?
No. The README calls applying finished tokens to pre-existing HTML exports, such as branded standalone pages or marketing exports, a companion workflow that pairs with this skill but sits outside its own extraction and handoff steps.