Guide to Dev Mode
đźš§Â Dev Mode is currently in open beta
Dev Mode introduces a suite of features focused just for developers’ needs, including moving some features from the previous Inspect panel to Dev Mode.
Dev Mode is currently in open beta and is free for everyone to use through the end of 2023. Starting in 2024, access to Dev Mode will require a paid seat.
The ability to copy values, generate code, and export assets will remain free and accessible from Design Mode as a viewer. These features were previously in the Inspect panel of a design file, but are now incorporated into the updated right sidebar view-only experience under Properties and Export →
Accessing redlines and measuring distances between objects will also remain free and accessible from either Dev Mode or as a viewer in Design Mode.
These features might change during the beta period. You may experience bugs or performance issues during this time.
Before you Start
Who can use this feature
Supported on any team or plan
Anyone with can view access can view designs in Dev Mode.
Anyone with can view access can add developer resource links to components.
Anyone with can edit access can create and mark sections as ready for development.
Â
Dev Mode in Figma design gives developers everything they need to navigate design files and transform designs into code. With Dev Mode, designers and developers stay on the same page, making sure important details aren’t lost in the handoff process.
Use Dev Mode to:
- View and copy properties, values, and code from design components
- See what’s changed since you last viewed a file by comparing frame versions
- Inspect and navigate design files with simple interactions that surface important layer information
- Quickly find designs ready for development with section statuses
- Streamline your workflow with developer-focused integrations, like Jira, Storybook and GitHub
- Add relevant links and developer resources to components
Enter Dev Mode
Dev Mode is a developer-focused interface for inspecting and navigating designs. You can access Dev Mode in any Figma design file. To toggle between Design Mode and Dev Mode:
- Open a Figma design file.
- Click the Dev Mode toggle at the top of the page or use the keyboard shortcut ShiftD.
Note: You are automatically dropped into Dev Mode when you open a Figma design file with a Dev Mode link.
Navigate designs
In Dev Mode, the left sidebar provides an easy way to move between designs marked as ready for development.
-
A
View which assets are ready for development
The Dev Mode icon indicates which pages contain frames, components, instances, and sections marked ready for dev. Objects on the canvas marked as ready appear under Ready for development in the Dev Mode layers panel.
To mark an asset as ready for dev:
- While in Dev Mode, select a frame, component, instance, or section.
- Click Mark as ready for dev in the toolbar.
-
B
Know when a frame was last edited
You can see when a frame was last edited under the frame’s name in the navigation panel.
-
C
Navigate frames and layers
In Design Mode, anyone can group related content into sections and mark sections as ready for development. Dev Mode will prioritize content in a section. Any content outside of a section is still visible in the left sidebar, but is collapsed by default.
Click a frame in the left sidebar to center it on the canvas. Select the frame on the canvas to view the layers nested inside it. Selecting a frame changes the navigation panel to a layers panel and only shows the layers for the currently selected top-level frame.
Inspect designs
The inspect panel displays design specs and relevant component information needed to understand a design and transform it into code.
-
A
Compare design changes
If changes have been made since you last viewed a file, Compare changes will appear next to the layer information in the inspect panel. Click the link to open the frame history modal where you can compare current version to previous versions of the design.
You can also compare a detached component to previous versions, and to the main component it was once linked to. You can clear its detachment history to avoid seeing information about its original main component.
Compare changes in Dev Mode -> -
B
Add external links and resources for developers
Both designers and developers can add links to external resources that may help with the implementation of a component. This can include GitHub, Jira, and Storybook links, as well as VS Code links that can be used with the Figma for VS Code extension. Dev resources added to components propagate to all the instances of that component.
-
C
Build faster with customizable code snippets
Click any object on the canvas while in Dev Mode to populate the Code section in the inspect panel. Depending on what’s selected, a typographic preview or box model is displayed, followed by autogenerated code snippets for the object.
You can select the language and units to view in the canvas and generated code, as well as extend the functionality of code snippets. To change your language and unit selection:
- In the top-right of the Code section, select a language from the dropdown.
- Click Inspect settings and select a unit from the dropdown.
-
D
View layer names and types
The selected layer’s name is displayed at the top of the inspect panel, along with its layer type (component, instance, frame, text, etc.). You can also see when the layer was last updated.
-
E
Try component variations in the component playground
When selecting a component or instance, you’ll see a component preview, a link to the main component, as well as any links to relevant documentation and dev resources.
The component playground appears in the inspect panel when a component instance is selected. Use the playground to experiment with the component’s different properties without changing the actual design.
-
F
View applied styles
View styles and variables applied to the selected layer.
-
G
Download assets
Dev Mode can automatically detect icons and present them as downloadable assets for developers. If you want to inspect an individual vector layer contained in an icon, you can turn off automatic icon detection:
- Click Main menu in the toolbar
- Hover over View in the dropdown
- Deselect Automatically detect icons
Assets will also allow you to download GIF image and MP4 video nodes.
-
E
Export
You can apply export settings to layers to define the format and any other export settings. Figma supports the following export formats: PNG, JPG, SVG, and PDF. Learn more about exports in Figma →
Use Dev Mode extensions
Dev Mode plugins improve the development workflow by automating tasks, adding new functionality, and integrating tools used for documentation and communication.
- Stay on track with development tasks by syncing with Jira across Figma, FigJam and Dev Mode
The Plugins tab in Dev Mode shows your recently used plugins, as well as recommended plugins from the Figma Community.
Learn how to use plugins in files →
Check out the Plugins for Dev Mode playground file for a more hands-on approach ->
Figma for VS Code
Figma for VS Code lets you navigate and inspect design files, collaborate with designers, track design changes, and speed up design implementation - all without leaving your text editor. Improve developer productivity by eliminating the context switching and busy work needed to turn designs into code.
- See and respond to comments and activity in real time
- Get code suggestions based on designs
- Link code files to design components