Set Status Micro-Interaction in Framer

Copy component

Set Status Micro-Interaction in Framer

Copy component

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

Component

Set Status Micro-Interaction in Framer

This is a smooth micro-interaction recreated in Framer from Nitish’s original work. Feel free to remix the project to see how a complex interaction like this is structured in a nice, neat way.

image of Nandi Muzsik
profile image of Nitish Khagwal

Created by

Set Status UI with emoji icons and Be Right Back message
Set Status UI with emoji icons and Be Right Back message
Set Status UI with emoji icons and Be Right Back message

About the resource

You might actually think that micro interactions like these in Framer can be achieved in Framer with a single component. Well, you couldn’t be more wrong.

To set something like this up in Framer without any code, you need to carefully break it down into smaller elements, also known as components.

As you can see it on the image below, even the icons used in the interaction have a separate component, just like the set status button, or the popover.

About the resource

You might actually think that micro interactions like these in Framer can be achieved in Framer with a single component. Well, you couldn’t be more wrong.

To set something like this up in Framer without any code, you need to carefully break it down into smaller elements, also known as components.

As you can see it on the image below, even the icons used in the interaction have a separate component, just like the set status button, or the popover.

About the resource

You might actually think that micro interactions like these in Framer can be achieved in Framer with a single component. Well, you couldn’t be more wrong.

To set something like this up in Framer without any code, you need to carefully break it down into smaller elements, also known as components.

As you can see it on the image below, even the icons used in the interaction have a separate component, just like the set status button, or the popover.

Framer Assets panel showing project components like Button, Status, and Popover

Components used for the creation process.

Framer Assets panel showing project components like Button, Status, and Popover

Components used for the creation process.

Framer Assets panel showing project components like Button, Status, and Popover

Components used for the creation process.

Once you have all components set up, you usually have one main component where all the interactions are finalized.

Once you have all components set up, you usually have one main component where all the interactions are finalized.

Once you have all components set up, you usually have one main component where all the interactions are finalized.

Set Status UI variants in Framer showing different emoji states like vacation, out sick, and commuting

The final main component with all the interactions.

Set Status UI variants in Framer showing different emoji states like vacation, out sick, and commuting

The final main component with all the interactions.

Set Status UI variants in Framer showing different emoji states like vacation, out sick, and commuting

The final main component with all the interactions.

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 resources

More resources

  • Dark UI buttons labeled Save, Copy, and menu with cursor click

    Show More Micro Interaction in Framer

    Component

    Dark UI buttons labeled Save, Copy, and menu with cursor click

    Show More Micro Interaction in Framer

    Component

    Dark UI buttons labeled Save, Copy, and menu with cursor click

    Show More Micro Interaction in Framer

    Component

  • Interactive Wave Background component with wavy black and white lines

    Interactive Wave Background in Framer

    Component

    Interactive Wave Background component with wavy black and white lines

    Interactive Wave Background in Framer

    Component

    Interactive Wave Background component with wavy black and white lines

    Interactive Wave Background in Framer

    Component