Framer X Micro Interactions with Buttons and Code Overrides Part 1

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 and advanced results.

Microinteractions convey system status, support error prevention, and communicate brand. They are initiated by a trigger, are single-purpose, and can make the experience engaging.

Nielsen Norman Group

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.

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.

Basic Framer X Micro Interactions in Buttons

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

• Blue button: push effect
• Green button: + color change
• Pink button: + custom push effect
• Purple button: + custom animation

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