0

50+ Micro Interactions

Accelerate your workflow and elevate your designs with ready-to-use Figma files 

  • User Guides
  • Prototypes
  • Components
  • Variants & States
  • Animation Specs
  • UI Elements

Micro Interactions +

Bring your ideas to life with micro interactions that delight users, elevate your product, and set your experience apart.

Here’s what you get:

  • Every micro interaction comes fully built and ready to use in Figma. Alongside the prototype, you’ll get a detailed guide that breaks down how it was created — covering auto layout, variables, conditional logic, components, and variants — giving you full control to tweak or learn from it.
 
  • Interactive components — from buttons and forms to cards and modals — give you everything you need to design and prototype a complete user interface, ready to plug into your projects.
 
  • Each micro interaction is built with the latest Figma features, making it easy to use, adapt, and customize to fit your project.

Toggle Switch

$6.00
A toggle switch interaction in Figma refers to a small, focused animation or behavior that occurs when a user switches between two states—typically “on” and “off”—using a toggle switch component.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Subscribe Button

$6.00
A subscribe button interaction in Figma refers to a small purposeful animation that provides visual feedback —such as a color change or a brief animation—to confirm the action has been completed.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Checkbox Interaction

$6.00
A checkbox micro interaction in Figma typically involve a checkmark appearing, or a color change, when a user selects or deselects a checkbox – to confirm an action has been completed.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Radio Button

$6.00
A radio button interaction in Figma is a brief animation triggered when only a single selection is allowed and typically includes a fill animation, or color change to clearly indicate which option has been chosen.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Dropdown Menu

$6.00
A dropdown interaction in Figma is a small, animated behavior that enhances how a dropdown menu opens, closes, and responds to user input and includes smooth transitions, icon rotation and hover effects.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Accordion Interaction

$6.00
An accordion interaction is a smooth, animated behavior that occurs when a user expands or collapses a section. Commonly used in FAQs and content-heavy layouts to organize information.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Three State Button

$6.00
A three-state button interaction in Figma refers to the visual changes a button undergoes across three key states: hover, focus, and pressed. Improving usability by clearly signaling responsiveness and intent.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Slider Control

$6.00
A slider interaction in Figma is a dynamic UI element that allows users to adjust a value or setting by dragging a handle along a continuous visual scale.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Slider Control

$6.00
Figma interactive slider controls allow users to select values within a predefined range and are commonly used in applications for adjusting settings, brightness and volume controls.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Light Dark Theme

$6.00
This Figma interaction uses nine color variables applied across UI elements such as chips, buttons, info text, favorites, and icons. Allowing users to switch between two visual themes.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Scroll Bar Interaction

$6.00
A scroll bar in Figma adds visual feedback as users interact with scrollable content, such as long emails, message threads, or inbox views using drag triggers on both the scroll bar and the content.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Pagination Interaction

$6.00
A pagination animation in Figma is used to visually guide users through multi-screen flows—commonly seen in mobile onboarding experiences. Smart animate enables fluid page transitions.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Advanced Dropdown

$6.00
An advanced dropdown menu interaction in Figma enables users to filter or categorize content—such as viewing all transactions, only income, or only expenses—within a financial or budgeting app.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Digital Storefront

$6.00
A digital storefront in Figma with cart functionality simulates an e-commerce experience where users can add or remove items from their cart, and see dynamic updates to item counts, taxes and totals.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Mobile E-Commerce

$6.00
Figma simulates the full shopping experience on a mobile device—where users can add or remove items from their cart, and see dynamic updates to item counts and totals.

You get:
  • Figma source file
  • UI behavior checklist
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Loading Animation

$6.00
A loading animation in Figma is a visual indicator that communicates to users that content is being processed. These animations help manage user expectations and reduce perceived wait time.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Floating Action Button

$6.00
Positioned above the content Floating Action Buttons (FAB) in Figma— are commonly seen in social apps for actions like creating a post, starting a message, or navigating to social media.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Animated Heart

$6.00
A heart animation in Figma visually responds when a user marks content as a favorite—typically used in social and e-commerce apps. This animation often includes a bounce or scale effect and color transition.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Toast Messages

$6.00
A Figma toast message is a brief, unobtrusive notification that appears to inform users of an action’s outcome— typically slide in at the bottom or top of the screen, and remain visible for a few seconds.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Tool Tip Variants

$6.00
In Figma, you can build a tooltip interaction using component variants and auto layout. Variants allow you to manage different states like hidden, visible, or directional positions (top, bottom, center, left, right).

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Tool Tip Hover Animation

$6.00
A tooltip is a brief, message that appears when a user hovers over a UI element—typically an icon or button. It provides helpful information without taking users away from the task at hand.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Slide to Confirm

$6.00
A Slide to Confirm interaction adds a layer of intentionality, reducing accidental taps for critical actions while making the experience feel secure and interactive.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Expandable Cards

$6.00
Figma’s auto layout and smart animate are used to smoothly expand details like pricing, reviews, or CTAs allowing users to access detailed information when needed.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Card Components

$6.00
A Figma card component allows designers to create a single component to support multiple visual states (text, images, CTA, icons) all from the properties panel, when consistency, reusability, and speed are critical.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Drag & Drop Interaction

$6.00
A drag-and-drop interaction in Figma simulates the ability to move UI elements—mimicking behaviors in apps like arranging cards in a Kanban board or customizing layouts in a dashboard or design tool.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Add to Bag Animation

$6.00
This Figma animation is a smooth, visual confirmation that an item has been added to the cart. Enhances user confidence, reduces confusion, and makes the shopping experience feel seamless and satisfying.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Product Card Interaction

$6.00
A Product Card interaction in Figma commonly used in e-commerce apps and websites – expand to reveal more information, and animate elements to create a richer browsing experience.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Bottom Sheets

$6.00
In this Figma interaction the bottom sheet is prototyped using overlays to simulate the sheet’s movement between collapsed and expanded states. Once it’s triggered, a shareable list can be scrolled.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Flip Card Interaction

$6.00
A flip card interaction in Figma simulates the effect of a card turning over. Use cases include showing front-facing content like a team member’s image, revealing their job profile and social icons on the back.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Flip Card Interaction

$6.00
Flip Cards are useful when you want to create a sense of interactivity without navigating away from the current view. In Figma, this effect can be achieved using smart animate and masking.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Magnifying Zoom

$6.00
A magnifying zoom interaction in Figma mimics the effect of a lens zooming in on a portion of the interface, revealing greater detail or emphasizing a specific area such as maps, product images, or dashboards.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
 
Add to WishlistAlready In Wishlist
Add to Wishlist

Animated Hamburger Menu

$6.00
Learn to create a simple, modern hamburger menu animation in Figma. The design process, from creating the initial layout to adding interactive elements and animating the menu’s transition.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Modal Overlay

$6.00
A modal overlay in Figma is a UI element that appears on top of the current screen activated via a button click or time delay to capture user attention or prompt an action.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Sidebar Interaction

$6.00
A sidebar interaction in Figma simulates a panel that slides in from the side of the screen to display navigation links, or tools, or additional content without disrupting the main view.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Menu Tab Bar

$6.00
A tab bar interaction in Figma replicates a common mobile and web navigation pattern where users can switch between content sections by tapping labeled tabs—typically at the top or bottom of the screen.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Menu Tab Bar

$6.00
In Figma, tab bar interactions can be built using component variants and interactive triggers like “On Click” to switch between content panels. Visibility and state changes are controlled using Smart Animate.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist
Carousel Interaction, the micro interaction for figma

Carousel Interaction

$6.00
Commonly used in image galleries, a carousel interaction in Figma simulates a horizontal scrolling experience where users can navigate through a series of items—such as images or slides—using buttons.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Stepper UI Interaction

$6.00
A stepper UI indicator interaction in Figma visually communicates a user’s progress within a multi-step process—helping users understand what they’ve complete and what’s ahead.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Stepper UI Interaction

$6.00
A stepper UI indicator interaction in Figma visually communicates a user’s progress within a multi-step process—helping users understand what they’ve complete and what’s ahead.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist
Breadcrumb Navigation for figma design

Breadcrumb Navigation

$6.00
Breadcrumb navigation in Figma is a UI pattern that shows users their current location within a hierarchy and allows them to navigate back to previous levels with a single click.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist
Draggable Map, Figma micro Interaction

Draggable Map

$6.00
A draggable map in Figma allows users to click and drag to explore different areas within a larger visual field. This type of interaction is commonly found in travel apps, delivery platforms, or real estate tools.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist
Scrollable Map, A Figma Micro Interaction

Scrollable Map

$6.00
A scrollable map in Figma allows users to scroll in multiple directions. Set destinations and when the user clicks on one of them, they scroll to different locations on the map.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Action Modal

$6.00
A draggable slide-up action modal in Figma mimics a mobile UI component that users can swipe or drag upward to reveal more content, and drag downward to dismiss or collapse it.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Search Auto Complete

$6.00
Search auto complete interaction in Figma includes a search bar that activates as the user begins typing, displays a blinking cursor for realism, and reveals a dynamic list of suggestions to guide the search.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist
Floating Label Interaction, Figma Micro Interaction

Floating Label Interaction

$6.00
A floating label interaction in Figma replicates the behavior of modern input fields, where a label appears inside the field by default and “floats” above it once the user clicks or starts typing.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Text Input Fields

$6.00
Designing an effective input field involves more than just a rectangle and text; it requires careful attention to spacing, alignment, and state behavior to ensure usability across devices and use cases.

You get:
  • Figma source file
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Dynamic Form Interaction

$6.00
A dynamic form in Figma mimics the experience of filling out a live form—capturing user input, updating fields, and reflecting changes across screens or components—without the need for code.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Password Show Hide

$6.00
Commonly used in login screens across mobile and web apps. A password show/hide animation in Figma allows users to toggle the visibility of their password input without compromising security.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Swipe to Delete Archive

$6.00
Using auto layout, components, and variants, designers can build a flexible list item that responds to horizontal swipes, revealing options such as delete on one side and archive on the other.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Date and Range Picker

$6.00
A date and range picker interaction in Figma allows users to select a specific date or a range of dates—commonly used in booking apps, calendars and dashboards.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist

Chat Typing Indicator

$6.00
A typing indicator is a common micro interaction in chat interfaces that visually communicates when the other user is typing. This interaction provides real-time feedback and creates a sense of anticipation.

You get:
  • Figma source file
  • User guide
  • Components
  • Prototype
  • Visual UI Elements
Add to WishlistAlready In Wishlist
Add to Wishlist
back to the Top

Log into your account

Please enter your email and password

Forgot your password?

Create Account

Product Name

Added to your cart

0 item(s) in your cart

Continue shopping
Go to cart

Buy 3 or more items and get 10% off