What is story.to.design?
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.
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.
To generate an entire Figma library from the GOV.UK’s components, all I had to do was click to import the story:
And just like that I had a full representation of all the buttons:
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:
Just like that, under half an hour, I had everything ready in Figma:
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.