What do Figma’s updates mean for Design Systems?

A shift towards token-first and AI-assisted systems

Figma releases updates at a pace that feels pretty overwhelming. A new feature drops, you learn about the feature, then integrate it into your workflow. But soon after, more features are released and your workflow feels outdated again…like it’s an endless enhancement cycle.

For many designers, especially ones who manage large Design Systems, it’s hard to find time (and energy) to understand which features actually matter and how each Figma update affects your day-to-day work.

But Figma’s last few rounds of updates focus on a token-first, structured, and AI-assisted workflow. Instead of circling around convenience features or quality of life updates, Figma is reshaping how Design System teams think about variables, code alignment, and how AI can expedite the process.

So which features should you focus on and what does each update actually mean for Design Systems? Let’s break down 3 critical updates recently rolled out with variables, component slots, and Figma MCP.

Variables

Variables have been at the forefront in supporting token-first systems. Figma recognized the common use case of multi-brand Design Systems, and its latest updates makes variables even more scalable. Let’s look at the new extended collections, new mode limits, and exporting variables.

Extended collections

There have been issues with multi-brand systems not meeting their adopter needs due to the limitations of Figma variables. Product teams would create hacks by copying variable collections into their own files, recreating themes, or even rebuilding token structures from scratch… meaning system updates and governance became broken across adopters.

But with extended collections, Design System teams can support multiple brands/ products that require their own custom theme, while keeping variables in sync with the core system.

How extended collections work:

• A Design System team publishes a core (parent) variable collection
• Designers across the company can extend the core collection with their own brand-specific themes (overriding only the values they need)
• The extended collections stay linked to the parent collection (and will inherit updates like new variables or token updates)

But there are still limits of extended collections:

• You cannot edit the variable’s alias name, scope, or mode in extended collections
• Extended collections still require strong naming conventions and structure
• Product designers may struggle to understand which token is pulling from where unless documentation is clear
• They require more governance and a review process must be established for Design System members to ensure correct usage

Note: Extended collections are only available for full seat users on Enterprise plans. I know many Organization plans also need this feature, so it’s disappointing it’s only available to premium accounts (please don’t shoot the messenger).

Increase in mode limits per plan

Many Figma users have been personally victimized by how many modes were given to Professional and Organization plans. For instance, if a Design System supports 5 breakpoints (between X-Small and X-Large), they would not have been able to use variables to represent proper responsiveness. So the increase in how many modes you can use within each variable collection is better suited for team needs.

• Professional: 10 modes per collection (up from 4)
• Organization: 20 modes per collection (up from 4)
• Enterprise: Unlimited modes with extended collections (up from 40)
• Starter: Not eligible (variables aren’t included in this plan)

By increasing the capacity for modes, Figma is encouraging teams to move more variation into variables rather than building larger, heavier component libraries. Instead of teams finding “hacks” around the mode limitations, Design Systems can now have fewer overrides and duplicated components.

Import and export as JSON

Figma must have noticed many plugins were created to allow designers to import and export variables, like the Export/Import Variables plugin, because now they’ve introduced a built-in feature to serve this purpose.

Note: Some accounts that should have this feature may still not have access (I still do not as of December 2025.)

Though it seems like a less significant update, it has huge implications for the maturity and governance of Design Systems. This helps teams adopt a “source of truth” mentality due to tokens from the design tools syncing with version-controlled repositories.

Not only that, importing and exporting directly from Figma supports easier migration with fewer mistakes, automated updates of tokens, and a possible future of continuous integration between design and code.

Component slots

Figma components are powerful, but can also be rigid. If a designer needs to customize a component instance, they often have to find workarounds like detaching the component… a big “no-no” to Design System teams.

But slots offer greater component flexibility without detaching. Basically, slots are placeholder containers inside components that let designers edit and customize content within an instance. And instead of relying on the Design System team to create product-specific components and increase library complexity, designers can insert the layer themselves.

Slots also allow Design Systems to specify which components are allowed inside a slot. So while designers have flexibility, they’re still working within system-approved patterns.

