Best Figma and design-to-code skills for AI agents

Hand an agent a Figma link with no instructions and it will do two things that look right and are not. It will study the screenshot and draw the icons itself — tidy little SVGs it invented, because it never had the real vector data. And it will treat the React and Tailwind that comes back from the design tool as your code: raw hex values, absolute positioning, a fresh button component sitting next to the one you already shipped.

Skills fix that. But "install a Figma skill" is not advice anyone can act on, because a skill's name is its topic, not its tool. What the instructions actually say, once you read them, is that the ones doing the same job barely differ on the tool sequence — they differ on what they say about assets, and on what they do when the design server is not connected.

Top picks

Five to install deliberately, and the closest rival to the first of them:

skill	publisher	license	verdict	updated
Figma Design To Code	figma	none declared	Read the asset rules first	2026-07-21
figma-implement-design	foryourhealth111-pixel	Apache-2.0	Most complete walk-through	2026-07-22
figma	PracticalSwan	MIT	Best when MCP may be absent	2026-07-11
design-spec	vudovn	MIT	Use before any Figma exists	2026-07-26
figma	FradSer	MIT	Only for motion and video	2026-07-23
Figma Design To Code	Devin-AXIS	NOASSERTION	Same spine, no asset rules	2026-07-27

Design to code: take the asset rules from the guide under the figma account

Figma Design To Code, published under the figma account, positions itself as a mandatory read before the agent ever calls get_design_context, and it ranks the hints that come back: a Code Connect snippet beats component docs, which beat designer annotations, which beat design tokens, which beat raw hex. Then it does what its namesake below does not — it governs assets. Icons and images arrive as <img> tags pointing at a short-lived asset URL, so the agent must render from that export rather than authoring vector paths, size the container with both a width and a height, and commit the actual bytes for anything that ships.

The trade-off: it declares no license, so read it and adapt it rather than vendoring it. The same-named Figma Design To Code from Devin-AXIS carries the identical workflow spine and the identical hint ranking, but stops before any of the asset guidance — which is precisely the part that stops your agent hand-drawing a logo.

Implementing a screen: the walk-through you can actually vendor

figma-implement-design is the long version: parse the file key and node id out of the URL, pull design context, capture a screenshot as the visual source of truth, download assets, translate into your project's conventions, and only then run a closing checklist covering layout, type, color, interactive states, responsive behavior, assets and accessibility. It opens with a Step 0 that repairs your setup when a call fails rather than giving up. It is Apache-2.0, which matters if you want it inside your repo.

The catch is that Step 0 is written for one host — it tells the agent to run codex mcp add figma. On any other agent those commands are wrong. Figma Implement Design states the same setup neutrally: add the server URL, enable remote MCP if your agent needs it, log in through whatever OAuth flow your agent has.

The one that behaves when the design server is missing

Every skill above assumes a live MCP connection. figma is the version that plans for its absence: it names user-supplied exports, screenshots and local design-system files as the fallback path, and it adds a rule the others do not — "Do not claim an MCP operation was used when the active host does not expose it." That single line is the difference between an agent that says it fetched your node metadata and an agent that admits it guessed.

It is also MIT, where the Figma skill under the openai account — which covers the same required flow, then ends without ever considering a missing server — declares no license at all. Same ground, different terms, different coverage at the edge that matters. Worth knowing before you copy either into a client project.

Before there is a Figma file at all

Some failures in this workflow are not implementation failures at all; they are the absence of anything to implement against. design-spec treats that as a hard gate: "Create it BEFORE building UI." It specifies a DESIGN.md with YAML front matter for colors, typography, spacing, radii and per-component properties, a reference syntax so a component can point at {colors.primary} instead of repeating a hex, and a fixed section order. It even defines what a consumer does with content it doesn't recognize — accept unknown sections, but reject a file with a duplicate ## Colors heading outright.

That token block converts cleanly to Figma variables and to a Tailwind theme, which is why it belongs at the start of the pipeline rather than the end.

A skill named figma that never touches your app code

figma is the sharpest illustration of why the name tells you nothing. It imports Figma work into a video composition: assets, brand tokens and components come over the REST API, while motion and shaders are only reachable through the MCP connector — two separate credentials, and the skill insists you say which one a failing step needs. Its best instruction is about reading a storyboard: "storyboard frames are KEYFRAMES, not slides." A logo drawn four times at descending heights is one element rising, not four stills to play in sequence.

Excellent for motion work, entirely irrelevant to shipping a React screen. Install it deliberately or not at all.

What does a skill called figma actually do?

It depends entirely on who published it, because skill names are not namespaced and nothing stops two authors using the same one for different documents. Under that single name you will find a set of rules for driving the Figma MCP server; a read-only REST client that shells out to curl and jq and warns that Figma writes node ids as 1-23 in URLs while the API wants 1:23, as Figma does; and the video importer above. Installing the wrong one is not a small mismatch — one of them emits HTML and animation scripts for a video composition and never a line of your application's code.

The check is quick. Open the body and look at what it calls. If it names MCP tools like get_design_context, it needs a connected server and a Figma seat. If it names api.figma.com and a token variable, it needs a personal access token and can run headless. If it names a CLI of its own, you are installing that product too. The publisher and the body are the identity; the name only tells you the subject.

Same-name skills can also flatly contradict each other. Figma Developer leads with "Design is the single source of truth." and then hands you TypeScript that calls extractDesignTokens() on a client imported from a path alias inside its own repository — so the snippets will not run in your project as written. Figma Developer, same name, different publisher, lists reaching for a method like that as a classic mistake, because there is no token-extraction endpoint to call: you fetch the file and parse the styles yourself. Both are honest documents. Only one of them will leave you debugging an import.

What to check before you install one

License. A skill with no declared license is common, and undeclared is not the same as permissive. Reading one is fine; copying it into a client repository is a different question.

What it needs to exist. MCP-based skills need a connected server; REST-based skills need a personal access token in the environment. A skill that assumes the first and never mentions the second will simply stall.

Plan gating. Figma Code Connect Components is the clearest example: mapping only runs against components that have been published to a team library, and the feature itself is fenced off to the higher organization and enterprise tiers. Nothing in the skill can route around that.

Rate limits. Figma's limits follow the file owner's plan, not yours, and a 429 lockout is not measured in seconds. Figma Context Mcp exists almost entirely to teach the discipline that avoids it: fetch a specific node rather than the whole file, cap the tree depth, and pull image exports last, five to ten nodes per call rather than one call per asset.

What you have now avoided

The agent that drew its own icons did it because nothing told it the real ones were sitting in an exported asset. The agent that pasted raw hex did it because nothing told it the returned markup was a reference, not a source file. Both instructions exist. The markup rule is in nearly every design-to-code skill; the asset rules are the ones a same-named skill can quietly lack — which is why the design-to-code guide published under the figma account is worth reading even though you cannot vendor it.

Pair it with figma-implement-design for the step-by-step, keep design-spec in front of the whole pipeline so there is a token vocabulary to translate into, and check the publisher before you trust the name. That is the whole discipline. What you get back is an agent whose output you can diff against the design instead of squinting at it.