Download the interactive tutorial if you want to build the following steps yourself.
Section 2 of that Figma file contains the relevant wireframes.
Don’t feel like reading through the tutorial? Don’t worry we got you covered. Sit back, relax and let us run you through it in this video!
Not Reinventing the Wheel
Weave.ly will automatically consider interactions you create via Figma’s prototyping functionality (e.g. opening overlays, navigating between pages, etc.). In other words, you can still specify the flow between screens from within Figma as you’re used to.
Interactions in the Plugin
Figma interactions can be viewed, edited and added from within the weave.ly plugin as well. Select any Figma layer and open the “Interactions” tab. All interactions edited from within the plugin will automatically be synced with Figma and vice versa.
Interactions in the Editor
Figma Interactions are represented as black, circular blocks in the editor. Black links represent the happening of a particular interaction or event.
Example, Step 1: Figma Interactions
Say you have two screens, with a button click interaction on the first screen navigating to the second screen as shown below.
You could either create this using Figma’s blue links or by selecting the button and tagging the interaction from within the weave.ly plugin.
Example, Step 2: Interactions in the weave.ly Editor
Two interaction blocks will be added to the editor canvas in our example: One which represents the button’s click interaction and another which represents navigating to the second frame. These blocks and their link are like any other in weave.ly. In other words, you can edit these to implement more advanced functionalities, which is the topic of the next tutorial.