This technical guide looks into tools and workflows for building a single design system to support multiple brands, platforms, or products. Lots of great tips for anyone involved in building an advanced design system for white-label products with full control over colors, typography, and visual styles.

Webflow announced Design System Sync, a more seamless integration between Figma and Webflow powered by the new companion Webflow App for the Figma to Webflow plugin. The new app allows instant synchronization of design components and variables: ​“This means that any change made in Figma can be directly reflected in Webflow, eliminating the need for manual updates and ensuring that the final website is always in sync with the latest designs.”

Designer Advocate Chad Bergman explains the basics of design systems — what they are, how they work, and how they can change the way you design.

So excited for this episode of Ridd’s Deep Dives podcast with Molly Hellmuth! They get into the nerdier side of Figma and discuss adopting variables, making sure you don’t invest in a Figma strategy that you’ll regret later, Molly’s favorite design systems plugins, and how she’s building components differently in v8 of her UI Prep design system.

“All the essential resources for setting up the design system.” A solid guide and a collection of interviews with design systems practitioners.

A free and ever-expanding design system and UI kit for Figma from Lemon Squeezy. Fantastic resource from a talented team!

A new long-read from Luis Ouriach published in the Smashing Magazine: ​“Design systems can be of immense help, but failure to adopt them invalidates the hard work that goes into building the thing in the first place! In this two-part series of articles, Luis shares his experience with design systems and how you can overcome the potential pitfalls, starting from how to make designers on your team adopt the complex and well-built system that you created to what are the best naming conventions and how to handle the auto-layout of components, indexing/​search, and more.”

“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.