Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →awdr74100/figma-codegen
Generate framework-aware code from a Figma design. Reads the project's stack profile and emits code matching the existing framework (React/Vue/Svelte/Next/etc.) and styling (Tailwind/CSS/CSS-in-JS), reusing existing components and design tokens instead of regenerating from scratch. Triggers whenever the user wants a Figma design turned into code — e.g. 'code this design', 'implement this frame', 'build this screen/component', 'turn this Figma into React/Vue', 'convert this design to code' — or w
Passed 17 of 20 test cases with the skill, and 9 of 20 without it.
and 10 more in the full report
9 fixed10 passed either way4 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
This benchmark measured an earlier version of the skill.
A newer attempt on gemini-3.8-flash on 10/21/2026 did not produce a publishable comparison (not comparable). The snapshot above is the previously measured run.
One of 9 test cases the skill fixed. Same model, same prompt, with and without the skill.
We ran component_map on a new design layout. It returned a high confidence match for Button -> src/components/Button.tsx, and a low confidence match for Avatar -> src/components/UserAvatar.tsx which we visually confirmed. Which mapping row should be appended to docs/figma-component-map.md?
| Checked | Without skill | With skill |
|---|---|---|
| Appends only the confirmed low-confidence mapping for Avatar. | Missed | Passed |
| Omits recording high-confidence matches in docs/figma-component-map.md. | Missed | Passed |
The instructions your model reads when the skill loads.
Turn a Figma selection into code that looks like the rest of the project: reuse the components and
tokens that already exist, only build what's genuinely missing. The grounded tools do the heavy
lifting so you are not guessing from a screenshot. This file is the router; deep detail lives in
references/ — load a reference when its step is in play.
Every tool result says so when it applies, so you do not have to check up front: with two or more
files connected and none claimed, results carry a MORE THAN ONE FIGMA FILE IS OPEN block naming
them. It matters because calls otherwise follow whichever file the user last touched, which changes
when they switch tabs — so a task can read one file and write to another and report success.
When you see it, claim the file before doing anything else: list_files names every connected file,
use_file({ fileName }) claims one for this session (use_file({ sessionId }) when two open files
share a name — Figma allows that, and x (Copy) is how it happens). Every later call then reaches
that file whatever is in front, including while its tab sits in the background. If the user has not
said which file, ask — do not guess from the names.
Run the grounded tools against the selection, then generate — trust them over the rendered image.
get_design_context (detail full, dedupeComponents: true) → the structural tree with
tokens resolved to names (Primary/500, spacing/4), styles deduped into globalVars, and each
instance's mainComponent / componentProperties. This is the layout + binding source of truth.
Keep dedupeComponents: true and don't depth-limit a subtree you'll build from.
→ How to read the tree, the per-node fidelity catalog (effects, per-side borders, stroke align,
per-corner radius, blend, masks, gradients, image-fit, auto-layout/grid, aspect-ratio,
scroll/sticky, stack & stroke-space), Dev Mode annotations as ground truth, and grounding a page
too big for one call: references/grounding.md.
component_map → every Figma component grouped to a local code component with a status
(high / medium / low / unmapped), candidate.filePath, and matchedProps.
test cases passed, vs 9 / 20 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.