Download the interactive tutorial if you want to build the following steps yourself.
Section 3 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!
Figma Interactions &weave.ly Blocks
Given that interactions are turned into weave.ly blocks you can add, delete or edit these directly in the editor. Amongst other things this enables you to only trigger certain interactions when particular conditions are met (e.g. after certain data is added by a user, or when an input contains a specific value).
Example: Trigger After Input
Consider the example below. Our Figma design dictates that pressing the “Submit” button navigates our prototype to the second screen. However, in our weave.ly prototype we first want to read the value from the input field and only then go to the next screen.
The starting point in the weave.ly editor is shown below. To implement the functionality we want we’ll make the link that connects the click interaction with the navigation interaction pass through the InputText block. By doing so we instruct weave.ly to first read the input field and only then navigate to the next screen.
The resulting editor looks as follows
