The flow editor is one big canvas which is used to configure your prototype.
You’ll notice that the canvas overlays round or square blocks over your design taken from Figma. There are two important things to note:
- This is not a static “import” from your design, it synchronises automatically when you press Save in the plugin
- The layout of these blocks and the designs does not impact functionality whatsoever. Feel free to move them around to your liking!
Input & Output
Each weave.ly block represents some functionality (e.g. a map, an input field, etc.). These blocks can have inputs, outputs or both. These are indicated by the smaller squares at the sides of the blocks, which we call ports.
Basically, a block can take some data as input, performs a certain action and output the result.
By linking blocks together you configure the functionality of your prototype. You can do this by clicking on the output port of one block and connecting it with the input port of another
Colors & Datatypes
Colors indicate the type of data this is produced or consumed by a given block.
The weave.ly editor automatically prohibits you from connecting blocks that are incompatible (e.g. trying to connect a block producing numerical values with a block consuming textual values).
A single exception is made for triggers, as anything can be a trigger. Some blocks generate triggers, but any output of a block can be considered a trigger. In other words, you can always connect a block to a block expecting a trigger as input.
Some blocks have optional ports. These are indicated by the fact that the port only shows a coloured outline instead of being fully coloured.
For example, this is the case for input blocks which have optional trigger ports. If this port isn’t connected the block will produce data every time the user types something (i.e. on every keystroke). If the port is connected the block will only produce the text provided by the user when a trigger is received from the input port.
Effect ports are provided at the top of the block (and also be optional). Effect ports accept input that will cause an ‘effect’ rather than trigger the block’s logic to generate output.
Examples of effects include:
- Setting a default value in an input field
- Starting / stopping the camera of a device
Some blocks provide configuration options which enable you to customise them. You can access these configuration by clicking on the block in the editor. For example, by clicking on the Map block you can specify what map provider to use (i.e. Google Maps, Open Street Maps, etc.)
Frontend vs Logic Blocks
When you tag functionality in the Figma plugin the editor will automatically generate the right block for you. These blocks are inherently linked to frontend elements and can only be created by tagging layers in Figma. You’ll notice that you cannot select them from the list of blocks on the left in the editor
Other blocks are unrelated to any frontend element and can be created by simply dragging them onto the editor canvas from the block menu on the left. For example, this is the case for the CurrentLocation block which gets the users’ location coordinates as soon as a trigger is received