“Templates built with Variable modes now work seamlessly when published to Buzz. This gives your marketing teams more flexibility to toggle between your brand modes like colors, campaigns, markets, and more — all while staying on brand. When they open a template published with variables, they’ll see a new Variable switcher in the menu to easily change modes.”

“Admins on Organization and Enterprise plans can now disable ​‘From Figma’ Community templates in Buzz, ensuring teams use only the templates your brand team has published and approved.”

Ridd highlights a few examples from his workflow of delivering production-ready code to his product. Love this part: ​“I explored this concept in Make and really liked where it landed. A couple years ago, I would’ve dropped a Cleanshot .gif on the canvas and asked my developer to recreate it as closely as possible. But I’m no longer making concept cars. This component is the design. Every detail is rooted in code and behaves exactly how I want it to in production.”

Starting today, websites published from Figma Make and Figma Sites include more metadata for better search and sharing experiences. The improvements include auto-generated site descriptions for Figma Make and support for OpenGraph and X tags for published Figma Make and Sites so they look better on social.

Cameron Moll​’s team made a new plugin to prep your designs for code readiness and developer handoff through a combination of smart autofixes enabled by AI and guided manual corrections. I bet it will pair well with Luis’ widget above to cover different phases of the ​“make it work, make it right, make it beautiful” process.

Luis made an incredibly useful widget to help check off requirements before the component gets to production — states, accessibility, documentation, tokens, etc. Checklists are an underrated tool for optimizing routine tasks, and I’m looking forward to trying this one. (Design Systems Checklist is another great resource worth checking out.)

Ana Boyer designs a web homepage, showcasing recently launched Figma Design and Draw features. ​“Learn how to create a text-inlay parallax hero using Remove background and Isolate object, apply Glass effects, expand an image within a grid, generate illustrations via AI prompts, and add Draw texture effects.”

Three new AI image editing tools for precise editing and manipulation work — Erase object, Isolate object, and Expand image — and a new toolbar that pairs existing image editing capabilities with these new features. ​“Now, you can lasso any object in an image and use Erase object to remove it completely, or Isolate object to edit or reposition it—without affecting the image background. You can also take a single object or person and apply lighting, color, or focus adjustments. […] Expand image extends the image background to fit new aspect ratios without distortion, preserving the integrity of an image while adapting it to any layout.”

“Join us to hear how Figma and OpenAI’s Codex are making design-to-code workflows more efficient and accurate. With the Figma MCP server, developers can easily bring design context into Codex to generate production-ready code. We’ll chat with Romain Huet, Head of Developer Experience at OpenAI, for a live demo, practical tips, and a Q&A session.”

Huge update to Grids adds an option to hug content and introduces fractional units (fr in CSS). Tables are so much easier to design now. 

Connect external tools to Make to pull in PRDs, tickets, and product documents, so you can create prototypes with full context. Update your connected docs or create tasks directly from Make to keep everything in sync. Supported connectors: Asana, Atlassian (Confluence, Jira), GitHub, Linear, mon​day​.com, and Notion.

Yann-Edern Gillet adopted his original talk at Granola’s Design Engineering Night into an article: ​“The real Rosetta Stone didn’t solve languages, it overlapped them. Same meaning, carved three times, so people could decode one through the other. Design engineering is the same: we’re constantly trying to express intent twice — once visually, once in code, without losing the meaning in between. When the languages don’t match, the wall gets thick. When they overlap, the wall becomes translucent. And when the overlap is high enough… the wall disappears. It becomes glass. I think that overlap, that shared percentage of language, is the real definition of velocity.”

Great overflow from Jake on how developers and designers collaborate using Figma’s newest workflow updates and features. He covers design systems, Dev Mode, Code Connect, Code Syntax for variables, Annotations, AI, and code generation.

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

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.

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