Figma brings code layers and AI motion graphics to design canvas at Config 2026

Figma adds code layers, support for animations, more AI features in new update

Figma on Wednesday showed off an update that adds a new code layer, support for motion and shaders, and the ability to create custom plugins for various tasks using AI. The design platform has been working on bringing code integration into its tool for a while. Last year, it unveiled an AI prompt-based prototyping tool, Figma Make, and has since launched integrations with Claude Code and Codex to improve the hand-off between coding and design. The company is now adding code layers directly to the collaborative canvas, helping teams clone repositories and extract flows from code to design layers for testing. Figma's chief product officer, Yuhki Yamashita, said code layers make it easier for designers, product managers and programmers to iterate on ideas rather than focus on creating pristine code that goes into production. "We think the multiplayer canvas is really powerful because this is an environment where you don't really care about the quality of the code. If you're rapidly exploring or need to kind of explore a bunch of new directions, you can do that in this spatial way. We hope that this feature produces different behaviour not just with designers, but also with engineers and PMs," he said over a call. Figma now also supports animations, transitions and 3D transforms. Previously, designers had to create animations in other software and convert it to code that the app could understand. Now, designers can integrate animations and transitions directly into Figma. You can now use AI to create some of these assets, and the update is adding support for adding shader effects and fills using AI, too. Figma acquired node-based tool Weavy, which helped designers run workflows through different models to compare outputs, last year, and is now working to integrate the two apps better. In an update rolling out later in the year, users will be able to generate Weavy workflows directly within Figma. The company's also adding new skills to make its AI assistant more useful with its collaborative canvas. Users can now write text prompts to create repeatable skills that AI agents can use. You can also connect tools like Notion, Granola, Excel and GitHub, or attach files to give the AI bot more context about what you want it to do. The company is also adding a feature to help users create custom plugins, like layout generators or vector path tracers, with prompts.

Figma now has AI motion graphics and shader tools

Otherwise, here's Figma's overview of everything that was announced: New creative materials to express ideas ● Code layers: Work directly with code on the Figma Design canvas. Clone repositories, generate new directions with Figma's agent, extract flows into editable design layers, and sync changes back to code. ● Motion: Design animations, transitions, and 3D transforms collaboratively, directly from Figma. Prompt to create animations with AI, apply preset styles, or adjust manually on a timeline. Motion is connected to design systems, code-backed, and ready to ship. ● Shaders: Prompt to build shader effects and fills, custom visual treatments powered by WebGPU. Effects that weren't available in Figma before, like dither, pixelate, and various blur types can now be created directly on the canvas. ● Figma Weave workflows: Generate consistent and high-quality visuals in Figma with 20 plus integrated Weave tools, turning complex AI workflows into simple tools on the canvas. This is the first step towards a full integration between Figma and Figma Weave, expected later this year. New intelligent tools for teams and agents to collaborate ● Agent skills and deeper context: Turn repetitive work into skills that entire teams can use to work more precisely and consistently with Figma's agent. Bring in more context with third party connectors, web search, and file attachments. ● Generative plugins: Extend Figma's capabilities by building custom, reusable plugins with the agent. Turn prompts into tools that can be tweaked and shared -- no developer setup or technical skills required.

Figma adds code layers to the canvas and lets users build custom AI plugins at Config 2026

