Luis explores a few approaches for handling components used in multiple design files but not yet ready for the main library. Delaying the creation of components until later doesn’t scale. Using naming conventions and canvas organization to separate local components doesn’t help with bringing them to another file. The best solution is to create Staging Libraries, ​“where your specific team, feature, squad, whatever can create what is in effect an extension of the system for your specific piece of work.” When the component needs to be used across multiple files, it can be pushed from the local level to the Staging library, and once it’s ready to become a part of the design system, it can be moved to the Global library.

A smart technique for debugging design system usage that will nicely complement the new Check designs linter: ​“I wanted to see which parts of my designs were using tokens and components from my design system, just by looking at the canvas. The solution: an additional variable mode paired with an outline component. Toggle it on, and everything using the system lights up: tokens in bright cyan, components with dashed outlines. Everything else stays unchanged.”

It’s wild how long it takes to build some of these larger features. Jacob Miller, a Product Manager for the Design Systems and AI team at Figma, shares an early exploration for slots from 3 years ago! I’ve been begging Jacob for slots at this year’s Config and got a feeling that they’re already working on it, but still it will be launched only next year.

If you wonder why it’s taking so long, Jacob wrote an insightful reply on how his team approaches these changes: ​“With design systems features, we have to plan them years in advance. Things like components, variables, and styles are used on the order of billions — one wrong move will result in breaking files and ruining critical design work. We have to be methodical. […] With DS features, I’m usually planning them around 3 years in advance.”

If you’re curious how slots and other new features will work, check out Jacob’s AMA.

Watch the Schema keynote to see demos and learn more about all the features Figma just launched.

A summary of everything Figma announced at Schema to help teams design for the AI era. Extended collections are a new way to manage multi-brand design systems, where authors can release a simple whitelabeled version of their design system that designers across the company can extend with their own themes, publish, and reuse. Slots let you add your own layers within instances and easily specify which instances a slot accepts, allowing for both increased usability and compliance with your design system. Check designs linter matches your raw values with their corresponding variables. Finally, the team completed a massive rewrite of the architecture for massive performance gains.

In addition to new design features, Figma has been working hard to bring context from your codebase into your design system. With the new Code Connect UI, users can connect Figma directly to their GitHub repositories and use the new AI suggestions feature to quickly find the right code file to map to Figma components — no coding necessary. The MCP server is out of beta and generally available — now you can add guidelines for how AI models should adhere to your design system. Make kits let you generate React code components and CSS files for your styles and variables, then package those outputs for use in Figma Make. Additionally, Figma announced NPM package imports, native importing and exporting of variables, simplifying authoring experience for collection, and increased variable modes.

Molly shares examples of when to reach for ​“inverse” color tokens and why to avoid just going with ​“white”.

Schema — Figma’s conference for the design systems community — is back for the virtual livestream on Tuesday, October 28. Topics include the future of design systems, best practices for design and development with AI, and product updates to design systems in Figma.

Advocates Anthony and Duncan discuss how to keep a design system aligned with code: structuring components and tokens for alignment; streamlining design-to-code with tools like Code Connect; confidently maintaining, updating, and scaling your design system; and laying the foundation for more effective AI workflows.

Dima Belyaev open-sourced his React and Figma components for building beautiful products or starting your own design system: ​“The React library source code is now on GitHub and the Figma library is available in the Figma Community. I’m especially excited because Reshaped bridges both design and engineering, and I hope it helps both communities learn best practices for building design systems that scale while staying minimal.”

Luis built an audit widget that scans your Figma library and shows components missing variables, styles, descriptions, or links. In the end, it prints a summary frame for a log.

Ana Boyer: ​“Just as design systems help design and engineering teams understand brand guidelines, best practices, patterns, and code, they give AI agents the context they need to produce not just any output, but the right output. And when AI agents can build with your design context, they create a flywheel effect: AI strengthens your design system, which powers better AI code generation.”

Great analogy: ​“Asking an AI agent to generate code without design system context is like asking a new engineer to start shipping code before onboarding. It might technically work—but it won’t align with how your team actually builds.”

In this interview, Jay chats with Ian Guisard who leads design systems for Uber. You will learn how Ian adds new components to the design system, applies variables to reduce component size, deprecates existing components, specs components for developer handoff, handles design system rule breakers, and more.

“Dive deeper into the new design system to explore key changes to visual design, information architecture, and core system components. Learn how the system reshapes the relationship between interface and content, enabling you to create designs that are dynamic, harmonious, and consistent across devices, screen sizes, and input modes.”

A new plugin from Vijay Verma for setting up the foundation of your design system in just a few clicks. The core variables and styles for the color palette, typography, and spacing are all created from a few customizable presets.

In this interview, Jay chats with Ian Guisard who leads design systems for Uber. You will learn how Ian creates new design system components, specs components for developer handoff, and more.

Luis explores what Notion’s design system could look like and how he would approach building it from scratch, including naming conventions and an opinion on the component structure.

A preview of an interesting new ​“design system tool for the AI era”. Imports design from Figma, creates a new component, and makes it instantly installable with the shadcn CLI tool.

In another article, Luis Ouriach shares tools that save him hours when starting a new design system and introduces 9 recent design systems features (covered in Issue #206) that address some common frustrations.

Three primary updates: hide and show variable fills, duplicate and copy styles, and the go-to-main component shortcut (Control+Option+Command+K). See the complete list of quality-of-life updates in the release notes. 

Ever wondered what a specific design systems term means? Check out this glossary with detailed explanations of 33 common terms.