How to get micro-interactions right using Figma
HTML-код
- Опубликовано: 13 июн 2024
- Master Figma for web design with our new, in-depth Figma course: www.flux-academy.com/courses/...
Maddy’s RUclips Channel: / maddybeard
Micro-interactions are simple and subtle when done well (like good design in general).
BUT…Getting these just right is a lot harder than it seems. In this video you’ll learn to create 3 different micro-interactions the RIGHT way using Figma. First we’ll animate a heart icon into a like button on a product thumbnail, then we’ll tackle a toggle switch animation, and we’ll finish off with accordion elements to build out an FAQ section.
📽️ CHAPTERS
---------------------------
00:00 - Intro
00:36 - Like Button Heart
06:17 - Toggle Switch
11:09 - FAQ Accordion
What awesome animation do you want to learn next?
👉🏻 Learn more from Flux Academy on other social platforms:
Instagram: / flux.academy
Tiktok: / fluxacademy
Twitter: / fluxacademyhq
Linkedin: / flux-academy
#figma #figmatips #design #webdesign
I’ve tried watching other micro interactions video and you explained it the best. You made it so straightforward and easy and didn’t leave any details out and best of all didn’t ask me to download any other expensive app. Thank you!
appreciate how understandable and practical this is. Also personally liked no music during the lesson, just a me thing i think
Super useful and relatively short tutorial! Thank you for explaining this!
Thanks Will!
Accordion text was great 🎉
This video tutorial on micro interactions is fantastic! One key takeaway I got from this video is the importance of using Auto layout effectively to create smooth interactions. It's clear that you pay attention to the smallest details to ensure a seamless user experience. I'm curious, do you have any other tips or tricks for designing micro interactions that feel natural and intuitive to users? Your insights are incredibly valuable, and I'd love to learn more from you. Keep up the great work! 😊
how do you select the shapes to fill the inner area of the heart icon?
Love you
You explained very well. great. Please play the subtitle in Turkish or Azerbaijani language
when I preview my toggle switch by itself the animation is perfect, but when I use the toggle switch to animate a flow between 2 screens the toggle switch animation is overridden by then flow animation. Any ideas on how to fix this? Thanks in advance!
how to get the vertical scroll, as the container is fixed, we cant see the overflow
Very nice! I have a question:
at 19:25 how did you duplicate multiple times at once? I know crtl + D duplicates only once but it seems that it was duplicated 4 or 5 times
Keep pressing ctrl d
with the stroke example this didn't work for me because the icon wasn't made up of a stroke and fill. Some icons are made with a line so the fill and stroke relates to the line. This might confuse people. First, you need a shape with a stroke and fill.
The Toggle Switch didn't work for me until the circle was THE EXACT SAME NAME , and the outer button was named differently
Yeah, they need to have the same name or it won't work.
so pretty woman 😍🥰
You made auto layout mess ,, So hard to understand
🤍