Skip to content
search icon
clear
Component Status

Buttons toggle

Figma

How to add

  1. Locate the Assets tab in the Layers Panel.
  2. There are two ways to locate the Toggle button component needed:
    • Use the search bar to search for a component grouping name or variation name.
    • Scroll through the folders list and open the grouping.
  3. Once the component needed is located, click and drag it into the frame/artboard.
  4. Add as many toggle buttons as needed by snapping them together. At least one Toggle button left and one Toggle button right is required.

How to use

  1. Select the Toggle button in the frame/artboard.
  2. Locate and expand the highlighted layer in the Layers Panel.
  3. Edit the text. If the text wraps over one line, resize the width of the button to avoid line breaks.
  4. If using the Toggle button icon, change the icon:
    • Locate and select the Icon > Placeholder Icon layer in the Layers Panel.
    • Locate the Design tab in the Inspector Panel.
    • Under the Instance section, click the icon name to expand the menu.
    • Choose a new icon.
  5. Never add height to toggle buttons, only resize them horizontally in width.
  6. Add as many toggle buttons as needed, and repeat steps 1–4. You will need at least one Toggle button left and one Toggle button right.
  7. Select all the Toggle button layers and convert them to a frame/artboard by using the following shortcut:
    • Mac: Command + Option + G
    • PC: Ctrl + ALT + G
  8. Make sure to name the new group.
  9. Locate the Design tab in the Inspector Panel.
  10. Under the Constraints section, set up constraints.
Edit this page on GitHub