A code layer = working code sitting on the Figma canvas as a layer, right beside your frames.
Figma showed them at Config on 24 June. Clone a GitHub repo into a file, compare real options side by side, turn code back into editable layers, edit, then push to the repo.
It is the right idea. Eleven weeks later it is still a closed beta with a waitlist form on it. Motion, shaders, generative plugins and the design agent all went to open beta the same day and are in your hands. Code layers are the one thing still locked.
You cannot adopt a feature you do not have. You can adopt the habit behind it, and that habit needs nothing Figma has not already shipped.
Five moves you can make today
For each one: the promise, and the version of it you already own.
1. Stop redrawing screens that already ship
The promise: the canvas shows the real product, so nobody draws it twice.
Today: the Figma MCP server captures live UI, from production or a local server, as editable layers. The remote server is on every seat and every plan.
2. Point the canvas at the repo
The promise: clone a repo into the file and build from your real components.
Today: Code Connect maps each library component to the file that implements it. Your agent imports your button instead of inventing one.
3. Design the delta
The promise: the file holds what is changing, not a copy of what exists.
Today: nothing is stopping you. Delete the mockups of shipped screens. A drawing of something already in production is a second source of truth, and it will lose.
4. Catch drift with a command, not a review
The promise: one source, so nothing drifts.
Today: Figma's own August walkthrough asks the agent for the variables on a screen, compares them against the tokens in code, and finds the stale one. That is a check, not a meeting.
5. Search the system before you draw
The promise: reuse instead of reinvention.
Today: the agent can search your libraries for a component you already built. In that same walkthrough it turns up one from a feature the team shipped months earlier and adapts it.
Read the pitch again
Figma's chief product officer, Yuhki Yamashita, described the canvas as a place where “you don't really care about the quality of the code”. That is honest, and it tells you what code layers are for: fast, throwaway comparison of options with your team. Useful. Not a new source of truth. Teams that treat it as one will end up governing two.
Everything else from that keynote arrived on time. Motion has a timeline. Shaders publish to the Community. The agent got skills and web search. Code layers are slow precisely because they touch your repo, and Figma is right to be careful there. That is a reason to stop waiting, not a reason to wait harder.
The swap
| What you are waiting for | What is already on |
|---|---|
| The repo on the canvas | Code Connect |
| Code turned into layers | Capture of your live UI |
| One source of truth | Deleting the duplicate file |
| Nothing drifting | A variable check in the agent |
| Reuse over reinvention | Searching your own libraries |
A ten minute audit
- Open your main product file. How many frames are screens already in production?
- Pick one of them. Which is correct right now, the frame or the code?
- Check your five most reused components. Are they mapped to code?
- Ask your agent for the variables on a screen you changed last month. Do they match the repo?
- Count the patterns your team built this quarter that already existed somewhere.
Every duplicate you delete is work you stop doing twice. None of that is on a waitlist.
Get the PDF