Sympli Handoff’s visual diff tool helps designers, developers and other stakeholders to compare older versions of designs to newer ones, to see what changed. Teams can use visual diff to discuss changes or simply implement them more easily.

Let’s take a look.

Accessing Visual Diff

To access the visual diff tool, navigate to a specific screen within a design and then click on the “Changes” tab.

Choosing Versions to Compare

Right away you’ll see two versions of the design side-by-side, with the latest version on the right and the version that came before it on the left. To switch to a different version, click on the version’s name and then choose a different version from the drop-down list.

Spotting Visual Differences

Differences between the two versions are highlighted by a dashed, yellow border (on the latest version) to make them easier to spot. After clicking on a layer that has changes, the inspector below will display its “Layer info” and list the specific styles that have been changed.

To copy new styles to the clipboard (for faster development), click the copy code to clipboard icon.

Design System Features in Visual Diff

So that you don’t need to navigate to the “Design Systems” tab to accomplish certain tasks, some design system features are available within the “Changes” tab.

To rename a design token (if a style is associated with one), click on the design token name.

To add a style to an existing design system, click on the “Manage Design System” color drop icon.

Significantly Reduce Development Times With Sympli

When taking an iterative approach to design/development, whether those are quick iterations with only a few changes or less frequent iterations with significant changes, it can be difficult for developers to see what’s changed since the latest version.

Visual diff not only highlights these changes, it also translates the styles to code without having to switch to the “Specs” tab.

Overall it’s the fastest and most convenient way to track and ship updates.