Figma
The collaborative interface design tool
4.9•1.6K reviews•15K followers
The collaborative interface design tool
4.9•1.6K reviews•15K followers
A collaborative design tool for creating user interfaces, mobile apps, and websites with a wide range of features, including vector editing tools, prototyping, and version control, all in a cloud-based platform.
This is the 36th launch from Figma. View more
Figma code layers
Launching today
Figma’s code layers put working code on the design canvas, next to the designs. Create one from a frame, a GitHub repo, a webpage via Chrome extension, or by asking the Figma agent. Compare options side by side, and turn a code layer’s states back into editable layers. Figma Specs add design and technical requirements on the canvas, and Payload connects data to Make. Public beta.
Free Options
Launch Team
Render: Get up to $100K in startup creditsThe fastest way to deploy and scale apps and agents
Promoted
Miro
Sketch
Canva
Adobe XD
Figma code layers put working code directly on the Figma design canvas, right next to your designs, so teams can see how a screen looks and how it behaves in one place.
Problem: Designs and code usually live in separate worlds. A static mockup can’t show how something really behaves, and checking a coded version means jumping between tools, which makes it hard for designers and developers to compare options and agree on a direction.
Solution: A code layer is an interactive, code-backed prototype that sits on the canvas like any other layer. You can start one by converting a design frame, importing a GitHub repo, capturing a website with the Figma Chrome extension, or asking the Figma agent to build it from a prompt or template.
What makes it different: Code and design stay connected in both directions. You can duplicate code layers like frames to compare options side by side, and moving or resizing elements updates the code. You can also extract a code layer’s current state, a single screen or a whole flow, back into editable Figma layers, then sync your edits to the code with one click. When you’re done, you can push the changes to your repository. Teammates can comment on and prompt the same layer in a shared file.
Key features:
Create code layers from a frame, a GitHub repo, a webpage or a prompt
Compare coded design options side by side
Prompt the agent for new versions while the original stays intact
Convert code back into editable layers, and sync edits back to the code
Edit in a code editor, then push to your repository
Figma MCP can create code layers from AI tools
Who it’s for: Designers, developers and product teams who want to explore and review real, working UI together instead of handing static files back and forth.
Figma blog post, and see the Config India recap for rollout details.