“Best-in-class Design Systems with components and foundations references from top-tier tech companies and leading UI teams.”

The design systems app Supernova analyzed the responses from 100+ respondents to pull out trends and key takeaways about how designers and developers are using components. Some of the interesting takeaways — the majority of the respondents use the design tool (Figma!) as their source of truth instead of the documentation, test and validate design patterns by getting feedback from designers and developers on their team, and maintain their component library by documenting changes and version updates for all components.

An insightful look into cleaning up and shipping a new version of a large design system. The team struggled with slow performance, unused properties, lack of official nomenclature of properties, and ​“ghost components” without sources. It took the design system team three full months to address these problems, but they’re in a much better place.

An interesting new plugin for design system management that scans your Figma files to track usage and identify remote, local, and unlinked/​detached components, styles, and variables.

Couldn’t walk past a cool website with strong 90s Apple vibes! The design system offers a generous free tier for beginners and students.

A curated collection of design system content, tagged with topics, speakers, and events. Now, where do I find time to go through all of this?!

A new video in the Introduction to design systems course by Figma explains design tokens.

Luis shows how to descope and unpublish primitive variables from the design system.

Speaking of Molly, only 2 weeks left to enroll in the upcoming cohort of her 5‑week Design System Bootcamp. I rarely recommend paid content, but have full confidence in her course as one of the most featured authors in this newsletter and creator of the popular UI Prep design system. Figmalion readers can save $100 with a coupon code FIGMALION100.

Molly Hellmuth shares a few tips from her recent talk ​“Design System Traps & Pitfalls” at Smashing Conference. Here are the five ways to de-risk variable adoption for your design system — create a map for your token structure, start using variables with numbers only, use variables and color styles together, stress-test new features, and roll out changes gradually.

Dan Mall is a designer, author, speaker, entrepreneur, and one of the most prolific educators in the design systems space. In this Shortcut profile, he distills his experience into ten pieces of advice for tackling complex tasks, preventing burnout, and fostering continuous learning.

I shared this beta’s release notes in the previous issue, but it didn’t show up in my account yet. Cool to see some folks are already trying it out. As Adham Dannaway pointed out, this release is bringing us ​“one step closer to a shared global design system”. Can’t wait!

Allie Paschal writes about her process of migrating the Native Mobile Design System from using color styles to variables. Pretty cool to see that she already adopted a newly released scoping for color variables. I didn’t realize that some companies may not allow external plugins in Figma, so it’s nice to see that this process is completely manual and self-sufficient.

“Design Manager Juli Sombat sheds light on how a need for more cohesion led Spotify’s design systems team to take a cross-platform approach to components.”

Aaron Shapiro talks about his work as a Staff Product Designer at Patreon to ​“guide product, design, and engineering teams in an effort to clean up a decade of cruft and reimagine their existing design system.” It’s a fascinating behind-the-scenes look at how an expansive design system is being built, but I also love this format and storytelling way more than a regular portfolio presentation.

Carly Ayres from Figma sat down with the people working across design systems tooling both inside and outside Figma to understand what the rise of tokens and features like variables mean for the future of design systems.

Staff Software Engineer Daniel O’Connor peels back the layers of the Thumbtack​’s design system, Thumbprint, to show how they built it for flexibility and efficiency: ​“Our current approach is one of layers, dividing our design system up into three levels: Thumbprint Tokens, Thumbprint Atomic, and Thumbprint Components. This approach has transformed the way we build and maintain our design system, and made it easier to deliver a great experience to our consumers and end users.”

Molly Hellmuth asked 5 of her go-to design system people — Luis Ouriach, Nathan Curtis, Lewis Healey, Dan Mall, and Maria Christopher — for advice on how to start using Figma variables. My heart goes to Luis’ advice to start in a spreadsheet before jumping to Figma (but that’s also my answer to any life question).

Intuit is the parent company for products such as Quickbooks, TurboTax, Mint, Mailchimp, and Credit Karma. Intuit Design System (IDS) is used as a foundational system that other multidimensional design systems are built on top of. Nate Baldwin wrote about creating a design token taxonomy for it: ​“Token names are how design tokens are referenced and identified by consumers. But at the core, a ​“name” is more of an ordered representation of a catalog system and API. This catalog system and API is also known as a token taxonomy. Building a clear taxonomy assisted us in appropriately and consistently classifying tokens, as well as providing a scalable and predictable naming convention for consumers.”

Cool to see how Atlassian has already rolled out the variables support to their massive Components and Design Tokens libraries.