In this series, Jacob Broadhead demonstrates how to build a basic design system in Figma.

In case you missed it, Figma runs its own publication for design systems creators, designers, developers, and managers. Loads of great content.

Last year WebNL team built a new and improved design system from the ground up. Daniël De Wit writes about their switch to Figma, researching designers’ needs, building design system starter kit, documenting it, and working hard to improve adoption among designers and developers.

Figma’s Data Scientist created an experiment to see if a well-maintained design system really saves time for designers. ​“We found that when participants had access to a design system they completed their objective 34% faster than without a design system.”

I assume this will be a highly valuable resource for VS Code theme designers, but also it’s just interesting to look at the organization and building blocks of a design system for such a popular product.

Jesse Showalter walks through his approach to building a design system for his company.

Storybook is an open-source tool for developing UI components in isolation for React, Vue, and Angular. This article explores some of the Storybook addons for design. The Figma addon depicts the component design next to the implementation. Design changes will automatically be reflected in Storybook.

This feature is only available for teams on enterprise-level Figma Organization plan, but thinking behind it is fascinating. Design System Analytics shows how the system and individual components are used across the team, and highlights if some of them are too rigid and get detached often.

Smart Text helps with building automatic documentation and style guides. Create custom text expressions with special tokens for layer’s properties like size, colors, fonts, etc. Then run a plugin to update these tokens with up-to-date data from the layers. Check out the demo video in the author’s Twitter.