Sepeda Rafael breaks down some aspects of the organization of the icon library and shares techniques that help avoid problems with the future support of the library as a part of the design system.

Livestream from Friends of Figma, Portugal where Bruno, Raquel, and Rita analyze the Atlassian design system through its Figma community files and documentation.

The team at Anima asks a controversial question, and makes a strong case for Storybook being the single source of truth: ​“Even though products begin with the components in the design, the end-users of those products will actually experience the components from the code. The single source of truth, then, is what users will actually see in the end.”

Molly Hellmuth shares the top 10 places where her students get stuck when building their first design system in Figma. Many of those involve tactics that once were considered best practices but got depreciated by newer features and approaches. Her answers to the tricky questions come from a ton of knowledge and experience.

A design system boilerplate created by Mr. Biscuit in collaboration with Into Design Systems. It prioritizes component composition and design token usage at its core, providing an efficient means of establishing a robust and future-proof design library.

The Figma team chats with folks across the industry on how plugins, widgets, and tooling are changing the landscape, and what they hope for the future. ​“Plugins for design systems are typically geared towards functionality, falling into two categories: those that automate a series of existing tasks, or extend a feature set such as gathering analytics, testing designs, improving accessibility, and more.”

Design technologist Ravi Lingineni explains how Pinterest’s design system team measures adoption using Figma’s REST API. They’ve built a custom tool FigStats to calculate and monitor a new metric called design adoption, which measures how their design system Gestalt was being used across the board in Figma files.

The team at Figma talked to several industry experts from Google’s Material Design team, Spotify, Shopify, and Stripe about how they’re managing the future of design systems — from tooling to automation to accessibility. 

A guide to using Tokens Studio to create flexible component libraries: ​“In headless design systems, the visual representation of components decouples from the logic required for their creation. Your building blocks gain UI after you apply tokens to them.”

I believe eventually starting work on top of a standard headless library will be normalized, similar to standard libraries in programming languages. How many times do we have to recreate all states of a button or create modals from scratch?

A deep dive by one of Tinder’s software engineers into the process of building their design system. The team started by defining design tokens in Figma using the Tokens Studio plugin, then used the Style Dictionary framework to transform styling data from a single source of truth into platform-specific artifacts that can be consumed by their codebases. To support the future work of designers and engineers, they also created a comprehensive documentation site using Zeroheight.

For the final episode of this season of Building blocks, Figma Designer Advocate Chad Bergman and Product Manager Jacob Miller spend the entire hour answering burning design systems questions.

Dann Petty asks for the best Figma tips for setting up a design system, and there are lots of golden nuggets in the replies. One of my favorites is ​“to not over eagerly start the design system when you start a project”.

Matt Bailey attended Schema 2022 conference in London and shared his impressions. All of the talks are already available on YouTube, so check out Matt’s summaries to see if something piques your interest.

Molly Hellmuth shares common mistakes that many of her students make when building their first design system, from overusing component sets and styles to mismanaging icons and making every component public.

Recordings from all three Schema 2022 conferences are now available — London, Tokyo, and New York. (Virtual event streamed select talks from physical locations.) Some of the speaker decks are also available in the Community.

“Playing constant catch up, adding prop after prop to support and maintain too many cases? Break larger components into flexible subcomponents so that users can solve their unique problems themselves. We’ll show how to architect subcomponents, leverage Figma’s improving component features, embrace opportunities and challenges the approach creates for your system.”

“Component properties launched at Config earlier this year, but was over a year in the making. Essentially React properties for Figma components, ​“props” removes the guesswork out of your design system and better aligns design components with code. Join the tech leads of the project for a behind the scenes look into how the feature came together, the power it unlocks for your design system, and a look into some of the exciting updates we’ve made post launch.”

“Design systems are drivers of cultural change disguised as a component library — getting your org to commit to this change often requires influencing across all levels from designers to VPs. In doing so, you’ll rely on skills like communication and relationship building, in order to expand your system of allies. In this talk, I’ll share mistakes and lessons learned along the way and offer ideas to help you navigate the challenges of design systems buy-in and advocacy.”

“At Uber, we’ve built a cross-platform design system with hundreds of thousands of weekly Figma inserts and an accompanying super plugin. But like everyone, we started with only a few components and multiple one-off plugins. We’ve carefully matured our design system through data and heart. Yet it hasn’t been straightforward. There’s a constant tension between what designers and developers need and how we interpret data. These growing pains only seem to get worse the more a system evolves. In this session, we’ll show you that data and heart don’t have to be at odds as we share how we mature our design system and plugins. Through demos of AI-driven tooling, we’ll explore the role data can play in the future and help your team scale your system by balancing numbers with heart.”

“Designing and building mobile native design systems can be tough. Different devices, different languages, and different conventions can make it challenging to get started and stay consistent. In this talk, the DoorDash design system team will share what they have learned about navigating these challenges: their process, their past mistakes, and how they move forward when building the robust native component library that powers the #1 food delivery app.”