☝️ Version Diff is available on:

Version Diff helps compare what's changed between component versions and visually spotlights those differences both on the component and in the Inspect panel. This means you will not miss changes anymore, even if it's a subtle pixel height update or radius adjustment.

If you have multiple versions of your component, you'll see the "Show differences" option under the Version History section on the left panel in the component's detail view. When you click on it, Zeplin highlights changes so that you can compare the selected version with the previous one.

If a layer is newly added to this version of the component, Zeplin highlights it as "green." If a layer already exists in the previous version, but there are changes on it, it will be highlighted as "yellow."

When you click on the highlighted layer, you can see what exactly has changed on the right panel with yellow or green notices.

If a layer has an entirely new value or property or is exported as an asset, Zeplin highlights the new value in green on the right panel. If there is an update on an existing value, it highlights the updated value in yellow on the right panel. You can hover over these highlighted values to see the previous values of the layers. If there is any removed layer, you'll also notice -1 in red under the selected version on the left panel.

💁‍♀️ If there's no change in a selected component version compared to the previous one, the Version History panel will specify this.

Related articles: