Interactive Components in Figma (BETA)

Рет қаралды 26,825

Күн бұрын

Figma File: www.figma.com/...
Join the Beta: help.figma.com...
Learn more about UI design: shiftnudge.com
Say hi!
/ mds
/ mds
00:00 Intro
01:03 Simple Interactions
05:21 Advanced Interactions
08:34 Add Animation Polish
12:43 Outro

Пікірлер: 85

@romansemenchenko9255 3 жыл бұрын

The auto-layout hack is absolutely awesome, thank you. Definitely, it opens up almost unlimited possibilities!

@mdsnotavailable 3 жыл бұрын

Glad it helps!

@annakropina8144 2 жыл бұрын

Thanks a lot for your amazing tutorial on variants and variant interactions! That's exactly what I was looking for. Hope you'll continue making tutorials cause you have talent for it:))

@mdsnotavailable 2 жыл бұрын

Thanks Anna!

@asherfaulkner5696 2 жыл бұрын

Your look after "big number 2" killed me, this is all good stuff mate!

@mdsnotavailable 2 жыл бұрын

haha, had to do it

@KiaanCastillo 3 жыл бұрын

So much value in such little time - thanks for another great video, Matt!

@mdsnotavailable 3 жыл бұрын

Thanks Kiaan!

@DarshanGajara 3 жыл бұрын

Your production quality is always so good, Matt!

@mdsnotavailable 3 жыл бұрын

Thanks Darshan!!

@dariadizhevska5595 2 жыл бұрын

The best video I’ve ever watched about interactive components !!! Thanks a lot

@azizbekpolatov583 2 жыл бұрын

Bro, you`re the best. I`ve been looking for this tutorial for weeks!

@maxbrinckmann 3 жыл бұрын

Dude, your videos look so amazing. Great job!

@mdsnotavailable 3 жыл бұрын

Thanks Max!

@Xianalin 2 жыл бұрын

Thank you, MDS, your video helps me a lot. Please keep doing this great job. 😊

@BrianWhiteDesign 3 жыл бұрын

Thanks for Sharing Matt - Hope you are doing well!

@mdsnotavailable 3 жыл бұрын

You bet! Same to you!

@garyvoigt321 3 жыл бұрын

I asked for more videos and you delivered. This one is VERY COOL!

@mdsnotavailable 3 жыл бұрын

Thanks Gary!

@blinn40x 2 жыл бұрын

SUPER SUPER HELPFUL - thanks for sharing MDS!

@mdsnotavailable 2 жыл бұрын

Glad it helped, Frank!

@kelindrawn 3 жыл бұрын

Thanks for the video! Can’t wait to use this in production (...and finally ditch UXPin)

@KIKI-zd5od 2 жыл бұрын

Thank you so much !!! I have been searching for this kind of interaction for weeks and finally got it from you! It’s very practical and helpful. I have followed you and look forward to more tutorials! Best wishes from the other side of the world ❤️

@JerimyBrown 3 жыл бұрын

Thank you for making tutorials for professionals. I can't tell you how many "here's how you make a button" videos I had to wade through to find this actually useful tut. I am considering moving over to Figma from XD and so far I love a lot about Figma, but since Figma doesn't support button/component states, achieving simple things like roll-overs seem unnecessarily complex, and seemed to prevent you from really utilizing the power of variants, until I saw this video. Now I am realizing I probably just need to adopt a different way of thinking ;)

@mdsnotavailable 3 жыл бұрын

lol, glad it's useful!! yeah variants are interesting. I kind of like how they are abstract enough to be used for both hover states and other random things with being too descriptive.

@JerimyBrown 3 жыл бұрын

@@mdsnotavailable Also, thanks for going through this at a pace that doesn't assume your audience is a bunch of dummies LOL. Nice to see what I needed to know quickly and be able to get back to work.

@nakreid771 2 жыл бұрын

@@mdsnotavailable using variants in Figma I was trying to make smooth transformation object that was created by pen tool. I didn’t really worked. I know it works in XD. Am I doing something wrong?

@ernestorodriguez4742 2 жыл бұрын

The video is very good. The music is the problem.

@abeerqamer9017 3 жыл бұрын

This is next level Thanks Matt!

@mdsnotavailable 3 жыл бұрын

Thanks Abeer!

@CortesArts 3 жыл бұрын

Good stuff man, hope you're doing well!

@mdsnotavailable 3 жыл бұрын

thank you dude! same to you

@jonahstef6204 3 жыл бұрын

