✦ AI-powered automation tool for Small & Enterprise orgs

Stop writing docs. Generate them.

FigSpecs turns your Figma components into structured spec sheets, anatomy diagrams, accessibility audits, and Jira tickets — Seamlessly.

Download Plugin Try Demo
10× faster handoff
100% token aware
1-click Jira export
95% automated workflow
Features

Everything your team
needs at handoff

From tokens to tickets. FigSpecs covers the entire documentation pipeline so your team ships faster.

🤖

AI-Ready component.rules.md

Every component generates a structured markdown file that Cursor, Claude, and Copilot can read directly. Hierarchical layout annotations, flex direction, alignment, tokens, and accessibility requirements — all in one file your AI agent can act on immediately.

Cursor Claude Code GitHub Copilot Windsurf
# Button — Component Rules
## Component Structure
> Hierarchical layout annotation
### Button `91 × 40px`
- Content (flex row) · justify-center · items-center · gap 8px · p 10px 16px · rounded 20px `fill × fixed`
- Icon (icon) · `20 × 20px` · tokens: color/icon/on-primary
- Label (text) · 14px SemiBold · color: color/text/on-primary
## Design Tokens
- `color/background/primary`
- `color/text/on-primary`
## Accessibility Requirements
- [ ] Touch target 44×44px minimum
- [ ] aria-label="Button" · role="button"
- [ ] VoiceOver: "Button, button"
🏗️
Structural hierarchyFlex direction, alignment, gap, and padding per node — agents build the right layout first time, every time.
🎨
Token-first outputEvery colour and spacing value mapped to its design token — no hardcoded hex values in AI-generated code.
♿
Accessibility baked inARIA roles, VoiceOver announcements, and keyboard nav — agents implement a11y correctly by default.
📎
Drops into any workflowDownload and drop into your project root, attach to a Jira ticket, or paste directly into your AI chat.
📐

Nested Component Specs

Auto-generates padding, spacing, typography, color tokens, and corner radius — laid out beautifully on the Figma canvas.

LAYOUT Padding : ↑16 →16 ↓16 ←16
TEXT Font : M3/title/medium
ICON Size : 24×24px
♿

Expert Accessibility Audits

WCAG-aligned checks run automatically. Touch target size, contrast ratio, text sizing, focus order — all surface issues before dev picks up the ticket.

3 Passed
1 Warning
1 Failed
🫀

Anatomy Diagrams

Every sub-element labelled with numbered callouts on a clean canvas frame. Designers and developers finally speak the same language.

{ }

JSON Export

Machine-readable spec export. Feed it into your token pipeline, Storybook, or CI checks with zero formatting effort.

🔵

1-Click Jira

Creates a fully structured story with user story, acceptance criteria, component details, and a PNG screenshot attached.

What a Jira ticket looks like

Generated automatically — no copy-paste, no template filling.

[Design Spec] Button - elevated
User StoryAs a developer…
ComponentButton - elevated
TypeINSTANCE
Size95 × 48px
Acceptance Criteria
[ ] Padding↑0 →0 ↓0 ←0
[ ] Touch Target95×48px ✓
[ ] Font TokenM3/label/lg
[ ] Color TokenSchemes/Primary
Live Demo

Figma Playground

Open the Figma file below, select any component, and run the plugin to see specs generated live.

Reviews

Teams ship 10× faster

Design and engineering teams that stopped hand-writing specs never looked back.

★★★★★

"FigSpecs cut our handoff time from half a day to under 15 minutes. The Jira integration alone is worth the price."

Anika Sharma
Senior Product Designer, FinTech Co.
★★★★★

"Finally — accessibility documentation that doesn't feel like a chore. Developers thank us every sprint now."

Marcus Johansson
Lead Designer, SaaS Platform
★★★★★

"The JSON export plugs directly into our Storybook pipeline. It's the missing piece in our design-to-code workflow."

Riya Menon
Design Systems Lead, E-Commerce
★★★★★

"Our design system team went from spending 40% of sprint time on documentation to under 5%. Remarkable."

Daniel Osei
VP Design, Enterprise Software
★★★★★

"The anatomy diagrams are gorgeous. Stakeholders finally understand component structure without a designer in the room."

Priya Nair
UX Manager, Healthcare Tech
★★★★★

"We saved $3,200/month in designer hours alone. FigSpecs ROI is immediate. Every Figma team needs this."

James Kwon
Head of Product, B2B Startup
Pricing

Start free.
Scale when ready.

No credit card required to start. Upgrade when your team needs unlimited power.

Free
$0 forever

20 credits to explore everything FigSpecs can do.

Download Plugin →
Monthly
1
$6 / seat / month

Billed $6/seat/month. Cancel anytime.

Yearly Save $12
1
$72 60 / seat / year

