Why are we adding prototyping to Avocode?

For a long time, Avocode has been much more than a design hand-off tool. Over the years it has attracted product and design teams that do much more than just push pixels and code them - they need to collaborate and there are more jobs to be done with design files.

Adding new tools like prototyping is our response to this change - we want to enable teams using Avocode to cover more usecases in one tool.

So once you enable Prototyping in the App preferences, you can create one prototype per each Sketch, Adobe XD, or Figma file.

  • Prototypes can be accessed and edited by everyone who has access to your project in Avocode.
  • Guest users (only in the Team and Enterprise plan) can view the prototype, but cannot edit the connections.
  • For now, your prototype is always accessible only on the last version of the design file.
  • You don’t need to create any hotspots on top of the design. Thanks to Avocode design rendering you can click on any layer, layer group, or artboard and draw connections from them to other screens.
  • If you have the prototype feature enabled, you can present and click through prototypes created in Sketch, Adobe XD, Figma or inside Avocode.

Prototyping in Avocode is currently a LABS feature under development. If you stumbled upon a bug with this feature, please help us fix it by reporting it at team@avocode.com

How to create/edit prototypes?

  1. Navigate to the latest version of any Sketch, Adobe XD, or Figma file in the Avocode app.
  2. Click on "Edit in Flow" in the right sidebar.

Your design will open in a new tab on the web in a new prototyping mode.

NOTE: A lot of features like Interaction, Transition or Device frame are still under development. If you need any of them please just click in them in the right sidebar. It will help us prioritize our development.

How to connect screens and layers?

  1. Select any artboard, layer, or layer group just by clicking on it.
  2. Drag the connection to any target destination.
  3. If your file already contains some prototype connections, you can edit them too. When you save edited or new connections, they will be accessible only from Avocode (not the downloaded file).

Delete prototype connections

Select any connection by clicking on its starting point and hit Backspace on macOS or DELETE on Windows and Linux or navigate to the right sidebar and choose "None" as the destination in the dropdown

How to get back to your files in Avocode?

Either click on the Avocode icon in the top left corner or the three dot icon on the right.

How to share a prototype from Avocode?

Before you share a prototype, you need to save it.

If you want to discard the edits, just press the ESCAPE key.

Once you save it, you’ll see a SHARE button. Just click it and choose if you want to share a private or public link.

Play & present prototypes in Avocode

Make sure your prototype is saved and click on PRESENT.

Alternatively you can PRESENT prototypes straight from the Avocode Project manager.

Then you’ll be sent to the prototype presentation mode.

TIP: If you want to present the prototype on a mobile device just open the prototype share link.

How can I see where to click?

Simply click anywhere on the canvas to see clickable green hotspots.

TIP: Use arrow keys to move to the front and back in your prototype.

If you want to view the prototype without any additional interface panels, just press the FULLSCREEN button in the top right corner.

You can also define if the presentation mode on your prototype link should start from the homepage of the design.

How to get back to editing prototype or see the user flow and connections logic?

Go to MENU and click on Edit flow.

What’s on our roadmap?

  • Move screens around.
  • Create more prototypes on one file.
  • Exportable user flows.

Did this answer your question?