Skip to content

[Extension]: Add Spec Kit Figma Starter #3545

Description

@vibhus

Extension ID

figma-starter

Extension Name

Figma Starter

Version

1.0.0

Description

This extension turns a Figma section's screens into spec files (per-screen spec.md files, an app-level user-stories.md, and a build-order.md) and required resources for dev (images, icons, design tokens) — then hands off to core /speckit.specify.

Author

WaveMaker

Repository URL

https://github.com/wavemaker/spec-kit-figma-starter/

Download URL

https://github.com/wavemaker/spec-kit-figma-starter/archive/refs/tags/v1.0.0.zip

License

MIT

Homepage (optional)

https://github.com/wavemaker/spec-kit-figma-starter/

Documentation URL (optional)

https://github.com/wavemaker/spec-kit-figma-starter/blob/main/README.md

Changelog URL (optional)

https://github.com/wavemaker/spec-kit-figma-starter/blob/main/CHANGELOG.md

Required Spec Kit Version

=0.1.0

Required Tools (optional)

- python (>=3.8)

Number of Commands

1

Number of Hooks (optional)

1

Tags

figma, design, design-to-spec, ui, frontend

Key Features

  • Figma section → per-screen specs — pulls the actual rendered frames from a Figma section and generates one spec.md per screen, plus app-level user-stories.md and build-order.md.
  • Prototype-flow tracing — traces Figma prototype navigation (taps/links) into a flow map (pages, dialogs, journeys) rather than relying solely on design tokens/context.
  • Single command, four-step pipeline — /speckit.figma-starter.import [-o ] runs pull-screens → trace-flows → read-screens → write-spec, then hands off to core /speckit.specify.
  • before_specify hook — optionally offers to run the Figma import automatically before /speckit.specify, so it slots into the existing Spec Kit flow without a separate step.
  • Agent-agnostic — command and pipeline are plain Markdown, so Spec Kit registers them for whichever agent was picked at specify init (Claude, Cursor, Copilot, Gemini, Windsurf, …).
  • Zero extra dependencies for assets — icon/embedded-image export runs through a bundled, standard-library-only scripts/figma_pull.py; no pip install, uv, or extra CLI needed.
  • Design tokens + typography from Figma MCP — pulls get_variable_defs/get_design_context locally, keeping token/typography data in sync with Figma.
  • Works standalone or with a constitution — doesn't require /speckit.constitution first; if no constitution exists it offers to set one up before continuing to /speckit.specify.

Testing Checklist

  • Extension installs successfully via download URL
  • All commands execute without errors
  • Documentation is complete and accurate
  • No security vulnerabilities identified
  • Tested on at least one real project

Submission Requirements

  • Valid extension.yml manifest included
  • README.md with installation and usage instructions
  • LICENSE file included
  • GitHub release created with version tag
  • All command files exist and are properly formatted
  • Extension ID follows naming conventions (lowercase-with-hyphens)

Testing Details

Tested on:

  • macOS 26.3 and 26.5.2 with Spec Kit v0.1.0
  • Windows 11 Pro

Test scenarios:

  1. Installed extension via specify extension add figma-starter --from https://github.com/wavemaker/spec-kit-figma-starter/archive/refs/tags/v1.0.0.zip
  2. Configured settings, added .env in project root with FIGMA_TOKEN
  3. Ran /speckit.figma-starter.import, provided the figma section url
  4. Verified generated specs inside the figma-starter directory of project root
  5. handed over to /speckit.specify command

Example Usage

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

# Run the extension command
/speckit.figma-starter.import <figma-section-url> [-o <module-name>]

Proposed Catalog Entry

{
  "figma-starter": {
    "name": "Figma Starter",
    "id": "figma-starter",
    "description": "Turns a Figma section's screens into per-screen specs, then hands off to /speckit.specify.",
    "author": "Wavemaker",
    "version": "1.0.0",
    "download_url": "https://github.com/wavemaker/spec-kit-figma-starter/archive/refs/tags/v1.0.0.zip",
    "repository": "https://github.com/wavemaker/spec-kit-figma-starter",
    "homepage": "https://github.com/wavemaker/spec-kit-figma-starter",
    "documentation": "https://github.com/wavemaker/spec-kit-figma-starter#readme",
    "changelog": "https://github.com/wavemaker/spec-kit-figma-starter/blob/main/CHANGELOG.md",
    "license": "MIT",
    "requires": {
      "speckit_version": ">=0.1.0",
      "tools": [
        { "name": "python3", "version": ">=3.8", "required": true }
      ]
    },
    "provides": {
      "commands": 1,
      "hooks": 1
    },
    "tags": ["figma", "design", "design-to-spec", "ui", "frontend"],
    "verified": false,
    "downloads": 0,
    "stars": 0,
    "created_at": "2026-07-13T12:00:15Z",
    "updated_at": "2026-07-15T12:44:38Z"
  }
}

Additional Context

  • Extension is lightweight and simple to use and sits smoothly between the existing speckit commands, i.e. /speckit.constitution and /speckit.specify
  • Can easily be used for both Greefield and Brownfield projects
  • Does not overload the developer with plenty of new commands and works in the existing speckit workflow.
  • Negligible learning curve. Performs differently from existing figma extensions.

Metadata

Metadata

Assignees

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions