Hello Design Enthusiasts,
Introducing 3rd edition of Micro-Interaction.
A small action can make your design standout and keep your user engaged into the product.
A design without Micro Interaction is like like driving a bike with a flat tire. Doesn’t matter how great your bike’s engine is because the flat tire will ruin the whole experience.
In the workshop you'll learn:
Day 1: Micro-Interaction Fundamentals + Figma for Interaction Prep
- What micro-interactions are and why they matter
- Feedback, status, affordance, and moment-to-moment feel
- Types of micro-interactions used in apps (tap, drag, scroll, hover, transitions, confirmations)
- Motion patterns found in top apps
- Preparing UI in Figma for animation
- Layer naming and grouping best practices
- Components and variants for interaction states
- Preparing assets for handoff to After Effects
- Exporting assets (SVG, PNG, frame structure)
Day 2: Motion Principles Applied + After Effects Basics for UI Designers
- Timing, spacing, and easing (practical use in products)
- High-impact easing curves for UI
- Primary and secondary motion
- When to keep motion subtle vs expressive
- After Effects interface overview
- Understanding comps, layers, and keyframes
- Intro to the Graph Editor (value vs speed graphs)
- Parenting and nulls for organized motion
Day 3: AE Basics Continued + Screen & Navigation Transitions
- Masks, shape layers, track mattes
- Precomposing and clean layer management
- Motion blur for UI
- Screen transitions (home → detail)
- Modal opening/closing
- Navigation patterns (tabs, drawers, bottom sheets)
- Masked reveals and directional animation
- How to build transitions that feel “native” to mobile apps
Day 4: Advanced Micro-Interactions (Part 1) + Example 1 (Dashboard Components)
- Micro-morphing icons
- Liquid movement
- Overshoot, settle, bounce
- Nested interactions
- Multi-step button sequences
- Animating dashboard widgets
- Chart animations, loading states, expanding cards
- Using expressions for efficiency (simple expressions only)
Day 5: Advanced Micro-Interactions (Part 2) + Example 2 (Banking Mobile App)
- Gesture interactions: drag, long press, pull-to-refresh
- Success, failure, and alert animations
- Motion for secure UX (clear feedback)
- Banking app example:
- Account card slide
- Transaction reveal
- Confirm payment animation
- Tab bar interactions
Day 6: Production & Developer Handoff + Example 3 (Nutrition Tracking App)
- Exporting UI motion for dev teams
- Creating Lottie-ready animations
- JSON exports and platform limitations
- Motion style guidelines (timing, curves, distances)
- Nutrition app example:
- Progress rings
- Day streak interactions
- Add meal interactions
- Calendar scroll micro-interactions
Day 7: Exporting as GIF & Handy Plugins + Example 4 (Fintech Dashboard)
- Exporting GIFs, MP4s, WebM
- Best compression settings for Dribbble/Behance
- Using LottieFiles, Haiku, AEUX, and other plugins
- Tips for creating clean portfolio assets
- Fintech dashboard example:
- Chart transitions
- Data reveal animations
- Notification interactions
- Multi-panel collapsible animations
Day 8: Q&A, Feedback, Work Review
- Review every student’s animations
- Fixes for timing, easing, and visual polish
- Feedback on dashboard, banking, and nutrition app examples
- Improving storytelling for portfolio projects
- How to present motion in a UX case study
- Final prep for publishing on Behance / Dribbble / portfolio
It's a 8 day's workshop conducted on 4 weekend starting from 9th May 2026.
Mentor: Kannan S (Sr. UIUX Designer)
When: May 9th to May 31st(Saturday and Sunday)
Timings: 10am to 2pm IST
Mode: Zoom - Online
Fees: 8000/- INR (all inclusive)
Workshop completion Digital certificate will be provided.
Please Note:
The meetup will happen on Zoom & can be viewed from anywhere.
All you need is a good Wi-Fi connection and a fully charged laptop.
Once you’re done with the booking team will connect with you for further update.
Cheers!
Event Venue
Online
INR 8000.00
