User Interface
Design & UXThe visible part of a digital product — the buttons, menus, forms, layout, typography, icons, modals — that a person actually touches, clicks, and reads to get…
Design & UX
Micro-Interactions
Lukas HorvathCo-founder
What is Micro-Interactions?
Micro-interactions are the small, contained moments of feedback and animation in an interface — a button that subtly lifts on hover, a like icon that fills in with a bounce, a toggle that slides between states, a form field that gently highlights when active. Each one is a tiny conversation between the product and the user, confirming actions, showing system status, or rewarding attention. They are details, not features, but they shape how a product feels.
Why it matters
Big design decisions get a product to functional. Micro-interactions get it to memorable. The difference between an interface that feels cheap and one that feels considered is almost always in the small moments — how a menu opens, how a button responds, how an input acknowledges a successful save. Done well, they reduce uncertainty: the user knows their click registered, their form was accepted, the page is loading. Done badly — or skipped entirely — the product feels static and slightly dead. The cost is small. The brand payoff is real.
How it works
The designer identifies the moments in the interface where feedback matters: hover, click, focus, success, error, loading, empty state, drag, drop. Each one gets a defined behavior — a subtle scale, a color shift, a slide, a fade, a bounce — usually running in 150 to 300 milliseconds with an easing curve that feels natural rather than mechanical. Engineers implement them with CSS transitions, CSS animations, or a JavaScript library like Framer Motion for more complex sequences. Tokens hold the timing and easing values, so motion stays consistent across the product instead of every component inventing its own rhythm. The discipline is restraint: every micro-interaction should serve a purpose. A site full of animation is just noise. A site with three well-placed micro-interactions feels crafted and confident.
Related terms
User Experience
Design & UXHow it feels to use a product from start to finish — the speed, the clarity, the flow, the copy, the moments of friction, the parts that just work — not just…
Component Library
Design & UXA reusable set of pre-built UI pieces — buttons, forms, cards, modals, navigation — that designers and developers pull from instead of building each one fresh…
Design System
Design & UXA shared set of components, design tokens, and rules a team uses to design and build a product, so every page looks coherent and no one is reinventing a button…
Prototype
Design & UXA clickable mock-up of a website or product that simulates the real interactions — clicks, transitions, flows, micro-states — so the team can test how it…
Figma
Design & UXThe browser-based design tool most product and marketing teams use to design websites, apps, and interfaces — collaborative, fast, and the de facto standard…