Download the interactive tutorial if you want to build the following steps yourself.
Section 6 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!
Variables: Values in Boxes
If you have some programming experience, or if you’ve used tools like Axure before the concept of variables will be familiar to you (and you can skip ahead to the next section). If variables don’t ring a bell stick around for a short explanation!
You can see a variable as a box in which you can store and retrieve bits of information (i.e. setting and getting a variable as the cool kids say). In contract to weave.ly’s tables variables contain single pieces of information (e.g. a number, a piece of text inputted by a user, etc.). Variables forget whatever they contained whenever the user refreshes a prototype.
Variables in weave.ly
Weave.ly enables you to interact with your variables through two blocks: Variable Set and Variable Get to respectively set and get the value of variables. You can manage your variables (i.e. create or delete) through the configuration panel of either of these blocks as shown below.
Example
In order to explain the usage of variables in more detail we’ll be using an example. You can see the wireframes for this example below. In a nutshell, when the user presses the “Submit” button we’ll store the provided name in a variable and navigate to the second screen. Whenever the user presses the “Reveal Name” button on the second screen we’ll replace the “Anonymous” label with whatever value the variable contains.
Example, Step 1: Creating our Variable
We’ll first need to create a variable that will hold the user’s name, and will therefore by of type Text.
Example, Step 2: Setting the Variable
Now that we’ve created a variable we can set its value by connecting the input field’s output to the “VariableSet” block’s input.
Example, Step 3: Getting the Variable
By connecting the click interaction of the “Reveal Name” button to a “VariableGet” block we instruct weave.ly to read the value of our variable whenever the user presses the button. Finally, by connect the “VariableGet” block to the “TextLabel” block we set the label to the value of our variable.