Benefits and limits of slots

Some more “pros” of slots used in Design Systems are:

• Slots mirror how components work in frontend frameworks so they align closer with code implementation
• Components are simplified and clean by avoiding common flexibility workarounds
• Complex components like cards and modals become easier to adapt across product teams due to slots’ scalability
• System compliance improves due to slots’ design freedom within guardrails

Now let’s talk about the “cons” of slots:

• Slots instances require careful planning to avoid overly complex or vague component designs
• Slots are not ideal for strict system patterns, like notification and messaging usage
• System adopters have a learning curve to understand how to use slots without breaking away from the Design System
• Slots increase Design System maintenance because slots instances must be defined, documentation must be written, and code must be aligned

Note: Slots are only available by early access sign-up for paid plans (no starter plan). You can apply for access through Figma’s Google form, but your plan’s admin must complete the form on your team’s behalf.

Figma MCP (model context protocol) server

Figma’s MCP allows AI tools, like Claude or Cursor, to access information from your Figma files. The MCP creates shared context between design and code, and enables AI to generate component code, tokens, and even documentation straight from your Design System.

You might be thinking, “What (tf) is an MCP?” Basically, MCPs are a standardized way for AI to communicate with external data and tools, like Figma. So when the MCP server is enabled, AI agents can see your system’s component structure, design tokens, and naming conventions.

Though MCPs can give AI the same knowledge a seasoned Design System team member has, they should be viewed as assistants versus replacements to human designers.

Benefits and limits of MCP

An MCP supports Design Systems in the following ways:

• Generates component code based on context in Figma
• Accurately maps design tokens (like colors, spacing, and type)
• Speeds up the documentation workflow by using live Figma context
• Keeps component structure and naming consistent

But an MCP has limitations for Design Systems, like:

• It can’t read entire projects; it’s better used for small pieces of the system
• It can’t assume interaction behaviors unless you expose and specify it
• Its output still requires review and refinement from seasoned designer/ dev

Important note: The Figma MCP is currently one-way; you can go from Figma to code, but not from code to Figma.

Set up Figma MCP

Figma includes both remote and desktop servers. The remote server (hosted remotely by Figma) is available to all seats and plans, and the desktop server (hosted locally on your computer) is available to Dev and Full seats on paid plans.

Note: Users with View or Collab seats on paid plans are limited to 6 tool calls per month.

For the remote server:

• Using your preferred development tool (between Claude, Cursor, or VS Code), configure the MCP server with the URL https://mcp.figma.com/mcp
• Open a Figma design file from your browser → Switch to Dev mode
• In the right panel, select “Set up Figma MCP” to set up your preferred development tool

For the desktop server:

• Go to “Preferences” → Select “Enable desktop MCP server”
• Select your MCP client (like VS Code or Claude)
• Switch to Dev mode → Make sure MCP is enabled in the right panel

For more details on Figma MCP, view Figma’s MCP collection for tutorials on setup and best practices.

Tips when using an MCP

• Start with atomic components (like buttons) before trying more complex ones
• Work with one component at a time versus entire projects
• Ask AI to reference any existing components to follow your best practices
• Provide full context (like components behavior and interactions)
• Avoid using hard-coded values or detached components (use the Design Lint plugin to check for missing styles)

If something looks wrong in the AI output, you can:

• Review the Figma components for errors or missing context, then remediate as needed
• Ask AI to regenerate the component or documentation
• Show AI a screenshot of the issue and ask why something is off (like the padding)

Figma’s latest updates mark a shift in how Design Systems can scale, maintain consistency, and adapt to product needs. Though each feature comes with its own learning curve and limitations (or plan exclusivity), system designers have more power to design with both flexibility and structure.

I get it; staying current with Figma’s releases feels overwhelming. But investing time to learn about the updates pays off with enhancements such as cleaner component architecture and fewer workarounds that slow teams down.

What do Figma’s updates mean for Design Systems? was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

This post first appeared on Read More