🚧 Dev Mode is currently in open beta
Beta features can change during the beta period. You may experience bugs or performance issues during this time. Learn more about beta features →
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.
- Deselect all objects on the canvas.
- Select an option from the Language dropdown:
- CSS (Web)
- SwiftUI or UIKit (iOS)
- Compose or XML (Android).
- 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.
- In the top-right of the Code section, select a language from the dropdown.
- 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:
- Select an object on the canvas.
- In the Code section of the Inspect panel, click [inspect settings icon] Inspect settings next to the language dropdown.
- Select Set unit scale…
- Depending on the unit preference, enter or select the scale in the Unit scale modal.
- 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.
Tip: You can extend the functionality of code snippets with plugins or create custom code snippets for development using Figma’s Plugin API.
Copy code snippets
You can copy a code snippet and transfer it to a text editor. To copy a code snippet:
- Select the object you want to generate code for.
- Find the code snippet you want to copy under the Code section of the Inspect panel.
- Hover over the code snippet and click Copy in the top-right corner.