🚧 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 →
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.
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.
View a timeline of the file’s history, including saved and autosaved versions. Click on a previous version to compare with the current version.
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.
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.
When you select an edited layer, the updated properties are displayed, along with the assigned values from the previous version and the current version.