Framer X Micro Interactions with Buttons and Code Overrides Part 2

Framer X is great for micro interactions. A simple code override can be a game changer. Mix a few of them and you get some pretty amazing results.

If you want to add some magic in UX, micro interactions is a good place to start. It’s not the only element but it has great influence to people. After all, our brains have evolved to spot tiny bits of movements.

Prototyping and testing micro interactions in Framer X is easy. You can do it with Framer X code overrides. To start with, check some simple button micro interactions here.

Micro interactions are a choreography of pixels behind the glass

I like to think of micro interaction as a choreography of pixels behind the glass. They make an app or website fun and playful. They add character and emotions. They solve problems and preserve screen space. They add or remove functionality. They convey meaning and purpose.

Oh Boy Boring Buttons

The very nature of buttons is boring and constrained. There is not much to design. A bunch of pixels with color in a certain shape without or without a border and shadow. Oh yes, a label and an icon often find their way inside a button. Oh boy, buttons are boring.

You are right. Buttons are boring until you add some micro interactions to them. This inherit constrain is as beautiful as a blank canvas. There is so much to do.

That’s why working with micro interactions in buttons is fun and interesting. Design constrains blend with animation in Frame X.

Advanced Framer X Micro Interactions in Buttons

Here are some advanced micro interactions with buttons to get you started.

• Dark Blue button: reveals the hidden text field for PIN code
• Blue button: uploading, progress, confirmation
• Yellow button: add item to cart with motion

These advanced micro interactions convey meaning and purpose from the real world.

The field for the PIN code is hidden and revealed only when it’s needed. Because entering a security code should remain secret until it is needed.

Saving space and keeping focus on the call to action the next button transform itself. It reacts to the call of action, communicates upload progress and confirms the action.

Adding an item to the shopping cart by “making space” and “tidying up” the basket for the item to fit it.

This blog post is an expanded version of an earlier tweet from July 4 2019.