The design tool now runs live code on the canvas, animates natively with a keyframe timeline, and generates shader fills from a prompt. Code Layers is beta; Figma Motion is generally available.
2026-06-24 · by Moe Ameen
At its Config 2026 conference on June 24, 2026, Figma announced a wave of features that push its design canvas toward live code, native animation, and more AI. The headline additions are Code Layers, Figma Motion, AI-generated shader fills and effects, an expanded Figma agent, and generative plugins. Coverage came from Figma's own Config 2026 recap, TechCrunch, and other outlets.
Code Layers brings executable code directly onto the collaborative canvas. A design layer can be converted to an interactive code layer with a single click or prompt, and teams can duplicate code layers to explore directions, extract design frames back into editable layers, and sync changes between code and design. Figma describes it as still a multiplayer space — "you can riff, comment and iterate with all your teammates in the same file" — and Chief Product Officer Yuhki Yamashita framed it as changing "behavior not just with designers, but also with engineers and PMs." Code Layers is in beta, with Figma saying it rolls out in July 2026.
Figma Motion is a timeline-based animation system with keyframes and presets built into Figma Design, so designers no longer have to build motion in a separate tool and convert it to code. Animations can be applied to components and travel across screens, and Figma says Motion exports to CSS, JSON, React code, MP4, WebM, animated SVG, and GIF — and is MCP-compatible, so an animated frame can be passed to a coding agent. Figma Motion is generally available. Shader fills and effects are AI-generated: you describe the look you want or point to a reference image and the Figma agent builds a procedural shader, with parameters surfaced as adjustable controls. A fill acts as a new material; an effect transforms what is already in the layer. Interactive shaders were noted as coming soon pending performance work. The update also adds generative plugins — describe a tool's behavior in plain language and the agent builds a working plugin without you learning the plugin API — plus agent Skills, connectors to tools like Notion, Slack, and GitHub, and a deeper tie-in to Weave, the node-based generative workflow tool Figma acquired.
One boundary to keep clear: these are design-and-prototyping features. Figma is now far more capable at producing animated, coded, on-brand design assets, and several outlets noted the AI behind the canvas relies on third-party models. But Figma does not write social captions, keep a persona's face consistent across a campaign, schedule posts, or publish to any platform — turning a design or an exported animation into a running content feed is a separate job.
Think of Figma as the front of the pipeline and Kompozy as the rest of it. Config 2026 makes Figma a genuinely strong place to design a brand system and now to animate it — a keyframed Motion sequence exported to MP4, a shader-driven background, a coded component. What Figma still does not do is turn one of those assets into a week of on-brand posts across nine platforms. That is the exact handoff Kompozy owns. Export your animated graphic or brand visual from Figma, drop it into Kompozy as a source, and the engine builds the content around it: a Photo Post, a quote card, and a multi-slide carousel rendered pixel-exact through HyperFrames, plus text posts, a blog, and a newsletter written in your voice via the Persona Brief — each reframed per destination and scheduled across Instagram, TikTok, YouTube, LinkedIn, X, and the rest from one queue. Figma designs the asset; Kompozy makes it a campaign and ships it.
The brand-consistency parallel is worth drawing out, because it is where the two tools rhyme rather than overlap. Figma encodes your visual system in a file; Kompozy enforces it at the moment of generation — HyperFrames renders carousels and Persona Frames video to your exact styling, and Gemini face-lock keeps your persona's face identical across every avatar image and short, so the look you set in Figma holds across a whole batch of generated, published content, not just one canvas. And there is a timely content play: "Figma now animates and writes code on the canvas" is a high-intent topic this week. Feed your take into Kompozy and it fans one opinion into a blog explainer, a carousel breaking down Code Layers vs Motion vs shaders, short captioned clips, and platform-native posts — generated and scheduled in a single pass.
On June 24, 2026, Figma announced Code Layers (live, editable code on the design canvas), Figma Motion (a built-in keyframe animation timeline), AI-generated shader fills and effects, generative plugins you build by describing them, and an expanded Figma agent with Skills and connectors to tools like Notion, Slack, and GitHub.
Yes. Per Figma's Config 2026 recap, Figma Motion — a timeline-based animation system with keyframes and presets inside Figma Design — is generally available. It exports to formats including CSS, JSON, React code, MP4, WebM, animated SVG, and GIF, and is MCP-compatible so animated frames can be passed to a coding agent.
Code Layers let you bring executable code directly onto the collaborative canvas. You can convert a design layer to an interactive code layer with a click or prompt, duplicate code layers to explore options, extract frames back into editable design layers, and sync changes between code and design. Figma says it is in beta and rolling out in July 2026.
No. Figma's new features design, animate, and code assets, but it does not write social captions, keep a persona or brand voice consistent across a campaign, schedule posts, or publish to any platform. Turning a Figma design or an exported animation into scheduled multi-platform posts is a separate job — that is where a generation-and-publishing engine like Kompozy fits.