Aviationstack is a scalable REST API for real-time flight tracking, historical flight data, airport info, and global aviation data.
from $49.99/mo
About Story.to.design
What does Story.to.design do?
Story.to.design is a developer tool that converts code components from Storybook, Histoire.dev, or Backlight into high-fidelity Figma layers with auto-layout. It eliminates manual handoff by syncing design libraries with code changes in real time.
Who is it for?
It's built for design systems teams, frontend developers, and product designers who want to keep Figma in sync with their codebase. It is not for solo designers or non-developers who don't use Storybook or similar story frameworks.
Real-world use cases
Teams use Story.to.design to import hundreds of components with thousands of variants into Figma in minutes, simulate hover/tap/focus states, manage multiple brand themes, and update designs after every code commit — without manual rework.
Key capabilities at a glance
It supports nested component detection, responsive viewport capture, multi-brand theming via Storybook globals, and local-mode iteration for rapid prototyping. Compatible with React, Vue, Angular, Svelte, and other frameworks.
Key features
- Auto-layout generation — Generates Figma layers with auto-layout for consistent, responsive designs.
- Nested component detection — Automatically links nested components for a complete UI kit.
- Storybook sync — Keep Figma in sync with one click after every code update.
- Visual reviews — Review updates before importing to ensure alignment.
- State simulation — Automatically simulate hover, tap, active, and focus pseudo-states.
- Multi-brand support — Import different themes and brands as separate variants or files.
- Local mode — Connect to your local Storybook for fast component iteration.
SaaSpartout Score
7.3
/10
Editorial score from our review methodology — not user ratings.
◆ AI advisor — 30 seconds, no signup
Why are you looking at Testing tools today?
Story.to.design Pricing
Story.to.design pricing: Free plan available. Billing model: Free.
For comparison: the median starting price in Developer Tools is $19.99/month, measured across 301 tools we track. See the full SaaS Pricing Index →
Free plan
Start with a free trial — no credit card required. Includes basic component generation and sync for evaluation.
Pro plan
For active design system teams. Pricing starts at €87/month (billed annually). Includes unlimited components, variants, and team collaboration features.
Note: Exact enterprise pricing is available via call with sales.
Frequently asked questions
What is Story.to.design?
Story.to.design is a tool that generates and syncs Figma components directly from Storybook, Histoire.dev, or Backlight code. It bridges design and development by converting code components into editable Figma layers with auto-layout.
Does Story.to.design have a free plan?
Yes, there is a free trial available — no credit card required. It lets you test component generation and sync before choosing a paid plan.
How much does Story.to.design cost?
Pricing starts from a free plan. The Pro plan is available at €87/month when billed annually. Contact sales for enterprise pricing.
Who is Story.to.design best for?
It is best for design system teams, frontend developers, and product designers who use Storybook and want to keep Figma synced with code. It is not ideal for teams without a code-first design system.
What are the top alternatives to Story.to.design?
Alternatives include Figma's built-in Dev Mode (manual), Supernova (design token focus), and build solutions like specifying components manually. Story.to.design is unique for automated bi-directional sync.
Does Story.to.design work with any framework?
Yes, it works with HTML/CSS, React, Vue, Angular, Svelte, Stencil, Lit — if you have stories in Storybook, it works.