Figma launched code layers, native animations, AI shader effects, custom AI skills, and prompt-built plugins at its Config 2026 conference. Figma used the opening keynote of its Config 2026 conference on Wednesday to unveil code layers, a feature that brings executable code directly onto the collaborative design canvas. Teams can now clone repositories and extract flows from code into design layers for testing, collapsing a handoff step that has defined the design-to-development workflow for over a decade. The announcement came alongside native animation and motion support, AI-generated shader effects, new AI skills for Figma's design assistant, and the ability to create custom plugins through text prompts. The updates were presented at the Moscone Center in San Francisco, where in-person tickets had sold out ahead of the three-day event. Chief product officer Yuhki Yamashita said code layers are designed to change how designers, product managers, and engineers collaborate on ideas. He told TechCrunch the multiplayer canvas is powerful because teams exploring new directions do not need to worry about code quality. The spatial format, he said, lets them iterate without the pressure of writing production-ready code. The code layer feature works within Figma Sites and is backed by custom React code. Users can convert components to code layers, use AI chat to build and modify them, or edit directly in Figma's code composer. The system supports npm packages including motion libraries and 3D frameworks, enabling interactive elements from dropdown menus to shader effects without leaving the canvas. Figma also added native support for animations, transitions, and 3D transforms. Previously, designers had to create motion work in external software and convert it into code that Figma could interpret. The update eliminates that step, letting designers build and preview animations directly inside their design files while also adding AI-generated shader fills and effects created through prompts. The company is also deepening its integration with Figma Weave, the product it built from its acquisition of node-based AI media tool Weavy last October. Figma launched its own AI design agent last month, and the Config updates extend that agent with new capabilities. Users can now write text prompts to create repeatable skills that the AI assistant can execute, and they can connect external tools like Notion, Granola, Excel, and GitHub to give the agent richer context. A separate update, rolling out later this year, will let users generate Weavy workflows directly within Figma, tightening the connection between the two platforms. The Weavy acquisition, which brought a node-based canvas for combining multiple AI models with professional editing tools, has until now operated as a standalone product at its own URL. Figma is also adding prompt-based custom plugin creation. Users can describe what they want, such as a layout generator or a vector path tracer, and Figma will build the plugin. The feature extends the platform's existing plugin ecosystem, which already hosts thousands of community-built tools, by lowering the barrier from writing code to writing a sentence. The updates arrive at a complicated moment for Figma's business. The company's first-quarter revenue grew 46 percent year over year to 333 million dollars, and its net dollar retention rate hit 139 percent, the highest in more than two years. But AI coding tools like OpenAI's Codex are expanding from developer tools into enterprise platforms that can generate interfaces from text prompts, threatening to bypass design tools entirely. Figma went public in July 2025 at a 20 billion dollar valuation. Its stock has since fallen roughly 79 percent, trading around 24 dollars, as investors question whether traditional design software can defend its position against AI-native competitors. The competitive pressure is broad. Canva launched its own AI foundation model in March, Adobe's Firefly holds 41 percent business adoption, and Google unveiled Pics, an AI design tool inside Workspace, at I/O 2026. The code layers announcement is Figma's answer to that pressure, an argument that the design canvas should absorb code rather than be replaced by it. If engineers can prototype directly on the canvas alongside designers, the tool becomes harder to route around with a text prompt to a coding agent. Yamashita framed the feature as producing "different behaviour not just with designers, but also with engineers and PMs." Whether that behaviour materialises will depend on whether product teams actually adopt code layers as a collaboration surface or continue treating design and development as separate disciplines with a handoff in between.

Config 2026 - AI blurs the lines as Figma brings code, motion and agent workflows into its design canvas

