Code on the Figma Canvas | Figma Blog (opens in new tab)

Figma is introducing code layers, making interactive code a collaborative object directly on the Figma canvas. Teams can generate, import, compare, edit, and convert code and designs in both directions, bringing designers and developers into one shared workflow. The feature aims to make experimentation and design-to-code iteration more visual, collaborative, and accessible.

Creating and Sharing Code on the Canvas

• Users can add a code layer from Figma Design, convert an existing frame into code, or ask the Figma agent to generate an implementation.
• Projects can begin from templates, natural-language prompts, imported GitHub repositories, or uploaded local folders.
• Code generated in Figma Make can be brought into Figma Design as a code layer.
• Interactive code becomes part of the shared file, allowing teammates to inspect, comment on, and refine it together.

Exploring Multiple Alternatives

• Code layers work like duplicated design frames, allowing teams to explore several working alternatives side by side.
• Designers can move, resize, and adjust elements while seeing the corresponding code update immediately.
• Prompts can generate new versions while preserving the original.
• Teammates can collaborate on the same code layer through comments and additional prompts.

Moving Between Code and Design

• The Extract designs feature converts a code layer’s current state into editable Figma layers.
• Teams can extract a single screen, a particular state, or an entire user flow.
• Design edits can then be applied back to the code layer, enabling fluid movement between visual design and implementation.

Editing and Shipping Code

• Users can open the code editor, annotate desired changes, ask the agent to implement them, or edit the code manually.
• Once approved, the updated implementation can be converted back into a code layer and pushed to the project repository.
• The resulting changes remain visible to the wider team on the Figma canvas.

Availability

• Code layers are rolling out in closed beta over the following weeks.
• Interested users can request early access through Figma’s Config beta sign-up.

Figma’s code layers are intended to make the canvas a shared space for designing, testing, and refining real interfaces. Teams interested in combining visual collaboration with AI-assisted development can request beta access and evaluate the workflow against their existing design and repository processes.