# How do I create micro-interactions in Figma?

> Build the micro-interaction as an interactive component: create variants for each state (default, hover, pressed, on, off), connect them in the prototype panel with triggers such as While hovering or On click, and choose Smart Animate with an easing or spring. Use variables and conditionals for logic such as toggles. Remember that Figma prototypes are for testing; developers still rebuild the motion unless you export it.

Updated November 2026. Source: https://www.exodeui.com/questions/how-to-create-micro-interactions-in-figma/

## Key takeaways

- Make a component with a variant per state
- Connect variants in Prototype with While hovering, While pressing or On click
- Use Smart Animate and pick an easing or spring preset
- Variables and conditionals add simple logic
- For production, export or rebuild the interaction

## Frequently asked questions

### Why does Smart Animate jump instead of animating?

Layer names or hierarchy differ between variants. Make them match.

### Can Figma micro-interactions be exported as code?

Not directly as production code. Plugins and other tools can help, or developers rebuild them.

### What is the best duration for a micro-interaction?

Usually 100 to 300 ms. Feedback should feel instant.

### Can I add sound or haptics in Figma?

Figma prototypes have limited support. Specify them for developers.

## Related

- [What are micro-interactions?](https://www.exodeui.com/learn/micro-interactions)
- [Figma Smart Animate vs spring](https://www.exodeui.com/questions/figma-smart-animate-vs-spring)
- [Best micro-interaction tools](https://www.exodeui.com/best-micro-interaction-tools)
- [Import Figma into ExodeUI](https://www.exodeui.com/import/figma)