The GOAT is back 🥳

@sirjareq 3 жыл бұрын

I'm glad that YT has the option to slow down the video XD.

@ariagrayson 2 жыл бұрын

We need more figma videos!! Please & thank you.

@uribudnik 2 жыл бұрын

crazy good video. thanks for posting this. i love the use of the figma capabilities at maximum efficiency, that is elegant. on small thing, the last technique you cover; for having a frame with 1-2-3 where two the numbers are outside of the viewport, you did not explain how that works. only because i had seen this before i was able to follow it, i wonder if many people got lost there. just trying to be helpful with some feedback. or maybe this is only for advanced designers that are supposed to know this already in which case please disregard my comment.

@Joilsonday 2 жыл бұрын

Thank you! A lot! =D

@elamaranr32 2 жыл бұрын

Great video 👍

@erfannourian644 2 жыл бұрын

Amazing :)

@dv4able 3 жыл бұрын

Didnt knew you can just drag starting frame icon (▶️)

@KissylaMascaranhas 3 жыл бұрын

This is Nice!

@justinhevey5182 2 жыл бұрын

smart, real smart thx

@Naga-raj 3 жыл бұрын

Thanks for this wonderful video, but I am a bit confused with different between Normal prototyping and interactive components??

@mdsnotavailable 3 жыл бұрын

Interactive components provide a little more extensibility. Specifically with the 123 screen, we only have to link the tab component once and then place on all the screens as opposed to creating all of those links 3 different times.

@Naga-raj 3 жыл бұрын

@@mdsnotavailableoh great thanks for you’re reply

@yellingbytes 3 жыл бұрын

Nice done tutorial. One question: do you recommend doing as general good practices as in 10:20?

@mdsnotavailable 3 жыл бұрын

Thanks! It really depends on what you're working on. I would only do this if I needed a robust animation with multiple options. For a stand alone design system that didn't have as much interaction, I would not likely do that.

@kakauefebe 3 жыл бұрын

MDS is a machine!

@mdsnotavailable 3 жыл бұрын

🤖

@thawatchaiwongchingchai1549 2 жыл бұрын

Cool

@ducthien244 2 жыл бұрын

Amazing!!!

@cryozeal Жыл бұрын

How do you put those interactive tab components into the design system (different file)? I found some issue doing that because the interactive tab component has 'On click' interaction to change state, and when I actually use tab component on design pages, I also need to add 'On click' interaction to navigate to a different page. These double 'On click' interactions seems to cause the prototype to malfunction.

@lermandiego 2 жыл бұрын

i do everything in the advanced interactions part, but! when i go to prototype screen and click to "2" or "3", does not work, do not understand why if i have done exactly step by step with the buttons down there which are connected to each of the screens up there. thanks

@robwinteruk 3 жыл бұрын

Have you figured out how to modify the labels & icons in instances and keep them as you click/hover to switch between variants? I find it always reverts back to the text or icon used in the main component, which doesn’t really work for a user test...

@mdsnotavailable 3 жыл бұрын

Yeah, creating proper state tracking etc. for a full-fledged user test can definitely. I think I'd need to know more about how you're using the variants/screens to give a good answer.

@marzbitenhaussen 2 жыл бұрын

cool

@azadmohan925 3 жыл бұрын

How to get figma beta, and the change to property doesn't shows me?.

@DvT093 3 жыл бұрын

In Axure this is a bit more easily done using Dynamic Panels IMO

@mdsnotavailable 3 жыл бұрын

It's probably the easiest in whatever tool you're most familiar with. I've not used Axure once in my life, so even getting to the point where it feels easy would take me longer than doing this "the hard way" in Figma. But agreed, this is not always the best method!

@nanloguero6430 3 жыл бұрын

Nice video! I tried using interactive components (with smart animate) in an overlay menu but unfortunately, using an overlay disables the smart animate feature. For example, a burger icon that morphs into an x icon with smart animate. This interactive component has been used in a menu screen and if I want to use this menu screen as an overlay, the smart animate feature is disabled causing that the burger icon morphs into the x icon with either an instant or dissolve animation instead. The workaround that I found for this was to connect the home screen to the menu screen with "navigate to" instead of using overlay. This keeps enabled the smart animate feature but the problem is that I have to duplicate the menu screen for every screen that is using it (which includes basically all of the screens in the prototype since every screen needs to access the menu screen to navigate to other screens). Based on the above, I was wondering if there is a way to use interactive components with smart animate in a screen that is being used as an overlay?

