How to open a prototype in Avocode?
NOTE: Make sure that you have imported a Sketch, XD or Figma file that 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 PRESENT button in the right sidebar.
b) 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 ⬅️➡️.
Leave a comment
If you'd like to comment on any particular design, just click on the COMMENT option in the top navigation bar.
Exit prototype flow
In order to exit the Flow tool, either close the tab, or open up the hamburger menu and click on Back to designs.
Share prototype link from Avocode
You can copy a Private or a Public link directly from the prototype player view. Just hit the SHARE button in the top right corner.
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.