At Config 2026, Figma introduced code layers to the canvas, allowing users to create custom AI plugins.
TL;DR: At its Config 2026 conference, Figma introduced code layers, native animations, AI shader effects, custom AI skills, and prompt-built plugins.
During the opening keynote of its Config 2026 conference on Wednesday, Figma announced code layers, a feature that integrates executable code directly into the collaborative design canvas. Teams can now clone repositories and transfer code flows into design layers for testing, streamlining a handoff process that has characterized the design-to-development workflow for over a decade.
This announcement also included native animation and motion support, AI-generated shader effects, new AI capabilities for Figma's design assistant, and the ability to create custom plugins using text prompts. The updates were revealed at the Moscone Center in San Francisco, where in-person tickets had sold out prior to the three-day event.
Chief product officer Yuhki Yamashita explained that code layers aim to transform collaboration among designers, product managers, and engineers. He shared with TechCrunch that the multiplayer canvas allows teams exploring new ideas to focus less on code quality. As he noted, the spatial format facilitates iteration without the need for writing production-ready code.
The code layer feature operates within Figma Sites and incorporates custom React code. Users can convert components to code layers, interact with AI chat for building and modifying them, or edit directly in Figma’s code composer. The system supports npm packages, including motion libraries and 3D frameworks, allowing for interactive elements, from dropdown menus to shader effects, without leaving the canvas.
Figma has also included built-in support for animations, transitions, and 3D transformations. Previously, designers had to create motion in external software and convert it into code that Figma could interpret. This update removes that step, enabling designers to create and preview animations directly in their design files while also introducing AI-generated shader fills and effects via prompts.
The company is enhancing its integration with Figma Weave, developed from the acquisition of the node-based AI media tool Weavy last October. Figma introduced its own AI design agent last month, and the updates to Config now extend this agent's functionality. Users can create repeatable skills through text prompts for the AI assistant to carry out and can connect external tools like Notion, Granola, Excel, and GitHub for added context.
A separate update, expected later this year, will allow users to generate Weavy workflows within Figma, further tightening the link between the two platforms. The Weavy acquisition brought a canvas for integrating multiple AI models with professional editing tools, which has so far functioned as a standalone product.
Additionally, Figma is implementing prompt-based custom plugin creation. Users can describe desired functionalities, such as a layout generator or vector path tracer, and Figma will build the corresponding plugin. This feature enhances the existing plugin ecosystem, which already includes thousands of community-created tools, making it easier for users to create plugins through simple text descriptions instead of coding.
These updates come at a challenging time for Figma’s business. The company's revenue for the first quarter increased by 46 percent year over year to $333 million, with a net dollar retention rate of 139 percent, the highest in over two years. However, AI coding tools like OpenAI’s Codex are transitioning from developer support into enterprise platforms that can create interfaces via text prompts, posing a risk of bypassing design tools entirely.
Figma went public in July 2025 with a valuation of $20 billion. Since then, its stock has decreased by approximately 79 percent, currently trading at around $24, as investors question the ability of traditional design software to compete against AI-native rivals.
The competitive landscape is expansive. In March, Canva introduced its own AI foundation model, Adobe’s Firefly has a 41 percent business adoption rate, and Google revealed Pics, an AI design tool within Workspace, during I/O 2026.
The introduction of code layers represents Figma's response to this competition, making the case that the design canvas should incorporate code rather than be supplanted by it. If engineers can prototype directly on the canvas alongside designers, it becomes more difficult to circumvent the tool with text prompts directed at a coding agent.
Yamashita framed the feature as fostering “different behavior not just with designers, but also with engineers and PMs.” Whether this behavior will take shape will depend on whether product teams choose to adopt code layers as a collaborative platform or continue to view design and development as distinct fields separated by a handoff.
Other articles
At Config 2026, Figma introduced code layers to the canvas, allowing users to create custom AI plugins.
At Config 2026, Figma introduced code layers, animation functionality, AI-generated shaders, personalized skills for its AI assistant, and enhanced Weavy integration.
