Code Layers
A special layer type in Figma that does not directly render visual pixels but instead carries code snippets, component properties or style logic associated with adjacent layers, aiming to bridge the gap between design context and code output.
Timeline (last 90 days)
Code Layers allows the AI Agent and human developers to turn specific design layers into interactive React or CSS code, and supports two-way sync: cloning an active code repository into Figma for editing, then syncing changes back to the core codebase.
Figma's Code Layers feature has entered open public beta.
The Code Layers feature had previously been tested with some users.
Code Layers allows code logic to be embedded at the layer level, so that the design file itself carries more engineering semantics.
Code Layers makes the design file itself carry engineering semantics, for example a button layer's corner radius, spacing, and color can be mapped to CSS variables or component props.
The Code Layers public beta means the design handoff process may change; what front-end engineers receive is no longer static annotations but a layer structure with logical context.
All Facts (6)
Code Layers allows the AI Agent and human developers to turn specific design layers into interactive React or CSS code, and supports two-way sync: cloning an active code repository into Figma for editing, then syncing changes back to the core codebase.
50%UnverifiedThe Code Layers feature had previously been tested with some users.
50%UnverifiedCode Layers allows code logic to be embedded at the layer level, so that the design file itself carries more engineering semantics.
50%UnverifiedCode Layers makes the design file itself carry engineering semantics, for example a button layer's corner radius, spacing, and color can be mapped to CSS variables or component props.
50%UnverifiedFigma's Code Layers feature has entered open public beta.
50%UnverifiedThe Code Layers public beta means the design handoff process may change; what front-end engineers receive is no longer static annotations but a layer structure with logical context.
50%