Try it out!

1

Let’s see if you can spot these differences between Design V1 and Design V2

Can you find how the following elements have changed?

  • Fill-color for the square and the rectangle
  • Gap spacing in the layout
  • Font-family and font-weight for the text
  • Content in the text

Now we’re going use Compare changes to find the differences. Compare changes opens a side-by-side comparison of the two designs. It allows you to Overlay the designs to visually compare differences. Or, you can inspect differences in code (where available) and properties.

2

To use Compare changes on Design V1 and Design V2.

  1. Open Dev Mode
  2. Hold Shift and click to select both Design V1 and Design V2 on the canvas (make sure you’re making the selection on the canvas and NOT in the sidebar).
  3. In the Inspect tab of the right sidebar, click Compare changes.
NOTE: In Compare changes, you can click on elements in the design to specifically pinpoint changes to that element. You can also drill down in the Layers panel on the left to examine change layer-by-layer.
3

If a frame or component has been updated, you can review its version history. When you click the Compare changes dropdown, click on Compare with previous versions. From there, you can select a specific version to compare with the latest one.

 

Note: Version history is displayed only when comparing a top-level frame over time.