Spec Layer

Spec Layer is a Figma plugin that turns components, variables, and styles into design-system documentation—on the canvas, on the clipboard, or pulled straight into your repository as structured context for an AI coding agent.

Open in Figma · Visit spec-layer.com

What it does

• Component documentation. Generate measurements, anatomy, properties, states, variants, tokens, and theming in a connected canvas frame.
• Foundation documentation. Turn variable collections, text styles, and effect styles into readable references: number tokens drawn to scale, text styles set as specimens, effect styles cast on a card, and any code syntax a token defines in Figma beside it.
• Copy for AI. Copy a component as a compact YAML brief or a readable Markdown page, or a Foundation as a DTCG resolver document, with the facts an implementation agent needs. Foundation and component copies retain their canonical v5 content hashes; component copies include only the exact token and style dependency closure they use.
• Library and updates. Track generated documents, detect source changes, and rebuild outdated frames in one click.
• Publish and pull. Publish a library from the plugin, then pull it into a repository with the spec-layer CLI, so a coding agent reads the same component and token facts your designers see in Figma. Every changed publish gets a semantic version, and the plugin can also download the library as a self-contained agent skill with no publish at all.
• Optional AI writing. Draft an overview, when to use it, do's and don'ts, and interaction notes for a component, and a line per colour group plus a collection overview for a Foundation. Pro writes with Claude Sonnet 5.5 and the free plan with Claude Haiku 4.5.

Extraction, rendering, drift detection, and Copy for AI are deterministic. Only AI-written prose uses a model.

Free and Pro

Every documentation feature is free and works without an account. Publishing is too, within a free allowance: one Figma file as a library and 10 changed publishes a month. Pro raises that to 10 files with no fixed update cap. Pulling one only needs the CLI and a pull key.

	Free	Pro
Canvas documentation and updates	Yes	Yes
Copy for AI	Yes	Yes
Publish a library for the CLI	1 file, 10 updates a month	10 files, unlimited updates
AI writing	20 uses in the first month, then 10/month	No fixed monthly cap for normal individual use
Priority support	—	Yes

Pro costs $7.99/month or $79.99/year. Purchase it on spec-layer.com, then paste the emailed license key into the plugin's License screen. Lemon Squeezy handles payments as merchant of record.

A generation is counted only after a successful AI response. Failed calls do not count, and retrying an unchanged request within the 24-hour cache window does not use another generation. Pro is subject to the published fair-use policy for automated, shared, or exceptionally high-volume use.

Privacy

Deterministic work stays inside Figma. Canvas documentation and clipboard context (YAML, Markdown, or DTCG JSON) are produced locally.

When you request AI writing, the plugin sends a structured component summary and, when it fits the export limits, a rendered image through the Spec Layer proxy to Anthropic. If the image cannot be exported, the request continues with text only. For a Foundation it sends token names and resolved values, and no image. You do not provide an API key.

Publishing a library is the one feature that stores your content. The bundle you publish is held on the proxy so the CLI can fetch it, and pulling it requires a bearer pull key that only you hold: the proxy stores the key's sha256 digest, never the key itself, so rotating it invalidates every command already handed out. Publishing is explicit and per-file. Nothing leaves Figma until you choose it.

The proxy never logs prompts, rendered images, generated text, or raw license keys. Read the published Privacy Policy, Security overview, and security policy for the complete data flow and reporting instructions.

Install

Install the plugin from its Figma Community listing.

To run a local build, you need Node.js 22 or newer, npm 10 or newer, and Figma desktop:

npm ci
npm run build:plugin

In Figma, choose Plugins → Development → Import plugin from manifest, then select packages/plugin/manifest.json.

Local builds use the production proxy at https://api.spec-layer.com. Keep the plugin source and manifest network allowlist aligned when changing that host.

The CLI

Publishing a library from the plugin's Publish screen shows a setup command to run once in your repository:

npx spec-layer setup --id lib_... --key sl_...

That records the library id, stores the key in a gitignored speclayer.local.json, and writes .speclayer/, component-specs/, and, for a web project, tokens/, so every later command needs no flags. npx needs no install step of its own, though a repo that pulls on a schedule should pin the CLI as a dev dependency. The CLI is delivery only: it never talks to Figma, re-derives nothing, and has no runtime dependencies.

Command	What it does	Network
setup --id lib_... --key sl_...	Records the id, stores the key, then pulls. The command the plugin copies. Needs 0.3.0 or later, or 0.10.0 when it carries --component-format md.	yes
init --id lib_...	Writes speclayer.json only. No key.	no
pull	Fetches the library and writes it into the output directory, default .speclayer/.	yes
status	Checks freshness without writing. Exits 2 when the local copy is behind.	yes
list	Lists every artifact in the last pull, with its file path.	no
show foundation / show component NAME	Prints the Foundation's DTCG resolver document or one component's AI YAML or Markdown page, or the canonical JSON with --canonical.	no
tools [--json]	Lists every command with what it reaches, needs, and writes.	no
skill [--install] [--agent HOST] [--platform P]	Prints a guide for a coding agent, adapted to the repository's stack and the last pull; --install writes it for Claude Code, Cursor, Copilot, Windsurf, Gemini, or AGENTS.md. Needs 0.5.0 or later.	no

Every command but tools takes --out DIR to point at a different output directory, and the three that reach the network also take --api URL to override the API origin. setup, init and pull additionally take a selection (--only foundation, --only components, or repeatable --component NAME) to narrow what lands on disk. The pull key resolves from --key, then SPEC_LAYER_KEY, then speclayer.local.json, and --key - reads it from stdin so it never sits in shell history. See the CLI README for the full flag reference, partial pulls, what pull writes, and how the agent guide is built.

Development

Install dependencies and run the complete local quality gate:

npm ci
npm run check

npm run check runs linting, TypeScript checks, the NUL-byte scan, tests, the plugin and CLI builds, browser-sandbox validation, and a dry-run proxy bundle. Useful individual commands:

npm run lint
npm run typecheck
npm test
npm run test:coverage
npm run build:plugin
npm run build:cli
npm run check:proxy-dry-run
npm run audit

CI adds coverage thresholds and a full dependency audit on pushes to main and on pull requests.

Architecture

Figma node
  → plugin serializer
  → plain IntermediateSpec data
  ├─→ canvas documentation + connected Library entry
  ├─→ YAML, Markdown, or DTCG context on the clipboard
  ├─→ published library bundle → proxy → spec-layer CLI → your repository
  └─→ optional AI-writing proxy → Anthropic

The plugin owns all Figma API access. The extractor receives plain JSON and has no Figma runtime dependency, which keeps the transformation layer testable with synthetic fixtures. The Cloudflare Worker owns the Anthropic credential, quota enforcement, Lemon Squeezy license validation, and published library bundles. The CLI parses a bundle through the same extractor parser the proxy uses, so neither end carries a second interpretation of the format.

See ARCHITECTURE.md for the full data flow, storage model, and trust boundaries.

Repository layout

packages/plugin/       Figma serializer, canvas renderer, and plugin UI
packages/extractor/    deterministic extraction; YAML, Markdown, and DTCG context
packages/proxy/        Cloudflare Worker for AI writing, quotas, licensing, libraries
packages/cli/          spec-layer CLI: pulls a published library into a repo
packages/brand/        shared design tokens, identity assets, and the contrast gate

The marketing site, the product specs, plans, and reviews, and the internal capture library are maintained in a separate private repository. The canonical JSON Schemas ship here, in packages/extractor/src/v5/schema/, and are published at spec-layer.com/schemas/.

Release history is in CHANGELOG.md.

Contributing

Read CONTRIBUTING.md, SECURITY.md, and CODE_OF_CONDUCT.md before opening a change. Use only synthetic or explicitly publishable fixtures, and never commit credentials, private Figma URLs, customer data, or proprietary component exports.

License

Spec Layer is available under the MIT License.