Github design imported into Figma using

In practice: GitHub’s design system

As we continue to improve, we put it to test with real-life use case. This week we are bringing the entire Github design system from Storybook to Figma.

What is is a Figma plugin that imports components from Storybook to Figma, automatically generating and maintaining a full Figma UI kit directly from code. Check out our announcement post

What is Primer, Github design system?

Primer is the Github official design system. React, open-source, relying on design tokens, components along with interface guideline, it seemed like a strong design system to bring to Figma.

Github primer Home page

Being open source, Primer stories are publicly available to anyone on Storybook.

Single selection on storybook

The only thing needed to generate the Figma UI kit is the Storybook URL. Once that URL is copied and pasted into the plugin in Figma, it’s only a matter of selecting the components to generate.

Selecting panel on Figma

Once generated and arranged properly, we get a usable design system that includes components and tokens that perfectly match the stories. From Storybook to Figma in minutes!

S2D use case github

In addition to importing components directly from Storybook to Figma, the plugin also generates Figma components with all existing variants. Not only that, but the Figma UI kit can always be kept in sync with Storybook code, thanks to the refresh button that can be clicked at any time.

Screenshoot while refreshing current storybook

Final results successfully generated tokens and components in Figma from the Primer design system in Storybook, and we are able to keep it in sync while generating variants on demand. Given that is still in beta, it is already impressive.

We are continuously improving the plugin and will generate other Figma UI kits in the next days to further assess its true potential.

Want to try out

Install plugin today!