How to Create Micro-Interactions in Framer

How to Create Micro-Interactions in Framer

New

New

New

  • Guide

  • Create
  • Micro-interactions
  • Guide

  • Create
  • Micro-interactions
  • Guide

  • Create
  • Micro-interactions

How to Create Micro-Interactions in Framer

In this Framer blog, I'm showing you how to create those delightful micro-interactions that make websites feel alive. You'll learn how to build this key illustration animation from scratch using Framer's new pen tool, and turn it into an interactive component - all without touching any code.

image of Nandi Muzsik

Posted by

Nandi

Dark UI card showing session management info with a key icon
Dark UI card showing session management info with a key icon
Dark UI card showing session management info with a key icon

Table of contents

The key animation (Literally)

Here’s what it looks like:

A dark UI card with a key icon labeled “FRM.” When you hover, the key floats up slightly and then eases back down. It’s subtle, but it gives the whole component a polished, dynamic vibe.

And yes, the SVG key illustration itself was built directly inside Framer. No Figma. No Illustrator. Just pure Framer magic.

The key animation (Literally)

Here’s what it looks like:

A dark UI card with a key icon labeled “FRM.” When you hover, the key floats up slightly and then eases back down. It’s subtle, but it gives the whole component a polished, dynamic vibe.

And yes, the SVG key illustration itself was built directly inside Framer. No Figma. No Illustrator. Just pure Framer magic.

The key animation (Literally)

Here’s what it looks like:

A dark UI card with a key icon labeled “FRM.” When you hover, the key floats up slightly and then eases back down. It’s subtle, but it gives the whole component a polished, dynamic vibe.

And yes, the SVG key illustration itself was built directly inside Framer. No Figma. No Illustrator. Just pure Framer magic.

Key animation.

Key animation.

Key animation.

Step 1: Drawing the key in Framer

Thanks to Framer’s updated vector tools, you can now create detailed illustrations right inside the app. That’s what I did for the key.

Instead of switching tools, I stayed in the same file, used the pen and shape tools, and drew out the key and the FRM tag. Super clean, super easy. Once the illustration was done, I turned it into a component.

Step 1: Drawing the key in Framer

Thanks to Framer’s updated vector tools, you can now create detailed illustrations right inside the app. That’s what I did for the key.

Instead of switching tools, I stayed in the same file, used the pen and shape tools, and drew out the key and the FRM tag. Super clean, super easy. Once the illustration was done, I turned it into a component.

Step 1: Drawing the key in Framer

Thanks to Framer’s updated vector tools, you can now create detailed illustrations right inside the app. That’s what I did for the key.

Instead of switching tools, I stayed in the same file, used the pen and shape tools, and drew out the key and the FRM tag. Super clean, super easy. Once the illustration was done, I turned it into a component.

Stylized key and tag icon labeled “FRM” with visible vector paths and control points

The SVG structure of the illustration in Framer.

Stylized key and tag icon labeled “FRM” with visible vector paths and control points

The SVG structure of the illustration in Framer.

Stylized key and tag icon labeled “FRM” with visible vector paths and control points

The SVG structure of the illustration in Framer.

Step 2: Creating the variants

Now here’s the fun part, the animation. You might think you only need two variants: default and hover. But I actually used three:

  • Default (Idle state)

  • Out (On hover: key moves up slightly)

  • Back (Auto return: key moves back down)

So why three?

Because we’re not just moving the key up, we’re also bringing it back down automatically. And Framer’s appear interaction handles that second motion beautifully. Here’s how it works:

  • On hover, the key switches to the Out variant.

  • Inside the illustration component, the Out variant has a transition that automatically sends it to Back.

  • The Back variant eases the key back into place.

Boom. Instant micro-interaction.

Step 3: Hooking it up to the main card

The final step is simple. I created a main card component (the dark UI panel), dropped the key illustration inside, and added a hover interaction that switches the key to the Out variant.

That’s it. The rest of the movement—Out to Back—runs automatically inside the illustration component, giving you that buttery hover effect with basically zero effort.

Why this works

The secret sauce here is in the structure:

  • Keeping the illustration self-contained means your card component stays clean.

  • Using appear transitions gives you motion that feels natural and controlled.

  • And doing it all inside Framer means your workflow stays lightning fast.

