Why are we adding prototyping to Avocode?

For a long time, Avocode is much more than a design hand-off tool. Over the years is has attracted product and design teams that do much more than 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 Company 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 "Flow" in the right sidebar.

Your design will open in a new tab in the Flow 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 close the tab or open the hamburger menu in the top left corner and select Back to designs.

How to share a prototype from Avocode?

Simply clic on the SHARE button in the top right corner and choose whether you want to share a public or a private link.

Play & present prototypes in Avocode

Click on the PLAY icon in the top right corner.

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 without any menu options.

What’s on our roadmap?

  • Move screens around.
  • Create more prototypes on one file.
  • Exportable user flows.
Did this answer your question?