Connecting Design System in Figma with React Library

How to connect code-based components with design system in Figma.

Components

To keep the design system consistent you need to make sure that it looks exactly as in code. I’m working in Figma. For the Union project, we developed a design system in Storybook and connected it to Union’s Figma UI-library.

Link Figma components to Storybook

We added badges with links to the Storybook. To make it easy to find the right code documentation for any component.

Component library for Polytech's website

Link Storybook to Figma

To connect Storybook to Figma we used a plugin called storybook-addon-designs, with it we added a link to Figma frame in the Storybook. You need to make sure that you copied a link to an exact frame of a component.

Now you can see a frame from Storybook.