Combining Figma, ThemeBuilder and Storybook for a Super-Fast Design System POC

See how to create a design system proof of concept with Figma, ThemeBuilder and Storybook. And watch Bitovi demo it with React in under an hour.

Ever thought about kickstarting your design system with Progress Kendo UI components? We’ve talked about it a little bit on the blog before, but now it’s easier than ever thanks to KendoReact Free—no trials, signups or logins required! Combine that with the powerful features of Progress ThemeBuilder (which, by the way, also offers a free tier) and you could have a design system proof of concept (POC) up and going with no spend and very little time … which is just what Ryan Spencer and I demonstrated in our recent webinar. That’s right, we teamed up with Bitovi to talk about how to leverage these powerful tools to create a super-fast design system POC.

Now, let’s be honest here: will the design system you create in mere hours be the perfect end solution for your team? Of course not—design systems are meant to grow and change with your product. They need maintenance and documentation, and they should (ideally) integrate more than just your component library and design tokens. In our example, things like tone of voice guidelines, different logo versions, common patterns and page templates, usage guidelines, etc. weren’t included—but for a complete, robust design system you’d almost certainly want to add them.

However, getting buy-in can be one of the most challenging hurdles to jump when it comes to starting a design system. That upfront investment of time and effort can be daunting when you’ve got other projects to balance. By putting together a quick example that offers immediate value, like Ryan and I did here, you can demonstrate the long-term benefits without the big investment. After all, if this is what you can get from a quick POC, imagine all the ways you could benefit from a full design system!

Tools for Our Design System POC

To speed up the creation of our design system POC, Ryan and I reached for a handful of tools that helped us skip repetitive tasks, handle automatic imports/exports and more.

1. Kendo UI Figma Kits: By starting with the Figma UI Kits, we could see all the components available as part of the KendoReact library—including all the various interaction states and small design details. Perhaps more importantly, in our situation, the Figma Kits also included a full list of design tokens that could be adjusted to suit our brand requirements.

   With the Figma Kits updated and customized, we were able to add them as a powerful piece of our design system. In the future, designers will be able to use those Figma Kits to create mockups and interactive prototypes with pre-styled, design-system-compliant components—not to mention, of course, importing the design tokens into ThemeBuilder.

2. ThemeBuilder: Speaking of which, ThemeBuilder was one of the most helpful tools we reached for, because it was what bridged the gap between the design and development sides of our design system. Despite the name, a design system isn’t just for designers—developers need to be able to leverage it, too!

   Because we could import all the work we did in Figma and then export ready-to-use CSS/Sass files, ThemeBuilder became a natural point of overlap and collaboration. We imported the styles, made small adjustments and tweaks, shared it with others on the team for approval, created and managed version history, and exported finished code—it was a perfect single source of truth between the two “sides.”

3. Storybook: What did we do with that CSS we exported? Well, we put it into a Storybook instance and applied it to our KendoReact components!

   If you’re only creating a single application, you can drop the ThemeBuilder generated CSS/Sass files right into that app. But if you’re managing a suite of applications, it’s better to have just one place where you style the components and pull everything from that—your own custom component library. It reduces the possibility of small changes creeping in, makes it easier to manage different versions/updates of the components (and design system), and allows you to write specific usage documentation just for the components your app is using. Think of it like creating your own custom version of KendoReact—just the components you need, in the version you’re using, styled how you need them, with instructions on how and where they should be used in your app. Plus, it’s super handy for visual regression and accessibility testing!

Curious How All Those Tools Fit Together?

Want the full, beginning-to-end walkthrough on how to seamlessly integrate all these tools (and more) into a design system POC? Check out the full webinar recording (also included below)!

After you’ve got a solid start, check out the Progress Design System Kit for more resources on growing and building out your design system.