@mdsnotavailable 3 жыл бұрын

I haven't tried this with overlays, but will definitely look into it.

@youtubedemp8382 Жыл бұрын

Please, Sir the people is asking for more...

@ShaunMosley 3 жыл бұрын

Because I'm the only one that laughed at "big number two"? 🤷🏾‍♂️ 🤣

@mdsnotavailable 3 жыл бұрын

😅I had a sound effect in there at one point, but it felt too heavy handed. glad you got a laugh out of it, lol

@henrykkim 3 жыл бұрын

WOW

@attilabodi1216 3 жыл бұрын

I get that this is bata but is figma going to make complex stuff like this a bit simpler when the feature released?

@mdsnotavailable 3 жыл бұрын

01:03 - 01:40 is the simplest version of this feature. So if you're only making a toggle or something similar it's only a few clicks. It gets more complex as you try to do more things. Definitely a balancing act.

@MrConway007 3 жыл бұрын

Is this supposed to be a follow along tutorial?

@mdsnotavailable 3 жыл бұрын

Your choice

@strangehome3211 3 жыл бұрын

Custom strike through? Why? And how would that translate to any real app? Seems like a waste of time.

@mdsnotavailable 3 жыл бұрын

If you're designing a simple little app, subtle animations can really add extra polish and make it fun to use. If you think it's a waste of time then it is, if you don't then it's not. Here's a code example I put together that could easily translate into any app codepen.io/mds/pen/abJLgLZ

@strangehome3211 3 жыл бұрын

@@mdsnotavailable Impressive. However, there is an issue with long labels where the strikethrough will span the width of the longest label. Thanks for your response. Would love to see videos where you translate the designs to code.

@mdsnotavailable 3 жыл бұрын

@@strangehome3211 That issue can be fixed with a little CSS tweak... this was a super quick demo I threw together without trying to write production-ready, edge-case proof code.

@begumozdogan6836 2 жыл бұрын

vov

@emmanueludomisor543 2 жыл бұрын

Nice but you too fast, slow down

@mdsnotavailable 2 жыл бұрын

You can adjust the playback speed of the video to go slower than 1x if you’d like.

@GCunu 3 жыл бұрын

Hi. You seem like a nice guy, but please, please, please go away. Are these bells and whistles really necessary to designers, not to mention, users? And all these intricate steps to do a 1-second animation? Isn't this a waste of time? Time designers could use for actually designing. Please keep Figma honest and clean, no bells and whistle. Just good design and user experience. This is what happened to Flash years ago, once developers started tinkering with Flash and XML, it became a front-end dev tool, and the Design part was left behind. Please go away. Thank you.

@mdsnotavailable 3 жыл бұрын

Hi Gabriel, you're right. I am a nice guy, so I'm going to leave a nice reply here as well, instead of telling you to go away. Like it or not, animation is intricate. And if animation is added to a design you will absolutely go through a series of intricate steps to do it right. If you believe it's a waste of time, then for you... yes, in your world it's a waste of time. If you believe animation can add value to the user experience, then no it isn't a waste of time. I'm 100% OK with you believing good design and user experience has no animation and that this is all a waste of time.

@GCunu 3 жыл бұрын

@@mdsnotavailable Hi, Good design does not need extensive animation. Some very subtle animation is fine, but to spend all that time going through the steps isn't productive, and too much animation actually makes the user go away. That is why we, UX designers go through multiple rounds of user testing, to find out that bells and whistles are really not necessary within the human centric experience. Keep it simple, and you have a winner. Keep it REAL.

@mdsnotavailable 3 жыл бұрын

@@GCunu Believe it or not, we UX designers also animate user interfaces and are quite familiar with user testing. This is an instructional video showing multiple ways to use interactive components in Figma. I'm not preaching these techniques are required on every single project.

@madamschie 3 жыл бұрын

@@mdsnotavailable I agree that animated protoypes are alot of work to make, but they can really make a difference for user experience. especially nowadays if you dont put any thought into animations, your designs may feel very outdated (as for the endresult)... But im also questioning if its worth doing this for every prototype, as its very time consuming. I guess it depends on the situation and the budget of the client?

@GCunu 3 жыл бұрын

@@madamschie Hi. I agree with you saying that extensive animation and coding trying to create a "perfect" prototype are a total waste of time, definitely unnecessary for the purpose of presenting to stakeholders. I'd rather have my designers spend more time on conceptualizing than on coming up with "pretty" designs. Cheers.