UI/UX
UI Login Animation
How I Made a Simple but Beautiful Login Screen Animation in Figma
I was working on a login screen recently. Nothing too fancy — just a clean, simple screen with a logo in the center. But I wanted that logo to feel alive. So I added a blinking animation around it using Figma’s prototyping tools. Here’s exactly how I did it, step by step.
The Idea
My app logo looks like a location icon — you know, that pin drop shape. I wanted to put two circles behind it that blink in and out, like a pulse. The kind of animation you see on maps when your location is loading. It looks simple, but it makes the whole screen feel premium.
Step 1 — Design the Logo with Circles
First, I placed the logo in the center of my login screen frame.
Then I created two circles around it. One large, one small. Both sit behind the logo. The small one is tight around the logo. The large one is wider, like a ripple. I used low opacity on both — something like 20% to 30% — so they don’t overpower the logo. They just sit there quietly in the background.
This gives the logo a nice layered look even before any animation starts.
Step 2 — Make It a Component
I selected everything — the logo, both circles, the whole group — and created a Frame out of it. Then I selected that frame and created a Component (Cmd/Ctrl + Alt + K).
This is important. You need it to be a Component because we are going to make variants of it. Variants are just different states of the same component — like “circles visible” and “circles hidden.”
Once the component is ready, I went into the Component and created a second variant. In the first variant, the circles are visible. In the second variant, I reduced the circle size to very small — almost nothing — and kept the opacity at zero. This is the “off” state.
Step 3 — Set Up the Prototype Animation
Now the fun part.
I opened the Prototype panel. I connected Variant 1 to Variant 2 using the interaction trigger: After Delay. I set the delay to 1ms — basically instant. Then for the animation, I chose Smart Animate with Gentle easing and 800ms duration.
Then I connected Variant 2 back to Variant 1 — same settings. After Delay, 1ms, Smart Animate, Gentle, 800ms.
This creates a loop. The circles grow and shrink. Grow and shrink. That’s your pulse animation.
Step 4 — Use It in the Login Screen
I copied the component and pasted it into my main Login Screen frame. When you preview it in prototype mode, you will see the blinking animation working right there on the screen.
The login screen itself stays simple — just the animated logo in the center, an email field, a password field, and a button below. But that small animation on the logo makes the whole screen feel polished.
Step 5 — Duplicate Frames for the Full Flow
To show the full animation in a prototype presentation, I copied the login frame five times and connected them in sequence. Each frame shows the next state. With After Delay and Smart Animate, Figma smoothly transitions between them, so it looks like one continuous loop.
Why This Works
The animation is subtle. It does not distract the user. It just adds life to an otherwise static screen. The Gentle easing makes the circles grow and shrink in a smooth, natural way — not robotic, not bouncy. Just calm and clean.
800ms is the right speed for this. Slower feels sluggish. Faster feels nervous. 800ms hits that sweet spot where it feels like a natural breath.
Quick Summary
- Logo sits in the center of the login screen
- Two circles behind the logo — one large, one small
- Group everything into a Frame, then make it a Component
- Create two Variants — circles visible and circles hidden
- Connect them with After Delay (1ms) + Smart Animate + Gentle + 800ms
- Loop it back and paste into your login screen
- Preview in Prototype mode to see the blink effect
