How to connect Spec Kit with my Figma design?

[yeldarxman]

Hi everyone,

I have a Figma design for my project, and I’d like to use Spec Kit with it — but I’m not sure how to connect the two.

Has anyone done this before?
Any guidance, examples, or documentation links would be greatly appreciated! 🙏

Thanks in advance.

[pks1989]

With Figma MCP server added to your ide/agejt.

It may be used on impement step

[sebastienthibaud]

Hi @yeldarxman,

Full disclosure: I'm one of the maintainers of the extension linked below, we built it because we ran into exactly this question.

Building on @pks1989's answer, there are two approaches:

1. Figma MCP server in your IDE/agent
Quick to set up, and the agent can read the design at the /speckit.implement step. The limitation: the design context never lands in spec.md / plan.md / tasks.md, so fidelity tends to drift by the time you reach implementation.

2. Ground the design context in the SDD artifacts themselves
That's the approach we took with spec-kit-figma, it hooks into before_specify / before_plan / before_tasks to inject the Figma context (tokens, components, layout) into the generated artifacts, and verifies afterwards that the design section actually made it in. Agent-agnostic (Copilot, Claude, Gemini, Cursor…).

specify extension add figma --from https://github.com/Fyloss/spec-kit-figma/archive/refs/tags/v1.6.0.zip

Run /speckit.figma.setup once, then pasting a Figma link (with or without node-id) in your feature description is enough, the context is pulled in automatically.

It's still young, so if you try it we'd value the feedback issues and rough edges welcome: https://github.com/Fyloss/spec-kit-figma/issues

Catalog page: https://speckit-community.github.io/extensions/figma