FIGMA·STARTER

Spec Kit extension · Figma → spec

Generate specs from your Figma design.
Kick-start UI development.

Figma Starter turns a Figma section's screens into structured specs — per-screen specs, user stories, and a build order — that become the source your AI coding tools build from. Own the UI code AI generates by owning the spec files behind it.

$specify extension add figma-starter --from https://github.com/OmneWave/spec-kit-figma-starter/archive/refs/tags/v1.0.0.zip
View source ↗
Scope — one Figma section in, one Spec Kit module out

Before

A Figma section isn't a spec.

Someone still opens the file, clicks through every screen, and writes down the layout, the copy, the states, and which tap goes where — before /speckit.specify ever sees it. Fine for three screens. Not fine for thirty.

After

It reads the real screens — and writes the spec.

Figma Starter pulls the section's actual rendered frames and prototype links, then produces the spec: what's on each screen, how the screens connect, and what order to build them in.

FRAME-ACCURATE CAPTURE

Pulls the section's actual rendered PNGs — not a re-render of the layout.

FLOW TRACING

Prototype taps traced into a full page / dialog / journey map.

PER-SCREEN SPECS

One spec.md per screen, plus user-stories.md and build-order.md, in build order.

ZERO EXTRA DEPS

Icons and images are exported automatically — no extra installs beyond python3.

Pipeline

One command. Four steps. No skipping ahead.

/speckit.figma-starter.import <figma-section-url> [-o <module-name>] runs all four and stops, handing the result to /speckit.specify.

01

pull-screens

Download section frames as PNGs, plus prototype taps, into screens.json.

02

trace-flows

Build a flow map — pages, dialogs, journeys.

03

read-screens

Layout notes per page, dialog, and step.

04

write-spec

user-stories.md, build-order.md, one spec.md per screen.

Where it fits

One step, between constitution and specify.

You don't have to run /speckit.constitution first — if no constitution exists yet, the command offers to set one up before handing off.

/speckit.constitution → /speckit.figma-starter.import → /speckit.specify → /speckit.plan → /speckit.tasks → /speckit.implement

Worth knowing

What it doesn't do.

Quick start

Four steps from a blank folder to specs.

01

Install Spec Kit and initialize a project

uv tool install specify-cli --from git+https://github.com/github/spec-kit.git@v0.12.14
specify init my-app --integration claude
cd my-app

02

Add this extension

specify extension add figma-starter \
  --from https://github.com/OmneWave/spec-kit-figma-starter/archive/refs/tags/v1.0.0.zip

Verify with specify extension list — should show "Figma Starter (v1.0.0)".

03

Set your Figma token

export FIGMA_TOKEN=figd_...
# or: echo 'FIGMA_TOKEN=figd_...' >> .env

Without one, the pipeline falls back to the Figma MCP server. Needs python3 ≥3.8 on your PATH.

04

Run the workflow

/speckit.constitution
/speckit.figma-starter.import <figma-section-url> [-o <name>]
/speckit.specify
/speckit.plan
/speckit.tasks
/speckit.implement