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.”

“Code Connect UI lets you map design components in your Figma libraries to the corresponding code components in your repository. These mappings enhance the Figma MCP server by giving AI agents direct references to your code, enabling more accurate implementation guidance.”

With variables now supporting extended collections, Luis Ouriach put together structure recommendations for multi-brand systems.

Also fun to see how Figma uses extended collection for its own multi-brand system.

More Variable modes for people on Pro and Org plans. Instead of 4 modes, Pro plans now offer 10 and Org plans 20.

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.

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.

Tom Johnson has an in-depth thread on how dithering works, how it breaks, and some tools to get it to look best.

In a quick demo, Product Designer Natasha Tenggoro shows how to use plugins in Buzz to insert brand-approved images, localize assets, and add animations, brand logos, QR codes, and more.

“With new multi-account support on mobile, quickly move between accounts without logging out or losing progress. Stay signed in, get notifications from all your accounts, access deep links with ease, and collaborate seamlessly on-the-go.”

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

A great resource for front-end engineers from Vercel, authored by shadcn and Hayden Bleasel: ​“Modern web applications are built on reusable UI components and how we design, build, and share them is important. This specification aims to establish a formal, open standard for building open-source UI components for the modern web.”

As new tools blur the lines between design and engineering, I strongly believe that any designer working on or contributing to a design system will benefit from understanding these concepts.

Over 15 accessibility improvements expand keyboard-only controls, improve screen reader reliability, and give you more ways to work across Figma, FigJam, and Slides.

Luke Wroblewski observes how AI coding agents flipped the traditional software development process on its head. Design teams used to stay ​“ahead” of engineering, but now engineers move from concept to working code 10x faster.

“So scary time to be a designer? No. Awesome time to be a designer. Instead of waiting for months, you can start playing with working features and ideas within hours. This allows everyone, whether designer or engineer, an opportunity to learn what works and what doesn’t. At its core rapid iteration improves software and the build, use/​test, learn, repeat loop just flipped, it didn’t go away.”

An early preview version of the new monospace font from Paper, based on Geist Mono from Vercel.

The Cut tool allows you to precisely divide vector objects and shapes into separate objects. When editing a vector, select the Cut tool and either click and drag to slice an object or click on a point to split the vector. Don’t miss a little fun interaction detail that Rogie and Tim sneaked in.

“Rolling out to Enterprise plans over the next few weeks, Organization admins can now enable or disable AI features for individual workspaces. When toggled on, AI functionality will be available in all files within that workspace.”

Emil Kowalski shares seven simple ideas you can use to improve your animations: scale your buttons, don’t animate from scale(0), don’t delay subsequent tooltips, choose the right easing, make your animations origin-aware, keep animations fast, and use blur when nothing else works. 

“Now you can use the Figma integration with Zapier to connect Figma to thousands of other tools without writing code. The integration helps teams stay focused on building great products by automating routine tasks, like sending notifications when files are updated, logging design feedback, and creating tickets for follow up tasks.”

Max Stoiber notes how traditional design handoffs are a thing of the past at Shopify. Agree with this: ​“the hard part of making prototypes real is not ​“turning static drawings in Figma into HTML & CSS” anymore. AI can do that perfectly in seconds. What’s left is: backend implementations, wiring up the data fetching, handling state… None of which is ​“handoff.”

For most of my career, I owned both design and front-end code on products I worked on. This combination of skills used to be a (somewhat) rare differentiator, but became ubiquitous with AI. That said, for AI to work ​“perfectly in seconds” requires an extensive setup with an advanced design system shared between Figma and code. Without this foundation, prototyping designs for real apps still requires some technical knowledge. These days, I often use Figma Make for quick experiments and proofs of concepts before switching to the actual codebase and prototyping the final version with Cursor (fully adopted by the design team at Shopify as well).