Config 2026: How Figma Redefined the Creative Process (again)

In 2016, Figma's public release changed creative workflows as we knew them, uniting design and development on one platform. This browser-based application focused on real-time collaboration and more efficient workflows, shifting dominance in design tools away from powerhouses such as Adobe. Figma’s new features announced at Config 2026 continue its mission to make design and development more creative, unique, and seamless. Here’s how these new features and updates can further improve your workflows:

Figma Motion: Adding Animation to Your Designs

The era of motion design is here, allowing new visual functionality and feel to any digital experience. Motion interactions add visuals to convey ideas and guide user interactions. With the release of Figma Motion in June 2026, designers can prototype these micro-animations natively, adding a new sense of feedback to digital experiences.

With Motion Beta enabled, a timeline will now appear below the screen. Like Adobe After Effects, you can use it to change object states over time. Features such as keyframes, easing, custom bezier curves, and preset styles are now natively available inside your Figma board. Add motion design to your design system with motion variables and animated components. Motion variables allow you to define an animation, create multiple modes, and apply it to any object in your file. Like color and spacing variables, motion variables can be updated across a file at once. And now, components themselves can be animated, updating changes made across every collaborator file. 

Figma Motion’s most powerful capability is automatically translating motion designs into code using Dev Mode. Instead of spending hours trying to match animations between design and final product, Dev Mode provides a read-only, inspectable timeline. Developers can easily view and copy all the necessary values and settings to recreate animations accurately. Supported export formats include CSS, JSON, framework-ready React, and motion.dev. What was once a major challenge in turning motion design into a working product is now streamlined, saving the entire team time and effort.

Code Layers in Figma Design

Using code layers, you can design and iterate side by side with your team. Rather than testing your designs in code and then redesigning when issues arise, code layers allow designers and developers to test if the design is possible to create and make iterations all in one screen. Collaboration between designers and developers has never been more supported, as this tool lets both sides see what designs are feasible for their team.

Code layers let designers create layers of design differences on an object, triggering immediate code changes when the object is moved, adjusted, or resized. Code layers also work with Figma Agent and iterate new versions while preserving the original version. Team members can review, comment, and prompt on these changes in the same file, on the same layer.

Code layers now bring expanded capabilities to Figma design. You can create alternative design versions and switch between different materials using extract designs. This feature also allows you to convert code back into Figma layers, making your code visually understandable. Read the Figma Release Note to learn how to use code layers.

Figma MCP: Closing the Design-to-Code Loop

Figma isn't shy about implementing new AI tools. This year, they released their own MCP to bring Figma into a developer’s workflow. A Model Context Protocol (MCP) is a “universal translator between your design files and the AI tools that read them. Instead of an AI guessing at your design from a screenshot, MCP gives it structured, accurate data to work from.” MCP is present in the most popular AI tools, including OpenAI, Google, and Anthropic. MCP can be broken into three parts:

• MCP Host: where you or your team is developing your project (for example: VS Code)

• MCP Server:  the connector to the specific tool (for example: Figma)

• MCP Client: the protocol layer that translates between the two locations

Figma’s MCP works by reading your file and considering component hierarchy, auto-layout rules, variants, styles, and more. After it connects to a coding agent and a host, it can generate code from your real design. It allows two-way updates, so UI changes made in code are reflected in Figma. MCP closes the loop between design and code, improving the translation process.

It’s important to distinguish MCP from Figma’s AI agent, which generates assets directly within files. While MCP is an effective tool, it cannot understand the reasoning behind your design decisions. If your design system is unstructured, MCP may not produce accurate code or uphold brand consistency. Read here how to set up your MCP server.