“Bloq generates entire design systems from scratch. Users input brand guidelines to get a customized, variablized component kit — including colors, typography, spacing.”

Luis and Molly discuss how every small and large decision was made in Figma’s Simple Design System.

At a recent meetup, Developer Advocate Jake Albaugh shared the story of Figma’s SDS, a UI kit with a realistic code backing to help bridge the gap between design and development. As a reminder, the Simple Design System is available in the Libraries selector, Figma community, and GitHub.

“Join Luis from Figma and Daniel Henderson-Ede to talk all things accessibility with components, variables, and design at scale. Daniel is an accessibility expert and has contributed to the CVS accessibility kit, now used by companies, and has inspired new kits from GitHub, to document how components can be used and handed off to development teams.”

Maria Christopher from Uber, on the challenges of managing a growing design system: ​“Over time, we struggled with component redundancy and system inconsistency. The increasing complexity from the sheer amount of components, variants, and customizations began to undermine the effectiveness and integrity of our system. It turns out, we weren’t alone. This mirrors a broader trend in the design industry, where the focus is shifting towards critically evaluating and simplifying systems, rather than just adding more layers of complexity.”

Ridd argues that the pendulum has swung too far, and designers hating on design systems are missing the point. You might not need an enterprise-grade system with all bells and whistles, but every product can benefit from a set of simple components: ​“I’ll suggest design systems are most valuable when you DON’T know what the product will be… Investing in a set of core components minimizes the number of knobs you need to turn in order to iterate.”

Zigma connects your design system to the production code, directly syncing design variables from Figma into your GitHub projects. Made by the NextUI team.

Shu Ha Ri is a robust design system meticulously crafted for Figma, offering many essential features and a generous free version. It revolves around modularity and empowers designers to efficiently create diverse instances with a single master component.

Nathan Curtis: ​“In 2015, I established three models of forming teams for scaling design systems: solitary, central, and federated. The article progressed through each, scoffing at solitary, considering central, and favoring federated based on the section’s positioning and proportional length. […] In this article, I’ll dig into how federated is not a choice, it’s a facet. In practice, it’s never pursued first and never without central investment. In most cases, it’s optional and its outcomes can be so expensive and frustrating that it’s not worth it. Even worse, positioning federated as a primary objective anchors so many stakeholder myths to unwind that it damages system potential and even threatens its existence.”

Molly Hellmuth shares daily discoveries while working on the UI Prep design system update. There are great tips on pairing heading and body sizes, clearly marking a default text size, avoiding hiding components with a period or underline in the name, scoping variables in bulk, establishing a set of ​“surface” colors, removing a focused state, and including a special data text style for tables.

“Spectrum, Adobe’s design system, already had a robust icon system, but the time had come for a redesign. Evolving a design system’s icons can involve updating and/​or redesigning assets, improving how icons are maintained and served to the teams using them, and creating a solution for adding, updating, and deprecating design elements within it. Months of discovery, exploration, reviews, and sharing laid the groundwork for the icon team’s three-phase process. It began with extensive design exploration and beta testing to confirm the needs of product teams, and ended with implementing suggestions for improving search, customization, and serving icons. It’s a method of inquiry, feedback, and refinement that other teams can apply to their work.”

Explaining systems thinking applied to design systems through an off-road vehicle platform? That’s my jam. ​“Nissan has developed a vehicle platform that gives it flexibility across a wide selection of vehicles. They leverage the same base component (the frame), and attached different components to that base in order to achieve the desired design. When building a design system, we should strive for a similar level of structure and flexibility. This gives us consistency while also allowing us to be adaptive and scale to our user’s needs.”

Ana Boyer helps design system teams ensure designers get library updates not by copying main components into their working files.

“The Library Analytics API, part of the Figma REST API, lets you fetch analytics data about how your organization’s design system libraries are being used. The API provides similar information to the in-product library analytics feature, but in a format that you can use to do more fine-grained, custom analysis. In this video Gerard shows how to get started with the API, and shows how you might use the data.”

Developer Advocate Jake explains some of the reasons why product experience can be misaligned between design and development. He points out that the source of truth can vary depending on the scenario, from the design system to the code in production to the design files. To find the truth, we have to ask a few questions: ​“What do we want?”, ​“What do we have?” and ​“What is the difference?”

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.