[Extension]: Add Spec Kit Figma

[sebastienthibaud]

Extension ID

figma

Extension Name

Spec Kit Figma

Version

1.6.0

Description

Agent-agnostic SpecKit extension that grounds spec, plan & task generation in Figma design context — REST + optional MCP, single/mono/multi-repo, macOS/Linux/Windows.

Author

Fyloss

Repository URL

https://github.com/Fyloss/spec-kit-figma

Download URL

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

License

MIT

Homepage (optional)

https://github.com/Fyloss/spec-kit-figma

Documentation URL (optional)

https://github.com/Fyloss/spec-kit-figma/blob/main/docs/INSTALL.md

Changelog URL (optional)

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

Required Spec Kit Version

=0.1.0

Required Tools (optional)

- git - required
- bash (4+), curl, jq - optional (macOS/Linux toolchain; not needed on Windows)
- pwsh (PowerShell 7+) - optional (Windows toolchain; replaces bash/curl/jq)

Number of Commands

5

Number of Hooks (optional)

6

Tags

figma, design, frontend, ui, design-system

Key Features

• Grounds /speckit.specify, /speckit.plan and /speckit.tasks in Figma design context automatically via before/after hooks — the rendered design section is injected regardless of agent model, then verified post-generation (CI gate via --strict)
• Direct Figma links pasted in the feature description are auto-detected and introspected at node level; broad file/page links expose candidate frames for selection
• Two design-context engines: portable REST (curl + jq, CI-friendly, default) and optional MCP for more faithful mockup implementation, with automatic REST fallback
• Autonomous introspection at any hierarchy level: single file, project, or whole team (organization > team > projects > files)
• 3-level component resolution (reuse → create-in-Design-System → create-in-app), with graceful degradation when the project has no Design System
• Customizable design-rules constitution: extension-owned base + per-project overlay that survives updates
• Single-repo, mono-repo (Nx/Turborepo/pnpm/yarn/Lerna) and multi-repo (git submodules) layouts, driven by one figma.projects.config.json
• Cross-platform: bash helpers (macOS/Linux) and 1:1 PowerShell 7+ ports (Windows) with identical flags, JSON output and exit codes
• Security-minded: read-only Figma PAT from OS keychain / secret manager (never a .env), API base URL exfiltration guard, 429/5xx backoff, proxy failure self-healing

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 (Darwin 25.x) with Spec Kit CLI v0.12.5
• CI: ubuntu-latest and windows-latest on every pull request

Automated test suites (run in CI via GitHub Actions):

• 207 bats tests covering the bash helpers (config validation, target detection, link parsing, render/verify contracts, ensure-context decision paths, installer idempotency)
• 108 Pester tests mirroring the critical coverage for the PowerShell 7+ ports
• shellcheck on all bash scripts, PSScriptAnalyzer on all PowerShell scripts

Test scenarios:

1. Installed via specify extension add figma --from https://github.com/Fyloss/spec-kit-figma/archive/refs/tags/v1.6.0.zip — all 5 commands registered
2. Dev install (specify extension add --dev) into a fresh scratch workspace — manifest parsed, hooks wired
3. Ran /speckit.figma.setup, configured figma.projects.config.json, validated connectivity (REST and MCP-with-fallback)
4. End-to-end on a real front-end project: spec/plan/tasks generation with the Figma section auto-injected by the before_* hooks and verified by the after_* hooks (tested with GitHub Copilot and Claude-based agents)
5. Verified the update flow (/speckit.figma.update) preserves user config and the design-rules overlay

Example Usage

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

# One-time setup: select the engine (REST or MCP), create figma.projects.config.json,
# validate the read-only Figma PAT and connectivity
/speckit.figma.setup

# That's it — Figma context is now injected automatically:
# /speckit.specify, /speckit.plan and /speckit.tasks trigger the before_*/after_* hooks
# (ensure + verify). Direct Figma links pasted in the feature description are detected.

# Optional deep dive into specific nodes
/speckit.figma.introspect --node 123:456 --depth 3

# Optional CI gate: fail the build if a detected mockup was not integrated
./.specify/scripts/bash/figma-verify-section.sh --phase spec --strict

Proposed Catalog Entry

{
  "figma": {
    "name": "Spec Kit Figma",
    "id": "figma",
    "description": "Agent-agnostic SpecKit extension that grounds spec, plan & task generation in Figma design context — REST + optional MCP, single/mono/multi-repo, macOS/Linux/Windows.",
    "author": "Fyloss",
    "version": "1.6.0",
    "download_url": "https://github.com/Fyloss/spec-kit-figma/archive/refs/tags/v1.6.0.zip",
    "repository": "https://github.com/Fyloss/spec-kit-figma",
    "homepage": "https://github.com/Fyloss/spec-kit-figma",
    "documentation": "https://github.com/Fyloss/spec-kit-figma/blob/main/docs/INSTALL.md",
    "changelog": "https://github.com/Fyloss/spec-kit-figma/blob/main/CHANGELOG.md",
    "license": "MIT",
    "requires": {
      "speckit_version": ">=0.1.0",
      "tools": [
        { "name": "git", "required": true },
        { "name": "bash", "required": false },
        { "name": "curl", "required": false },
        { "name": "jq", "required": false },
        { "name": "pwsh", "required": false }
      ]
    },
    "provides": {
      "commands": 5,
      "hooks": 6
    },
    "tags": ["figma", "design", "frontend", "ui", "design-system"],
    "verified": false,
    "downloads": 0,
    "stars": 0,
    "created_at": "2026-06-17T11:09:06Z",
    "updated_at": "2026-07-07T00:00:00Z"
  }
}

Additional Context

• The extension never modifies the workspace's /speckit.specify, /speckit.plan or /speckit.tasks prompt files by default — integration goes through the SpecKit hook system (with an opt-in prompt-injection fallback for agents without hook support).
• A .extensionignore excludes the test suites, CI config and repo dotfiles from the installed copy.
• Full CI (bats + Pester + shellcheck + PSScriptAnalyzer) runs on every PR: https://github.com/Fyloss/spec-kit-figma/blob/main/.github/workflows/ci.yml
• Docs: docs/INSTALL.md, docs/CREDENTIALS.md (PAT scope matrix, proxy-vs-auth troubleshooting), docs/MONOREPO.md

[github-actions]

cc @github/spec-kit-maintainers — new catalog submission for review.

[github-actions]

Pull request created: #3408

Generated by Add Community Extension from Issue Submission · 310.4 AIC · ⌖ 17.4 AIC · ⊞ 34.5K

[github-actions]

✅ Validation passed — PR submitted

All submission checks passed:

Check	Result
Extension ID format	✅ figma
Version semver	✅ 1.6.0
Repository public & accessible	✅
extension.yml present	✅
README.md present	✅
LICENSE present	✅
GitHub release v1.6.0	✅
Download URL valid	✅
Submission checklists	✅ all checked

A pull request has been opened to add Spec Kit Figma to the community catalog. It will be reviewed and merged by a maintainer.

Thank you for the submission, @sebastienthibaud! 🎉

---

Posted on behalf of @mnriem by GitHub Copilot (model: claude-sonnet-4.6, autonomous)

Generated by 🧩 Add Community Extension from Issue Submission for issue #3396 · 310.4 AIC · ⌖ 17.4 AIC · ⊞ 34.5K · ◷