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

Prototype with components

Prototyping relations for the pseudo-states in Figma

story.to.design will automatically generate prototyping relations for some variants:

Prototyping interactionVariant selected
While hovering:hover=true
On press:active=true
On click:tap=true
checked=true
isChecked=true

Demo

Previous page

Storybook Globals

Next page

Import defaults

On this page

  • Overview
  • Demo
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