A story of how Figma’s brand team audited and refreshed their website design system: ​“Our latest brand refresh proved the perfect impetus: From our new Figma Sans typeface to our revamped illustration style, we wanted to create a cohesive look that represents who we are now, and that meant bringing it to life across our website, too. This story is about our journey—but we hope that it can also serve as a catalyst for other design systems teams looking to improve their own systems. Whether you’re dealing with component sprawl, struggling with color management, or figuring out how to organize your type styles, we hope that you’ll find actionable approaches here that you can apply to your own work.”

Nate Baldwin on the vast difference between the needs of tokens in an authoring vs. a consumption workflow: ​“We have approached design tokens from the perspective of a consumer ever since their inception. This has created a host of challenges the industry has not been able to solve. That’s because we need a perspective shift — the design tokens you consume are not the design systems you create.”

If you work in the WordPress ecosystem, there is a new WordPress Design System library for Figma intended to streamline the design process: ​“This library contains Figma styles and components that mirror the base UI components found in the @wordpress/components package, and icons found in the @wordpress/icons package. They are stable, fully supported, and ready for use in projects.”

Molly Hellmuth hosted a Q&A with Lewis Healey, Lead Designer for Atlassian’s Design Systems. They discussed how 55 designers on his team collaborate with over 600 product designers and thousands of engineers, ensuring cohesive design through Figma-based foundations and a targeted 95% adoption rate of design standards. Lewis emphasized flexibility in component use, a focus on education through champions and office hours, and precise tracking with custom dashboards to monitor design system adoption across 20 products.

The talented design team at Evil Martians makes a strong case for adopting opacity as a core component of your color system: ​“Transparent colors are a staple of modern operating systems, yet, for some reason, web apps still underutilize this marvel of modern interface design. And what happens when you properly integrate transparent colors into your design toolkit? You can minimize the number of design tokens, styles, and component variations — making your workflow more efficient and flexible.”

“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?”