Save $12 per seat versus monthly billing.

Lifetime
1
$333 / seat

One-time payment. Yours forever. No renewals.

FAQ

Questions before you buy?

Straight answers on tokens, specs, exports and pricing — so you know exactly what you're getting.

Design Tokens
Does FigSpecs read my design tokens automatically?
Yes — at every depth. FigSpecs resolves Figma variables (local and published library) bound to any node in the component tree, including deeply nested instances. It captures token slots across fills, strokes, corner radius, opacity, spacing (gap, padding), and typography (font size, line height, letter spacing). The token path — not just the resolved value — is written into every spec and into the component.rules.md file.
Which token slots does it support?
FigSpecs reads bound variables on the following slots per node: fill color, stroke color, corner radius, opacity, font size, line height, letter spacing, gap (item spacing), and padding (top, right, bottom, left independently). Effect and shadow tokens are not yet captured — those are on the roadmap.
What if a value isn't bound to a token?
FigSpecs falls back gracefully to the raw resolved value — hex for colors, px for spacing and sizing. No crash, no blank output. The spec still generates fully; only the token reference column is omitted for that property.
UI Specifications
Does it work on components inside component sets and variants?
Yes. Select any variant or instance — FigSpecs reads the component in its current state, including active variant properties. You can document each variant independently and compare them side by side on the canvas.
How deep does it document nested components?
FigSpecs uses a depth-scoped approach: the root component documents its direct children; each depth-1 frame documents its children; depth-2 frames document their full subtree down to depth 6. Structurally identical sibling nodes are deduplicated — one exemplar is documented, duplicates are skipped to keep specs clean.
Does it generate the spec on the Figma canvas or export a file?
Both. The measurement frame, anatomy diagram, and spec panels are placed directly on your Figma canvas as native frames — shareable with anyone who has file access. You can also download the spec as JSON, CSS, or Tailwind, and export a component.rules.md file for AI agents.
Jira Export
Do I need to configure Jira settings before my first export?
Yes — a one-time setup. You'll need your Jira domain (e.g. yourteam.atlassian.net), your account email, a Jira API token (generated from your Atlassian account settings), and your target project key. Enter these once in the plugin's Jira Settings panel and they're saved for all future exports.
What does a generated Jira ticket contain?
Each ticket includes: a structured user story, acceptance criteria with checkboxes for every spec property, component metadata (name, type, dimensions), a clickable Figma deep link back to the exact component, and two file attachments — specs.json with the full machine-readable spec, and component.rules.md for AI-assisted implementation.
Which Jira plan or permission level do I need?
Any Jira Software plan works — Free, Standard, or Premium. You need permission to create issues in the target project. The integration uses the standard Jira REST API, so no admin access or custom plugins are required on the Jira side.
CSS · JSON · Tailwind Export
What does the JSON export contain?
The JSON export is a full structured spec tree. Each node contains: layout properties (padding, gap, border radius), typography (font size, weight, line height, letter spacing), sizing (width, height, sizing mode, min/max constraints), color tokens, icon specs, and component variants. It's compatible with Style Dictionary and custom token pipelines.
Does the CSS output use my token names or hardcoded values?
Token names, where bound. If a property is bound to a Figma variable, the CSS output references it as a custom property using the token path — e.g. var(--color-background-primary). For unbound properties it falls back to the resolved value. This means the CSS is immediately usable in a token-based design system without manual substitution.
What does the Tailwind export include?
FigSpecs exports a Tailwind v4 @theme {} block — a .css file you paste into your main stylesheet. Each token is output as a component-scoped CSS custom property under the correct v4 namespace: --color-* for fills and strokes, --spacing-* for padding and gap, --radius-* for border radius, --text-* for font size, --leading-* for line height, and --tracking-* for letter spacing. All values are in pixels as specified in Figma — no rem conversion. A ready-to-use HTML snippet using Tailwind v4 arbitrary value syntax is included at the bottom of the file.
Credits & Pricing
What happens when my 20 free credits run out?
The plugin stops generating new specs until you upgrade. Your existing canvas output stays exactly where it is — nothing is deleted. Upgrade to any paid plan (Monthly, Yearly, or Lifetime) for unlimited generations with no credit tracking at all.
Is the Lifetime plan really unlimited, forever?
Yes — one payment, no renewals, no usage limits. You get every feature that exists at the time of purchase, plus all updates for as long as FigSpecs is live. There's no hidden "maintenance fee" or expiry date.
Does one license cover my whole team?
Each license is per Figma account (one seat). It's bound to your Figma user ID at activation, so only you can use it. If your team wants to use FigSpecs, each person needs their own license. There's no team/org plan currently — but buying multiple Lifetime seats is the most cost-effective option for larger teams.