I shared this design system back in October of last year, but it just shipped a new version and won #1 Product of the Day at Product Hunt. ​“Included in this package are more than 200 styles (Typography, Effects, and Color), over 200 variables (Surface, Text, Outlines, and Radius), and 700+ components (Buttons, Form Elements, Navigation, Web3, and more). It also offers pre-made layout samples, a one-click dark mode option, and a fully tokenized design using Figma variables.”

Chad Bergman continues the series on getting started with design systems with a walkthrough of the basics of creating a system tailored to your unique goals and challenges, whether building from scratch or starting with existing pieces.

The Figma team answers FAQs on design systems and everything launched at Framework, ranging from introductory questions to more complex ones.

Designer Advocate Ana Boyer takes us on a deep dive into typography and gradient variables, sharing best practices for leveraging these new features in your design system.

Jacob Miller, a Product Manager for Design Systems at Figma, gives an overview of everything launched at Framework — Code Connect for developers, typography and gradient variables, and the new Library Analytics API. All of the above is designed to drive design system adoption across the teams because ​“building a design system is only half the battle — the real challenge is getting it adopted by both designers and developers.” If you missed the event, that’s one summary you need.

“The Washington Post’s inclusive process for creating new design system components bridges the gap between design and development to make features that help navigate the news online.”

Ana Boyer wonders, what if we also marketed design systems like products? ​“In my time at Figma, I’ve talked to dozens of design systems teams looking to drive adoption and prove the value of their work. Now, more than ever, it’s important to think, strategize, and execute like a marketer. Here are some of the tactics and strategies for helping you position your design system as an integral asset — whether launching anew or revitalizing existing efforts.”

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.