Note: If you’r using Sketch, you can try our version control for Sketch to collaborate on one design with more people.
How does versioning in Avocode work?
1. Add a new design version via Avocode
Drag & drop the new version of a Sketch, Adobe XD, Photoshop, Illustrator PNG, or JPEG design file directly on top of the design file (it works in the Project manager, Inspect mode and Comment mode) or click on Add new version in the side panel.
👉🏼 TIP: You can describe any version navigate between changes. Learn more.
Design files with the same name
If there is a file with the same name in the project where you’re trying to import your design, Avocode will ask you if you want to update the file, or keep both.
2. Sync the new version from the design tool.
- Sketch: Press CMD + ALT + J in Sketch to upload all artboards to Avocode.
- Adobe XD: Press CMD + ALT + E (macOS) or CTRL + ALT + E (Windows) to upload all artboards to Avocode.
- Figma: Press CMD + ALT + E (macOS) or CTRL + ALT + E (Windows) to upload all artboards to Avocode.
👉🏼 Tip: To exclude artboards from sync, add a dash or an underscore at the beginning of the Page or Artboard name.
Artboards with a same name
Artboards with same name will be synced as new versions - even if the artboard has been moved to a different Page.
- If there are more artboards with the same name, Avocode decides based on the artboard ID - the matching artboard is added as a new version and other artboards are added as new artboards (Version 1).
- Learn more about the versioning logic.
Download the version design source file
Always make sure you have switched to the correct version (see below) before you click download.
NOTE: For security reasons Guest users cannot download your source files.
Owners, Admins and Team members can download design files from:
- Design file contextual menu
- Right sidebar in the Project manager (de-selected artboards)
- Right sidebar in the Project manager (selected artboards)
- Inspect mode
NOTE: Figma files cannot be downloaded from Avocode. Instead, there is an option to "View in Figma" which opens the respective file in Figma.
NOTE: You can also download Sketch design versions that were synced to Avocode via the plugin option: "Sync Selected Artboards."
Switch between design versions in the Project manager
By default, you always see the latest version of the design file. You can switch between version states only in Sketch, Adobe XD, and Figma design files. Photoshop, PNG & JPEG files are always shown as the latest version and you can switch between their versions only in the Inspect mode and the Comment mode.
Switch between design versions in the Inspect mode
Next to the name breadcrumbs click on the V1 button.
You'll see a list of versions chronologically ordered from the bottom to the top, timestamp and name of the person who added the version.
Click on any version in the list.
Switch between design versions in the Comment mode
a) Use the version slider
At the bottom of the Design view you'll see a simple slider. Click on specific points in time or drag the slider to switch between design versions
NOTE: Versions are listed chronologically from the left to the right side.
b) Use the version switcher
NOTE: If you share a design public link with anyone outside your team, they will be able to switch between design versions - even on mobile devices.
- In order to Comment they need to use the desktop browser or Avocode desktop app.
- In order to Inspect the design, they will have to request invitation to your team.
👉🏼 TIP: It's best to solve old Comments from previous versions so they don't appear on a new version (which could have a different layout and the Annotation dot would therefore appear elsewhere). If you open the previous version, you can see all the comments, that were solved on this particular version.
- How to add a new design version in Avocode?
- Describe design files and design version changes in Avocode
- Edit Sketch designs directly from Avocode desktop app