Figma Toggle

Preview

Figma Toggle

Figma Toggle Component

The Toggle or Switch component allows users to switch between two states of a single interface action or property. It can also be used to immediately activate or deactivate a system's mode, action, or feature.

Toggle UI component provides animations for on/off visual states with color and position changes for clear and immediate feedback.

Toggle Anatomy

Set	Variants	Properties
ToggleLabel	32	Size XL, Large, Medium, SmallState Hover Off, Off, Hover On, OnDirection Left, Right
SwitchLabel	32	Size XL, Large, Medium, SmallState Hover Off, Off, Hover On, OnDirection Left, Right
ToggleKnob	24	Size Small, Medium, Large, XLState Off, Hover Off, Disabled Off, Hover On, On, Disabled On
Switch	24	Size Small, Medium, Large, XLState Off, Hover Off, Disabled Off, Hover On, On, Disabled On

The toggle family is four sets — Switch tracks and ToggleKnob handles in Small, Medium, Large and XL with Off, Hover Off, On, Hover On and Disabled states, plus SwitchLabel and ToggleLabel rows with the control on the Left or Right — animated between states with colour and position.

Toggle AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build a toggle switch system in Figma as four component sets. Switch: the track in Small 12, Medium 16, Large 20 and XL 32px heights with six states — Off with a grey track, Hover Off slightly darker, On with the accent track, Hover On darker, Disabled Off and Disabled On at reduced opacity. ToggleKnob: the handle at 19, 24, 32 and 44px with the same states, the knob sliding to the right and gaining a shadow when On. SwitchLabel and ToggleLabel: the control beside a text label placed on the Left or Right in four sizes with Off, Hover Off, On and Hover On states, the whole row one hit area of at least 44px. Add Booleans for a caption line and for on and off icons inside the knob. Wire Off to On as an interactive component with smart animate so the knob slides and the track recolours over 200ms, and build a settings list example of five labelled toggles in mixed states. Bind colours to variables for light and dark mode.

Source