Making a toggle button in Figma is simple. All you need is to design the toggle button components and combine them as variants. In this tutorial, we will run you through the steps of making a toggle button.
1. Design the toggle button
To make a toggle button, first we need to create the toggle’s body. To do this, use the “Rectangle Tool” in the top toolbar.
From there, adjust the corner radius of your toggle button using the menu on the right. You can also add a color fill in your toggle’s design.
Now, we need to create the button that will serve as the switch of our toggle. To do this, use the “Ellipse Tool” from the toolbar.
Once done, create a copy of the button you just made and place it just beside the original button inside the toggle’s body. To do this, use the keyboard shortcuts “Ctrl+C” to copy and “Ctrl+V” to paste.
Now, create a copy of the whole toggle button by selecting it, then using the keyboard shortcuts “Ctrl+C” to copy and “Ctrl+V” to paste. Once done, place it beside the original one.
The next step is to add text to your toggle button using the “Text Tool” at the top. To do this, delete the first circle in the original toggle button, then add your text. In this case, we will add the text “ON” to indicate that the toggle button is switched on.
Do the same for the switched off mode by, first deleting the second circle and adding the text “OFF” to the toggle button.
In addition, for the switched off mode, change the color of the toggle button to gray.
2. Combine the toggle buttons as components
For the next step, select the first toggle button (ON) and click on the “Create component” option at the upper-middle portion of the toolbar.
Do the same for the second toggle button (OFF).
You should now see the created components on the left menu under the Layers section.
You can also rename the components for easier distinction. Just double-click on the component’s name and type in your preferred name.
Once done, select the “ON” and “OFF” components and click on the “Combine as variants” button on the right menu under the Design tab.
3. Set up the connections in the toggle button prototype
Now we need to set up the connections between the toggle components. To do this, click on the “Prototype” tab and hover over the “ON” component of the toggle button until a plus icon appears.
Connect the plus icon to the “OFF” component of the toggle button.
In the “Interaction details” of the “ON-OFF” connection, select “On click” and “Change to” while for the Animation, select “Smart Animate” then choose the “Ease in and ease out” type. You can also adjust the animation time to your preference.
Now, connect the “OFF” component to the “ON” component of the toggle button.
In the “Interaction details” of the “OFF-ON” connection, select “On click” and “Change to” from the option. For the Animation, select “Smart Animate” then choose the “Ease in and ease out” type. Adjust the animation time to your preference.
4. Create a frame for the main toggle button component
Once you’re done with the prototype of your toggle button, create a frame for your main toggle button.
Then go to Assets on the left menu and under the Local components section, click and drag on the toggle button and place it in the frame.
Finally, click on the “Play” icon at the top-right corner of the page to see preview of your design.
Now, you know how to make a toggle button in Figma!
