Compare changes in Dev Mode
🚧 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 →
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.
Dev Mode allows you to see when a frame or component was last edited and compare changes made at different points in its version history. Since the handoff from design to development sometimes requires multiple iterations, version history makes it easier for you to track down design changes and accurately reflect updates in production code.
Compare changes
If a frame or component has been updated since you last viewed it, you can compare its version history.
- Select a top-level frame or component.
- In the top-right of the Inspect panel, click Compare changes.
-
A
Version history
View a timeline of the file’s history, including saved and autosaved versions. Click on a previous version to compare with the current version.
-
B
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.
-
C
Overlay
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.
D
View edited layers
The history modal allows you to see how an asset's 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
- Removed: The layer was removed between the current and selected versions
Clicking on a layer in the list zooms in to the updated component in the side by side or overlay view.
E
Compare properties
When you select an edited layer, the updated properties are displayed, along with the assigned values from the previous version and the current version.