How to open a prototype in Avocode?
NOTE: Make sure that you have imported a Sketch, XD or Figma file that really has connected screens. We only support prototypes that were imported to Avocode 3.6 and higher.
a) Play prototype from the home (starting) screen
Open a design file to see all artboards and then click the PLAY button in the top right corner.
👉🏼TIP: When your prototype has multiple home screens (only Sketch has this feature), you'll see a dropdown with the name of starting artboards.
b) Play prototype from any screen
Click the little play icon ▶️on any screen.
NOTE: The play icon is shown only on screens that are actually connected to the rest of the design file.
c) Play prototype from the Inspect/Comment mode
Whenever you're inspecting a design or commenting you can switch to the Prototype mode. Just hit the PLAY button in the top right corner.
How to navigate between connected screens?
Click on connected areas (hotspots, artboards)
When you open a prototype, click anywhere to see hotspots (highlighted with a green color). Click on the hotspots to go to connected screens.
NOTE: If the whole artboard is connected to another artboard (only Adobe XD and Figma have this feature), you can simply click anywhere on the artboard to go further.
Navigate left and right
To move between connected screens you can also use arrows that are visible if you mouse over the sides.
☝🏼TIP: In the Avocode desktop app, you can also use arrow keys ⬅️➡️.
Return to the beginning
If you'd like to return to the first screen, just click the little home icon 🏠at the bottom.
If your design has more starting screens (currently available only in Sketch), you can choose where you want to go.
Inspect or leave a comment
If you'd like to inspect any particular artboard or comment on it, just use the buttons in the bottom corner.
Exit prototype flow
When you hit the cross icon in the top right corner, you will always return to the previous state, be it Project manager, Inspect mode, or Comment mode.
☝🏼TIP: You can also use the ESCAPE key.
Share prototype link from Avocode
Avocode provides many ways how to customize the link depending on your usecase. Hit the SHARE button in the bottom right corner of the Prototype player.
☝🏼TIP: You can also get a sharing link from the Inspect mode or Comment mode.
Share a link to prototype
If you're sharing a prototype, make sure to set "OPEN LINK IN" as PROTOTYPE.
Set link privacy
Change "WHO HAS ACCESS" to either ONLY TEAM (private link) or ANYONE WITH LINK (public link).
Set prototype starting point
Depending on where you generate the sharing link that will be the beginning of the flow. This way you can share a prototype with someone and it will start exactly where you want to.
Keep prototype versions in sync
Avocode versioning systems enables you to add as many design versions of the same Sketch, XD or Figma files. When you upload a new design version that has screens connected differently than the one before, it will be added as a new version of the same file.
You can easily switch between versions using the version dropdown in the Project manager.
NOTE: When removing or updating artboards in Sketch, XD, or Figma, always make sure to check if the prototype flow makes sense and that your screens are connected the way you want them to.
Change design scale for prototypes
Please note that when you change the design scale for an artboard or the whole file, it will affect how large the design appears in the Prototype mode.