A reminder that Framework is happening on Tuesday, April 16th. Figma published the schedule for this 3‑hour-long event, which will be a great fit for anyone interested in variables, design systems, and design-to-code handoff.

A free beta of the design system generator. Figr Identity helps set up styles and variables for color, typography, spacing, grids, radius, and shadows. Automate tedious work by generating a scalable component library and easily managing your design system.

Figma is bringing together the design systems community on April 16 to share new features, best practices, and a peek into what’s coming next in the half-day event. ​“We’ll share more about new capabilities to make design systems more powerful and easier to adopt, as well as features to connect your system closer to code. Our product sessions will dive deep into strategies for structuring and maintaining your system.”

Considering it’s only a couple of months until Config 2024, it’s pretty clear they will put a bow on some of the features announced last year. Typographic variables, anyone?

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.