Read on Twitter
Figma plugin beta is here!
It streamlines design handoff & review by connecting stories to variants.
Link stories to designs
Interact w stories in Figma
Compare design to implementation
Private projects + access control
Try it now » https://storybook.js.org/blog/figma-plugin-beta/
1/
It streamlines design handoff & review by connecting stories to variants.
Link stories to designs Interact w stories in Figma Compare design to implementation Private projects + access controlTry it now » https://storybook.js.org/blog/figma-plugin-beta/
1/
Link stories to designLink stories to corresponding Figma components or variants.
This creates a persistent connection between code and design that propagates to every component instance across Figma files.
When you link once, you never have to do it again.
Play with interactive stories to confirm behavior• Designers confirm the nuances of how a component is expected to behave before committing to using it.
• Devs can reference an implementation without tabbing between windows.
Open the full Storybook in one clickJump to the complete Storybook with addons, tests, and auto-generated docs.
Every connected component has a handy link to “Open story in browser”.
Pinpoint components during design handoffComponents with links to stories are called out in the Figma sidebar.
That helps you identify which component you can reuse and which components you need to build anew.
Compare implementation to design specsWhen you're done with implementation, check that the rendered UI matches the design.
Use Measure addon shows the dimensions and spacing of DOM elements.
Align CSS layouts in a glanceUse the Outline addon to visualize the boundaries of each DOM element. This helps you debug CSS alignment.
Check color accessibilityAccessibility addon provides filters that simulate different forms of colorblindness.
This helps you verify whether a component’s color palette is palatable to users with disabilities.
And so much more!
