A major update to a popular design specifications plugin. A new paid Pro version can now display Tokens Studio tokens within Anatomy, Props, and Layout sections.

A list of the top ten design systems from companies like Google, Atlassian, Microsoft, Shopify, IBM, AWS, Audi, Spotify, and Uber. Use them as an inspiration, a guide, or a reference to create your own design system.

Davo Galavotti’s talk at last year’s The Future of Design Systems Conference. He shows how to use Figma and a few plugins like Automator and Scripter to automate repetitive tasks and streamline the design process to improve efficiency and productivity. (Disclaimer: The Future of Design Systems Conference sponsors this issue, but this link is not sponsored.)

Figma published an 80-minute course walking us through the entire design system journey and covering fundamental concepts, building and testing, documenting, and everything in between. Fantastic introduction to the topic, even if you just want to organize your knowledge.

Silvia Bormüller interviews Chris Lüders about his upcoming ​“The Power of AI in Design Systems” workshop, where they discuss how AI can help with the design systems documentation, how tokens help in daily work, and the steps and prompts for generating design tokens for Tokens Studio with ChatGPT.

A short introduction to design tokens: ​“Design tokens are modular, platform-agnostic building blocks of design systems that store repetitive design decisions. Design tokens act as a single source of truth and enable flexibility and scalability within the design system.”

Allie Paschal suggests a way of organizing a large design system library to avoid hitting a file memory limit in Figma. ​“Because Figma is cloud-based, each file (or tab) can only have 2GB max in both the browser and desktop application. But in general, keeping your file at a lower GB usage helps your overall file performance. I’ve found that Figma doesn’t like it when you start to near 60% of this 2GB capacity. So you really only have 1.2GB to work with before the evil file memory banners appear.”

You know I love color tooling! GitHub has been doing some excellent work on its color system, which is the foundation of the Primer design system. Last year they wrote about building internal color tooling for theme building, and in the new post, they share their process for making contrast changes in both default light and dark modes as part of GitHub’s larger accessibility strategy.

Brad Frost published a sample design system governance process based on his old blog post.

Love this new app’s approach — instead of keeping your design system in one place and documentation in another, FigMayo lets you create and publish docs directly from Figma. Any change made in Figma to naming, structure, components, or notes can be published automatically, drastically simplifying and speeding up your workflow.

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.