Creating Simple Dark Mode Transition with Figma (Figma file available)
Getting Started
I’ll share how to create a simple dark mode transition using Figma smart animate.
What will we created
Let’s begin
As usual i already created some UI assets for this tutorial, so we can focus on Figma Smart Animation. You can copy Figma file in this Drive
1. Create Dark Ellipse
First, create dark ellipse, this dark ellipse later will be our key element for this animation.
We just need small size ellipse, like around 20-40 px. To create ellipse, press “O”, to make perfect round, press shift while you dragging the ellipse cursor. Change the ellipse color to #000000. Next rearrange that dark ellipse so it placed backward the navbar and the moon icon. You can just drag that dark ellipse to bottom on the layer section or press cmd + [ .
2. Duplicate the Frame
Next, duplicate the artboard. To duplicate artboard you can drag the frame while pressing alt, or simply press cmd + D on Mac
2. Overlapping Ellipse
Next, on the Frame 2, select the dark ellipse that we’ve created. Expand it’s size with pressing cmd + shift + drag the corner cursor until it’s overlapping the artboard. After that, rearrange that dark ellipse so it placed backward.
3. White on dark background
Change the font, and icon color to white, simply just select the element and then press I to switch to color picker mode, and select the white color.
Don’t forget to change the moon icon to sun icon on Frame 2, to help your user switch from dark mode to light mode,
Tips designing on dark mode, don’t make all element just plain white, you can lower to opacity for some element like icon, or text to 70–80%. Still readable, but not too prominent.
4. Time to Prototype
Switch to prototype mode, select moon icon, drag the prototype arrow to frame 2. Don’t forget to set to smart animation, and set the interval time to 800ms. Click Preview to see our prototype.
5. Switch to Light Mode Transition
We’ll duplicate the Frame 2, it’ll create Frame 3. Then select on overlapping dark ellipse on Frame 3, shrink it using cmd + shift + drag ellipse cursor.
Change the text color, icon, and navbar color, to adapt light mode. Select element you want to change then switch to color picker mode by pressing I and select color you want to pick.
Next, switch to prototype mode, select on sun icon on frame 2, drag the prototype arrow to frame 3. Click Preview to see our prototype. On prototype preview screen, you can restart the prototype by pressing R.
6. Some Detail Animation
Let’s have fun, i make the sun icon transition when user switched to dark mode, like this.
Simply copy the sun icon from Frame 2 to Frame 1. After that, place it backward navbar on Frame 1, then rotate the icon to 270° or -90°.
With the same step you also can create moon icon transition. Simply copy the moonicon from Frame 3 to Frame 2. After that, place it backward navbar on Frame 1, then rotate the icon to 270° or -90°.
