“Design Manager Juli Sombat sheds light on how a need for more cohesion led Spotify’s design systems team to take a cross-platform approach to components.”

Aaron Shapiro talks about his work as a Staff Product Designer at Patreon to ​“guide product, design, and engineering teams in an effort to clean up a decade of cruft and reimagine their existing design system.” It’s a fascinating behind-the-scenes look at how an expansive design system is being built, but I also love this format and storytelling way more than a regular portfolio presentation.

Carly Ayres from Figma sat down with the people working across design systems tooling both inside and outside Figma to understand what the rise of tokens and features like variables mean for the future of design systems.

Staff Software Engineer Daniel O’Connor peels back the layers of the Thumbtack​’s design system, Thumbprint, to show how they built it for flexibility and efficiency: ​“Our current approach is one of layers, dividing our design system up into three levels: Thumbprint Tokens, Thumbprint Atomic, and Thumbprint Components. This approach has transformed the way we build and maintain our design system, and made it easier to deliver a great experience to our consumers and end users.”

Molly Hellmuth asked 5 of her go-to design system people — Luis Ouriach, Nathan Curtis, Lewis Healey, Dan Mall, and Maria Christopher — for advice on how to start using Figma variables. My heart goes to Luis’ advice to start in a spreadsheet before jumping to Figma (but that’s also my answer to any life question).

Intuit is the parent company for products such as Quickbooks, TurboTax, Mint, Mailchimp, and Credit Karma. Intuit Design System (IDS) is used as a foundational system that other multidimensional design systems are built on top of. Nate Baldwin wrote about creating a design token taxonomy for it: ​“Token names are how design tokens are referenced and identified by consumers. But at the core, a ​“name” is more of an ordered representation of a catalog system and API. This catalog system and API is also known as a token taxonomy. Building a clear taxonomy assisted us in appropriately and consistently classifying tokens, as well as providing a scalable and predictable naming convention for consumers.”

Cool to see how Atlassian has already rolled out the variables support to their massive Components and Design Tokens libraries.

An in-depth session by Designer Advocate Luis Ouriach and Design Systems PM Jacob Miller on how you can level up your design system in Figma for better scalability, theming, and more using variables.

A different kind of plugin — Chrome extension that lets you export Figma library or component analytics to CSV and enable several CSS overrides to adjust the UI.

Christine Vallaure recorded a comprehensive guide to setting up, connecting, and updating libraries.

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.