Skip to content

Add Figma integration to Storybook

Warren Gifford requested to merge figma-storybooks into master

Created by: felixfbecker

Adds Figma integration to Storybook. Stories can specify a URL to an object in Figma that will be embedded in the bottom panel (interactive). This allows us to easily compare design and implementation side-by-side, jump to the design to comment there, etc.

I just added this for a few components I could find designs for - I would count on the design team and implementors of new features to add the right links to designs. Ideally these would be links to "living", latest-state designs, not artifacts of designs for specific RFCs.

Try it out: https://5f0f381c0e50750022dc6bf7-zsooarpvaq.chromatic.com/?path=/story/web-global-styles--buttons

You can get there on any PR by clicking "Details" in this status at the bottom of the PR:

image

then searching for e.g. "Buttons" and clicking on the "Design" tab at the bottom.

Example:

image

How to get the URL from Figma:

image

Merge request reports