How to get micro-interactions right using Figma

Подписаться 803 тыс.

Просмотров 18 тыс.

50% 1

Master Figma for web design with our new, in-depth Figma course: www.flux-academy.com/courses/...
Maddy’s RU-vid 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

Опубликовано:

28 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 19

@mariamyusuf1689 Месяц назад

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!

@Brahdyssey 2 месяца назад

appreciate how understandable and practical this is. Also personally liked no music during the lesson, just a me thing i think

@willbaltazar7043 День назад

Super useful and relatively short tutorial! Thank you for explaining this!

@FluxAcademy 22 часа назад

Thanks Will!

@dotpenji 8 месяцев назад

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! 😊

4 месяца назад

Accordion text was great 🎉

@christopherneis5871 9 месяцев назад

how do you select the shapes to fill the inner area of the heart icon?

@projekt2948 7 месяцев назад

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!

@matheusbelt 9 месяцев назад

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

@raphaeluzoagba948 9 месяцев назад

Keep pressing ctrl d

@ramanasketches54 4 месяца назад

how to get the vertical scroll, as the container is fixed, we cant see the overflow

@israil2006 9 месяцев назад

You explained very well. great. Please play the subtitle in Turkish or Azerbaijani language

@user-nq4tr2zk3q 9 месяцев назад

Love you

@scribbleface 6 месяцев назад

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.

@Brahdyssey Месяц назад

The Toggle Switch didn't work for me until the circle was THE EXACT SAME NAME , and the outer button was named differently