For the entire history of computing, enterprise applications have forced us into functional silos to get things done. Book a vacation? Log into your HCM app. Create a document? Go to your word processor. Write some code? Fire up your code editor. Today, that's no longer true, thanks to a combination of increasingly sophisticated browser technologies and the leveling effect of AI. There was a powerful demonstration of this trend during the keynote at last week's annual Config conference, when digital design vendor Figma unveiled the ability to work with code from within its flagship design canvas. Loredana Crisan, Figma's Chief Design Officer, puts this capability into context: We're calling this Code Layers, and for the first time, basically, design and code can live in one space, side-by-side. You can generate code from a design, you can prompt for it directly with agents, and you can import it from a repository in your GitHub. Once it's on the canvas, teams can explore and build with it, just like they would with design. This is how code becomes a creative material. With this approach, design and code are no longer a trade-off. You can move fluidly between them. There were plenty more breakthroughs announced at the event -- adding complex shading effects, perspective depth, full-motion animation and generative workflows to the canvas -- each significant in themselves from a design point of view. But it was the obliteration of the historical divide between design and code that truly brought home the extent to which today's technology is blurring the barriers that have traditionally separated enterprise processes. Figma's customers design many of today's familiar applications, websites and digital tools, from Airbnb, Netflix and Uber, to Accenture, Google and Microsoft. Bringing together the separate activities of design and coding into a single canvas cuts out all the back-and-forth and miscommunication that occurs when developers and designers work in separate silos, while enabling much more experimentation and testing at the ideation stage. Collaboration baked in Figma takes this even further by baking team collaboration into its platform. This is not just about designers being able to work directly with code instead of handing off tasks to developers and waiting for the results to come back. By embedding the ability to import, run and edit code in a shared design canvas, Figma enables real-time discussion between designers and developers, so that they can build with the benefit of each other's expertise and intuition. In the opening keynote, Nikolas Klein, Product Manager for Figma Make, the vendor's AI coding tool, explains the impact: While agents have made it so much easier to write thousands of lines of code, the workflows around code are not built for exploring together at all. We're working in silos. Each one of us is hundreds of prompts deep with our own agents. And then at some point we look up and we throw prototype recordings at each other, hoping that they'll inspire us, only to realize that we're not working together anymore... Designing with vectors and graphics has moved away from being done in isolation and became this beautiful collaborative activity. I believe that we will be experiencing the same shift with code. It's worth bearing this perspective of collaboration in mind when considering the other new features Figma announced last week: * Shaders -- a new set of reusable generative plug-ins bring a range of shader effects and fills, which users can customize through a conversational interface, or by adjusting the underlying controls. * Weave -- the integration of pre-built node-based workflows from Figma Weave, providing repeatable frameworks for making and editing imagery, video, audio, and 3D effects. * Motion -- a new animation timeline, based on last year's acquisition of Modyfi, provides control over a variety of animation styles applied to any element of a design. Figma's keynote demos made all of this look easy, but there's a huge amount of engineering going on under the surface to, for example, allow several designers to simultaneously view an animation running in the same canvas, or have several separate code bases running within a shared design while developers and designers exchange comments about their pros and cons. Marcel Weekes, VP of Product Engineering at Figma, tells me: The user experience is tied very closely to speed. It has to feel as if that person is literally right next to you, using the same screen, and you're almost looking at the same thing. But it is really a challenge, and we spend a lot of time and effort working through that. We have to keep it very simple, actually, in order to leverage the same multiplayer primitives that we have for Figma Design that we bring across to Slides, so that we can leverage it again on Make, as an example. The interfaces are very simple. It's complex to make it look simple. Multiplayer AI The multiplayer capability also applies to Figma's AI agent, now generally available, and the reusable skills and context that form part of its prompts. Users can share these assets and prompts with teammates, and their conversations with agents are visible to the team by default, so that colleagues can learn from seeing what others are doing. Crisan explains why this matters: Customers tell us that AI made individual work really easy, but collective work absolutely impossible. As a result, their teams get stuck in reviews and struggle to stay on the same page as they build... We're adding the ability for designers to browse and build on each other's agent work. Maybe someone found a better way to synthesize feedback, maybe they built a workflow, or they figured out a new layout tool. Their discovery becomes your starting point, and this is the part of collaborating in Figma. Now, over time, some of these workflows become just how your team operates. This is why we're introducing skills. Skills let you encode your team's expertise directly into the agent -- essentially, you teach Figma how your team works, and this is how everyone gets smarter together. In its own use of this feature, Figma is finding that its designers value this ability to have the agent to create a repeatable process from work that they do every day and then share the results with colleagues. She adds: We've been dogfooding this in our team for a couple of months, and we've realized that now we don't necessarily just think about, 'What can I create?, but, 'What tool can I create that would give me the output that I want?' So, taken together, this creates a canvas that gets more intelligent the more you use it. My take I fear many vendors are making the mistake of viewing AI as a personal productivity tool rather than seeing the potential for it to lift the capabilities of teams and organizations as a whole. While it's harder to engineer agents and prompts that can be shared -- especially while respecting the varied permission levels of participants -- there's so much value in allowing people to learn from each other and build on their communal efforts that it's worth the extra effort. With teamwork being such a fundamental part of its DNA, there's no danger of Figma making this mistake. On the contrary, the vendor continues to stretch the envelope of what's achievable in a shared canvas, helping designers and developers build faster and better together. Over the next few days I'll be digging into the experiences of customers and Figma's approach in further stories from last week's event -- watch this space.