This kind of micro-interaction might feel small, but it makes a huge impact. It tells your visitors, hey, this site pays attention to the little things.

Try it yourself

You can remix the Key Micro-Interaction Component and explore exactly how it’s built. Watch my full length tutorial on Micro-interactions then try applying the same concept to your own icons, illustrations, or logos. Trust me, once you start adding micro-interactions like this, you won’t want to stop.

Step 2: Creating the variants

Now here’s the fun part, the animation. You might think you only need two variants: default and hover. But I actually used three:

  • Default (Idle state)

  • Out (On hover: key moves up slightly)

  • Back (Auto return: key moves back down)

So why three?

Because we’re not just moving the key up, we’re also bringing it back down automatically. And Framer’s appear interaction handles that second motion beautifully. Here’s how it works:

  • On hover, the key switches to the Out variant.

  • Inside the illustration component, the Out variant has a transition that automatically sends it to Back.

  • The Back variant eases the key back into place.

Boom. Instant micro-interaction.

Step 3: Hooking it up to the main card

The final step is simple. I created a main card component (the dark UI panel), dropped the key illustration inside, and added a hover interaction that switches the key to the Out variant.

That’s it. The rest of the movement—Out to Back—runs automatically inside the illustration component, giving you that buttery hover effect with basically zero effort.

Why this works

The secret sauce here is in the structure:

  • Keeping the illustration self-contained means your card component stays clean.

  • Using appear transitions gives you motion that feels natural and controlled.

  • And doing it all inside Framer means your workflow stays lightning fast.

This kind of micro-interaction might feel small, but it makes a huge impact. It tells your visitors, hey, this site pays attention to the little things.

Try it yourself

You can remix the Key Micro-Interaction Component and explore exactly how it’s built. Watch my full length tutorial on Micro-interactions then try applying the same concept to your own icons, illustrations, or logos. Trust me, once you start adding micro-interactions like this, you won’t want to stop.

Step 2: Creating the variants

Now here’s the fun part, the animation. You might think you only need two variants: default and hover. But I actually used three:

  • Default (Idle state)

  • Out (On hover: key moves up slightly)

  • Back (Auto return: key moves back down)

So why three?

Because we’re not just moving the key up, we’re also bringing it back down automatically. And Framer’s appear interaction handles that second motion beautifully. Here’s how it works:

  • On hover, the key switches to the Out variant.

  • Inside the illustration component, the Out variant has a transition that automatically sends it to Back.

  • The Back variant eases the key back into place.

Boom. Instant micro-interaction.

Step 3: Hooking it up to the main card

The final step is simple. I created a main card component (the dark UI panel), dropped the key illustration inside, and added a hover interaction that switches the key to the Out variant.

That’s it. The rest of the movement—Out to Back—runs automatically inside the illustration component, giving you that buttery hover effect with basically zero effort.

Why this works

The secret sauce here is in the structure:

  • Keeping the illustration self-contained means your card component stays clean.

  • Using appear transitions gives you motion that feels natural and controlled.

  • And doing it all inside Framer means your workflow stays lightning fast.

This kind of micro-interaction might feel small, but it makes a huge impact. It tells your visitors, hey, this site pays attention to the little things.

Try it yourself

You can remix the Key Micro-Interaction Component and explore exactly how it’s built. Watch my full length tutorial on Micro-interactions then try applying the same concept to your own icons, illustrations, or logos. Trust me, once you start adding micro-interactions like this, you won’t want to stop.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More posts

More posts

  • Framer fill settings panel showing hidden tile preset option

    6 Hidden Features in Framer You Didn’t Know About

    Toplist

    Framer fill settings panel showing hidden tile preset option

    6 Hidden Features in Framer You Didn’t Know About

    Toplist

    Framer fill settings panel showing hidden tile preset option

    6 Hidden Features in Framer You Didn’t Know About

    Toplist

  • Framer animate along path with curved motion line and arrow

    How to Animate Elements Along a Path

    Guide

    Framer animate along path with curved motion line and arrow

    How to Animate Elements Along a Path

    Guide

    Framer animate along path with curved motion line and arrow

    How to Animate Elements Along a Path

    Guide

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback