In this short tutorial we’ll show you how you can dynamically show and hide elements in your weave.ly web application.
Don’t feel like reading? Don’t worry we got you covered. Sit back, relax and let us run you through it in this video!
Example Setup
To explain you how dynamic visibility works in weave.ly we’ll be using an example. The figure below shows the example’s design in Figma. Concretely, we’ve designed a toggle button which is supposed to hide or show (depending on which state it’s in) the weave.ly logo on the right.
Check out the this tutorial for more information on using toggle’s in weave.ly.
You don’t absolutely need to use a toggle button to interact with hideable elements. Essentially any interaction can be used in weave.ly to show or hide an element. However, toggles are the best fit for our example.
Dynamically Visibility in the Plugin
Any layer in Figma can be tagged with the “Toggle Visibility” functionality in the weave.ly plugin. When you use this tag you will then be able to dynamically show or hide the tagged layer in your weave.ly web application.
Once a layer is tagged with “Toggle Visibility” you can configure whether or not the element should be visible when the web application is loaded (see the figure below). By default the layer will be hidden until an interaction triggers it to become visible.
If the element you want to show or hide is a vector or text, you’ll need to frame it and tag said frame with “Toggle Visibility”.
When to Hide, When to show?
The weave.ly flow editor allows you to determine when an element should be hidden and when it should be visible. The figure below showcases how to do this in our example. A Toggle Visibility block has two input ports: one which is going to hide the element when a trigger is received and one which is going to show the element when a trigger is received. By linking our toggle button to these ports our logo will be showed/hidden when we toggle the button.
How it Looks Like in a Browser
Using Figma’s auto-layout functionality you can determine to either let your application adapt dynamically to elements being hidden/shown or not. In the gif below auto-layout hasn’t been used, whenever the logo disappears the space is simply left blank.
In this last gif we built the exact same example, with the sole difference that we framed our toggle and logo in an auto-layout frame which specifies that all layers should be centred.
