Code snippets appear in Dev Mode’s Inspect panel when an object is selected on the canvas. The Code section provides relevant component details and generates code based on the selection and language preferences set in Inspect:

• When text is selected, the Code section displays a typographic preview, followed by layout, typography, and content information.
• With all other selections, a box model is displayed with margin, border, and padding details, along with layout and style information.

Set language preferences

You can set your preferred language and unit for code snippets under Code settings in the Inspect panel. Language and unit settings will apply to all generated code snippets for objects selected on the canvas.

1. Deselect all objects on the canvas.
2. Select an option from the Language dropdown:
   • CSS (Web)
   • SwiftUI or UIKit (iOS)
   • Compose or XML (Android).
3. From the Unit dropdown, select a unit. Available units depend on the language selection.

Change language and unit preferences

Once you have an object selected, you can change your language and unit selection in the Code section of the Inspect panel.

1. In the top-right of the Code section, select a language from the dropdown.
2. Click Inspect settings and select a unit from the dropdown.

Set unit scale

Unit scaling allows you to set unit dimensions relative to a specified size. For example, you can set a root font size for CSS rems, or set a scale factor for scaling dimensions into iOS points.

To adjust the unit scale for your selected language and unit:

1. Select an object on the canvas.
2. In the Code section of the Inspect panel, click [inspect settings icon] Inspect settings next to the language dropdown.
3. Select Set unit scale…
4. Depending on the unit preference, enter or select the scale in the Unit scale modal.
5. Click .

View code snippets

Code snippets are generated when you select an object on the canvas while in Dev Mode. The Code section displays relevant information depending on the type of object and language selected.

While most objects on the canvas will generate similar code snippets, text selections vary slightly. The Code section will display a typographic view instead of a box model, followed by code snippets of relevant typography information.

Any variables assigned to a selected object will also appear in the code snippet. Code syntax allows you to represent variables in code using valid variable names to support a seamless handoff experience.

Learn more about code syntax and variables in Figma design ->

Copy code snippets

You can copy a code snippet and transfer it to a text editor. To copy a code snippet:

1. Select the object you want to generate code for.
2. Find the code snippet you want to copy under the Code section of the Inspect panel.
3. Hover over the code snippet and click Copy in the top-right corner.

Code Connect

Code Connect is a tool for design systems and engineering teams to bring component code into Dev Mode. When inspecting a component with connected code snippets, developers will see design system code from their libraries instead of auto-generated code.

Code Connect builds on the Figma API and is fully customizable to support multiple design systems, products, and languages.

Check out the Code Connect hub to learn how to sync custom code snippets to components →

Once Code Connect is implemented, your Dev Mode code snippets will say connected and will show snippets from your organization’s library.