Screenshot of GOV.UK design system website

In practice: GOV.UK’s design system

What is story.to.design?

Read the announcement post.

To put our plugin to the test and see it in action with a real design system, we decided to try it out with GOV.UK’s design system and document the process.

What is GOV.UK’s design system?

Gov.uk’s design system is the United Kingdom official services’ design system. With 6 design tokens, 30 components along with patterns, it seemed like a strong design system to start from.

Here’s a step-by-step case study that illustrates how our Lead Designer Thais brought all of GOV.UK’s components directly from Storybook to Figma using story.to.design:

Screenshot of GOV.UK design system website

I had all the ingredients ready for my experiment: a brand new Figma file and a coded design system displayed in Storybook.

By copying and pasting the story URL it was really exciting to see how, within just a few seconds, the plugin is able to capture all stories available in Storybook.

Screenshot of GOV.UK's Storybook link and the story.to.design plugin working

To generate an entire Figma library from the GOV.UK’s components, all I had to do was click to import the story:

Plugin screenshot

And just like that I had a full representation of all the buttons:

Screenshot of the plugin importing the button

Screenshot of the plugin importing the button

Not only can I import to my Figma file the end result from code, and use that as a way to validate that they’ve achieved what was designed, but the plugin also gives me the option to actually generate Figma components for my own library with all existing variants:

Screenshot of button with variants

Just like that, under half an hour, I had everything ready in Figma:

GIF showing the components generated in Figma

Final results

We challenged ourselves to breakdown the process of syncing development and design and I can safely say it’s a success! The plugin is still in Beta, but can do so much already. We’ll continue improving it further to understand the needs from designers, but ultimately the plugin can generate a full Figma library so that designers can fully rely on their coded design system, saving them a lot of hassle.

Want to try out story.to.design?

Install story.to.design plugin today!