1. Home
  2. Guides & Tutorials
  3. How to Show and Hide Elements

How to Show and Hide Elements

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. Figure 1 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.

A screenshot of Figma showing a toggle and the weave.ly logo
Figure 1: Example used to explain dynamic visibility 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.

Screenshot of Figma with the weave.ly plugin opened showing how a logo's visibility can be tagged
Figure 2: Tagging the weave.ly logo with the “Toggle Visibility” functionality

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 Figure 3). By default the layer will be hidden until an interaction triggers it to become visible.

Screenshot of Figma with the weave.ly plugin opened showing how a you can configure a layer to start as hidden or not
Figure 3: Configuring whether we want the logo to be visible on application start

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. Figure 4 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.

Screenshot of the weave.ly flow editor showing how the toggle is connected to the hideable logo
Figure 4: Linking our toggle button to determine when the logo should be hidden/visible

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 Figure 5 auto-layout hasn’t been used, whenever the logo disappears the space is simply left blank.

A GIF showing how a toggle button hides and shows the weave.ly logo
Figure 5: Our example in practice, without using auto-layout

In Figure 6 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.

A GIF showing how a toggle button hides and shows the weave.ly logo
Figure 6: Our example in practice, using auto-layout
Updated on January 17, 2023

Was this article helpful?

Related Articles