Create a Toggle Switch in Figma (Light Mode vs. Dark Mode)

This is a tutorial on how to use Figma’s Drag Animation Feature in order to create a toggle or on/off switch.

Toggle between Light & Dark Mode

1. Open Figma using either your Desktop Application or access directly through your browser.
2. Create a new document.
3. Add two iPhone 11 Pro Max (or whichever you would like) frames.

For practice, you can also use the Frame tool in and create frames of any size.

4. Add background colors to each frame. In my example, the light mode screen is #E0E5EC and the dark mode screen is #15181C.

5. Using the rectangle tool (top left — fourth button from the left), add two rectangles (173 x 76) into the document and pull the dots in the outer corners to a radius of 38. Change the colors of each rectangle to be the same as the backgrounds.

Pull the dots to adjust the radius.

6. Place each button directly in the center of each frame & add 1–3 drop shadows with a blur of 4 on each button.

7. Add two inner shadows with a blur of 15.

8. Using the ellipse tool, create two ellipses (44 x 46) and place in each button, one on the left and one on the right in the same position. Change the colors of each ellipse to be the same as the buttons/backgrounds.

9. Add a drop shadow to each ellipse.

10. Now time for the animation …. Navigate from the Design Workspace to the Prototype Workspace to begin the animation. Click on the first circle to see a smaller white circle with a blue outline appear. Press the “On Drag” setting and drag to the next frame. Perform the same task with the black circle.

11. Change the other two Animation settings: Ease In And Out & 600ms.

That’s it!