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:
- A set of two component variants that define how your toggle looks like in its “on” state and in its “off” state.
- 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). The figure below 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).
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. The figure below showcases a basic example of this. We created instances of a switch, rectangle and text component in the large white frame.
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. The figure below showcases this for our example.
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). The next figure showcases this for our example.
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 below). As such you can use toggles to show and hide elements, trigger the reading of user input, etc.
How it Looks Like in a Browser
The gif below showcases the final result once the example is published as a weave.ly web application.
