🚧 Dev Mode is out of beta
Dev Mode in Figma gives developers everything they need to transform designs into code. Starting January 31, Dev Mode will require a paid seat to access.
Dev Mode allows developers to see when a frame or component was last edited and compare changes made at different points in its version history. Since the handoff between design and development can be iterative, being able to compare changes and version history brings clarity to the process. With compare changes, you can always track the latest updates and keep production code accurate.
If a frame or component has been updated since you last viewed it, you can compare its version history. You can also compare detached components, or instances with design overrides against the base component.
- Select a top-level frame or component.
Tip: Hold Shift and click to select two components on the canvas to compare them with each other.
- In the Inspect tab of the right sidebar, click Compare changes.
View a timeline of the file’s history, including saved and autosaved versions. Click on a previous version to compare with the current version. Version history is only shown when comparing a top-level frame over time.
View edited layers
Under Layers, you can view how an asset’s individual layers have changed over time. Layer changes are labeled as one of the following:
- Edited: The layer was edited between the current and selected versions
- Added: The layer was added between the current and selected versions
- Deleted: The layer was deleted between the current and selected versions
Clicking on a layer in the list zooms in to the selected layer in the side by side or overlay view.
Side by side
A side-by-side view of the selected version and current version of an asset. Adjust the modal’s zoom settings using the zoom in and zoom out buttons on the right.
An overlay view of the current frame version on top of the selected version is helpful for making smaller edits stand out. Use the slider on the right to adjust the current frame’s transparency or click to toggle its visibility. Adjust the modal’s zoom settings using the zoom in and zoom out buttons on the right.
When you select an edited layer, you can view updated code between the previous version and the current version. This is helpful for making sure your codebase is aligned with the most recent designs.
Use the dropdown to select your preferred language for the code panel, and click to select your preferred unit.
When you select an edited layer, the updated properties are displayed, along with the assigned values from the previous version and the current version.