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

To enable this feature make sure to check "Enable prototype tool" in App preferences.

NOTE: You can create one prototype per Sketch, XD, or Figma file. It can be accessed and edited by everyone who has access to your project in Avocode. Guest users can view the prototype, but cannot edit the connections.

How to rapid-prototype user flows in Avocode?

  1. Navigate to any Sketch, Adobe XD, or Figma file in the Avocode app. 
  2. Click on "Create prototype" in the right sidebar.

👉🏼TIP: If you need to view or edit this prototype at any time, click on the "Create prototype button" again.

3. You’ll see the whole design file with all artboards in a new view at prototype.avocode.com. 👋🏼

Connect screens and layers

👀Now:

  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).

🔮Coming Soon: Move artboards around.

Delete connections

  1. Select any connection by clicking on its starting point.
  2. Navigate to the right sidebar and choose "None" as the destination in the dropdown.

How to share a prototype created in Avocode?

👀 Now: Only private access. Just copy the URL and send it to your colleagues with access to this Avocode project.
🔮Coming Soon: Share a public link with the option to play the prototype or see the birds-eye view of all connections.

How to play & present prototypes in Avocode?

👀Now: Currently, you can only play Sketch, Figma, and XD prototypes created outside Avocode. Learn more. For prototypes created in Avocode, you can only view the connection flow.

🔮Coming soon: You’ll be able to present & play any prototype (both created inside and outside Avocode app) in a new player that also works on mobile.

How to access all created prototypes

  1. Click on "Prototype tool (LABS)" in the Avocode app or go to https://prototype.avocode.com/

2. On your right, you’ll see the list of all recently created prototypes. Click on one to edit it.

How are prototypes connected to file versions?

👀Now: Currently, new and edited connections are saved per version. When you update the file in Avocode, the prototype will not be available on the latest version. You have to navigate to the version where you created the prototype to view it or edit it.

🔮Coming soon: Connections will always be carried over to the latest version.

What’s on our roadmap?

  • Move screens around.
  • Play prototypes created in Avocode (also on mobile)
  • Create more prototypes on one file.

Did this answer your question?