Connecting Design System in Figma with React Library

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

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

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

To connect Storybook to Figma we used a plugin called storybook-addon-designs, with it we added a link to the 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.