1. Home
  2. Guides & Tutorials
  3. How to Use Toggle Buttons

How to Use Toggle Buttons

In this short tutorial we’ll show you how toggles designed in Figma can be made functional in weave.ly.

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!

Designing Your Toggle in Figma

To create a toggle in weave.ly your Figma design will need to contain two things:

  1. A set of two component variants that define how your toggle looks like in its “on” state and in its “off” state.
  2. At least one instance of that component will need to be present somewhere in your design

Weave.ly does not place any restrictions on how your toggle should be designed (i.e. the kinds of Figma layers you can use). Figure 1 shows three examples of toggle variants which can be made functional using weave.ly. The leftmost variants are a “traditional” switch design. But using weave.ly you can turn any component with, at least, two variants into a toggle (e.g. simple rectangles or even pure text).

A screenshot of toggle variants in Figma.
Figure 1: Designing variants for different styles of toggles

Once you have designed the necessary components for your toggle you’ll need to create an instance of that component and integrate it to your application’s design. Figure 2 showcases a basic example of this. We created instances of a switch, rectangle and text component in the large white frame.

A screenshot of toggle variants being used in Figma
Figure 2: Creating instances of the toggle variants

Tagging Your Toggle in the Plugin

When you select an instance of a component which has at least 2 variants you’ll be able to tag it with the toggle functionality in the plugin. Figure 3 showcases this for our example.

A screenshot of the weave.ly plugin being used in Figma to tag a component instance with the toggle functionality
Figure 3: Tagging a component instance with the toggle functionality

You’ll notice that once you apply the tag you can further configure your toggle within the plugin. More specifically, you can select which variant should be used in its “off” state and which should be used in its “on” state (i.e. using the pill buttons and accompanying drop downs). Figure 4 showcases this for our example.

A screenshot of configuring a component instance's weave.ly functionality in Figma
Figure 4: Configuring which variants to use in the toggle’s “on” and “off” states

Toggling … but Toggling What?

You can already go ahead and publish your design to see how your toggle works in your weave.ly web app. However, a toggle isn’t very useful unless it’s used to toggle something. You can configure what happens when your toggle is on or off in the weave.ly flow editor.

A toggle block in the weave.ly flow editor provides on and of ports which enable you to connect them to any other block in weave.ly (see Figure 5). As such you can use toggles to show and hide elements, trigger the reading of user input, etc.

Figure 5: Using toggles in the weave.ly flow editor

How it Looks Like in a Browser

Figure 6 showcases the final result once the example is published as a weave.ly web application.

A GIF showing how toggles designed in Figma look like in a browser once the weave.ly platform has turned them into a web application
Figure 6: Our toggles in action in the browser
Updated on January 17, 2023

Was this article helpful?

Related Articles