story.to.design
  • Features
  • Pricing
  • Docs
  • Blog
  • Discord Logo
  • Twitter Logo
  • Mail Logo
  • Features
  • Pricing
  • Docs
  • Blog
  • Discord Logo
  • Twitter Logo
  • Mail Logo
  • Getting started
    • What is story.to.design?
    • Our vision
    • Basic concepts and definitions
    • Incorporate it in your workflow
    • Compatibility
  • Set up Storybook
    • Connect your Storybook
    • How to write stories
    • Extend stories with Figma variants
  • Import components
    • Import your first component
    • Understand a component's status
    • Set up variants
    • Bring in Storybook updates
    • Simulated states
    • Documentation of variants
  • Advanced features
    • Set up variants - JSON mode
    • Nested components
    • Matching styles
    • Storybook Globals
    • Prototype with components
    • Import defaults
    • Local mode
  • Dev Mode
    • Overview
  • How-tos
    • Multi-theme
    • Split components
  • Reference
    • Storybook args
    • variantProperties API
    • Axis options
    • Special Args
  • Troubleshooting
    • Report a problem
    • Missing fonts
    • No Args found or supported
    • Storybook variants misrendered
  • Pricing
    • Paid plans
  • Downloads
    • Agent
    • Figma plugin
  • Contact us
    • Send us an email
    • Message on Discord
    • X (prev. Twitter) @story_to_design
  • Getting started
    • What is story.to.design?
    • Our vision
    • Basic concepts and definitions
    • Incorporate it in your workflow
    • Compatibility
  • Set up Storybook
    • Connect your Storybook
    • How to write stories
    • Extend stories with Figma variants
  • Import components
    • Import your first component
    • Understand a component's status
    • Set up variants
    • Bring in Storybook updates
    • Simulated states
    • Documentation of variants
  • Advanced features
    • Set up variants - JSON mode
    • Nested components
    • Matching styles
    • Storybook Globals
    • Prototype with components
    • Import defaults
    • Local mode
  • Dev Mode
    • Overview
  • How-tos
    • Multi-theme
    • Split components
  • Reference
    • Storybook args
    • variantProperties API
    • Axis options
    • Special Args
  • Troubleshooting
    • Report a problem
    • Missing fonts
    • No Args found or supported
    • Storybook variants misrendered
  • Pricing
    • Paid plans
  • Downloads
    • Agent
    • Figma plugin
  • Contact us
    • Send us an email
    • Message on Discord
    • X (prev. Twitter) @story_to_design

Documentation of variants

When you import your component from Storybook to Figma with story.to.design, we also generate any documentation for that component that was created in Storybook, Backlight or Histoire, as well as all links related to this component.

Example of imported variants on the canvas with Storybook/Backlight links

Previous page

Simulated states

Next page

Set up variants - JSON mode

On this page

  • Overview
story.to.design logo story.to.design
  • Discord logo
  • Twitter logo
  • Youtube logo
  • Email icon
  • Features
  • Pricing
  • Docs
  • Blog
  • Storybook to Figma
story.to.design © 2022-2025
Brought to you by ‹div›RIOTS logo
  • Terms & Conditions
  • Privacy Policy