Figma Interactive Components Tutorial - 15 Examples 📎 With Practice File

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments

Guys, this video took me 11 hours to create. I hope you find it helpful.

Let me know your feedback to improve it further.

👍︎︎ 8 👤︎︎ u/udayrajsathe 📅︎︎ Mar 01 2021 🗫︎ replies

Nice! I've only been using Figma for a month or two (switched from Photoshop) and I'm having a great time. This is an awesome feature that I'll definitely be checking out once I (hopefully) get my beta request approved!

👍︎︎ 3 👤︎︎ u/roartex89 📅︎︎ Mar 01 2021 🗫︎ replies

Is it possible to do same thing in sketch ? (Trying to convince my friends to migrate to figma)

👍︎︎ 1 👤︎︎ u/janhknotcn 📅︎︎ Mar 05 2021 🗫︎ replies
Captions
Hey guys, welcome to another Figma Tutorial. Finally, the most exciting Figma update is here. By end of this tutorial, you’ll be able to create interactive prototypes for Mobile & Web in no time. I have covered the basics & 15 Most common examples here. Here’s a glimpse of what’s covered. They are not at all difficult to learn if you pass 2 main requirements. First, you must be approved Beta Tester for Interactive Components. You can sign up for that from the link below. Second requirement is to know how to use Variants & Prototyping. Link to both Tutorials is in the description or somewhere here on the top. You can pause this video right here, watch and come back. If you pass both of these requirements, let's dive into it. It will be great if you can follow along. Download the practice file from the link in the Description or the comments section. Timestamps are added so that you can easily skip or repeat specific topics. Now let's begin with Mobile Interactions. Here are our checkbox components. Interactive components update added Brand new action called ‘change to’ We can not select it just yet. We need to combine them as Variants First. Let's create Variants for Checkbox, Radio and Toggle. Once Variants are created, we can now add interaction. Open Prototype tab. Select empty checkbox & connect the node to Selected checkbox. That’s it. Interactive component is now created. You can identify it by Brand new action call ‘Change to’. We can change Animation, Easing and Duration. Connect Selected checkbox to Unselected to finish the interaction. I’ll follow the same process for Radio and Toggle. To try it out, you need to add Instance of Interactive component. Go to Example Playground page. Drag and drop checkbox, Radio and Toggle from assets Panel. Preview Prototype. Awesome. These interactions open a lot of possibilities. Let’s try more complex components. Connect To-Do List items in the same way. Here we have 2 states - Selected and not selected. Add instance of it on in playground file to test it out. Where did it go? I’m not able to find it. Here’s why we need to rename components & layers properly. Now we can add more items on the page to test it out. if you rename any of text layer in one state, Figma will retain those in other states automatically. Preview Prototype. As we created combined component, not checkbox but entire row is clickable. As you can see Figma is retaining the text overrides. Great job Figma. Now, the next example is Navigation Drawer. As you already know, we need matching layers for Smart Animate to work. Thus I’m hiding this Navigation links by moving it outside the frame. Now connect the Menu icon to Expanded Drawer. Connect Cross icon back to main frame. Menu and Cross icons are using same layers hence they will animate. It is already added on playground file. You can verify Variant interactions by clicking on the Trigger. Preview Prototype. Oops. We need to move it to the front. Preview it again. It looks amazing. I can do it all day. Let’s move to another common ui element. Tooltips. We have hidden tooltip in Closed state for Smart animate. Unlike checkboxes, we have text layer in different state which is not default. To make Text overrides, go to its instance and choose the Open Variant. Type whatever you want in the tooltip. As you can see, we have overridden the text. Change it back to closed state. Add interaction using Trigger as While Pressing. preview prototype. Looks neat. Moving on, We will check Drag interaction on Interactive components. We have Slider and Swipe gestures. Observe the layer structure in Slider and Icons. We’ll see how it animates in a minute. Select the Knob and connect it to next variant. Default Trigger is on Click. Change it to 'On Drag' for realistic feel. Preview Prototype. It's looking just like a real app. Next one is Swipe Gesture. You can see that Gesture part is hidden behind the Card. This is needed for nice reveal effect with smart animate. Connect this Card frame to next variant and vice a versa. Change Trigger to 'On Drag’. I have added multiple cards on the interface. Also changed the text layers for real feel. Preview Prototype. See, how easy it is do to this now. Best part is, all overrides are updated in real time. The next example is Counter. Remember the Counter Tutorial ? I had to duplicate multiple frames to make it work. Not anymore. Now we just have to connect components correctly. Verify the Numbers positions and That’s it. Add the instance on the frame to test it. Fantastic. Now it’s time for some Time Trigger Examples. We can now create Loading indicators in minutes. Here are 2 circles with different sizes and slightly different color. Observe, that the Frame sizes for both of them is same. Interactive components currently work well with same size components. Connect both of them with Time Trigger. Delay of 1 millisecond. I’m setting animation duration to 1000 millisecond. it will give nice Breathing effect. Drag a instance on frame and preview. Reload Prototype. This breathing effect is so satisfying to watch. Let’s try adding 2 of them. Reload Prototype. Looks kind of cool, isn’t it. Let me try one more variation here. I’m changing the state of one instance. Figma will start animating from that state. Bring them closer and Reload prototype again. It's wonderful. We no longer need to add choppy GIFs for such interactions. Next one is linear loading indicator. I have a red background frame and a rectangle with gradient. I have placed rectangles at 2 extreme ends. and Smart animate will animate the position. That's how we’ll get this loading effect. Connect First Frame with Time trigger & Duration as 1000 millisecond. You can connect 2nd frame to first one with smart animate if you want a back & forth movement. I want unidirectional animation hence I am selecting Instant, which will start animation again from the left. Drag the instance and see it in action. As component wasn’t responsive, it needs few tweaks. For now I’ll match its size to Iphone X screen size. Change size and position rectangles once again. Reload prototype. Perfect. You can add multiple such animations on a single page. The final animation for mobile, is loading state. I’m assuming that now you already know how to do this. Let me just add interactions. Btw, We saw all the components one by one. Now lets try everything together before we wrap up mobile Interactions. Wonderful. Which of this is your favourite? Let me know in the comments below. Wait. Tutorial is not over yet. We have Web Interactions too. This should be easy now. Let’s start with Navigation Links. We have Inactive tab and Active tab variants along with their Hover states. We just need to connect them using trigger as 'While Hovering’ & duration as 100 milliseconds. Also for Buttons, we have Default, Hover and Pressed State. Connect default to hover with While Hovering Trigger. Connect hover state with Pressed state with While Pressing Trigger. All these navigation links are inside Auto layout frame. Currently Interactive components are not working when they’re inside another component. Preview Prototype. Navigation links are looking good. Let’s add Card Hover Effect. Just like circular loader, Frame size for both cards is exactly same. Just the card background size is changed. We need to do this for card growing effect using smart animate. Test the interaction. All of these interactions are taking us much closer to Realistic prototype. Final element on this screen is Image slider. Here is Image component with a Rectangle for background and text layer for country name. You can connect these with Time trigger as After delay, delay of 2000 milliseconds, that is 2 seconds. Animation as Smart animate. Reload Prototype. Now images will change after 2 seconds. We can tweak smart animate duration to make it smoother. Let's check all web interactions together. Image slider is running while you can interact with rest of components on the screen. This is fantastic. I’m sure you understand how important this update is. This is going to make you a better designer. Before we wrap up, I want to reiterate that this is Beta Update. Some things might change or behave differently in coming weeks. I’ll definitely create follow up videos for more updates. Currently only Beta Users can Edit and Preview these. So if you need to share these designs with Non-Beta Users or your clients, you can turn off Interactive components in Prototype Mode. Feel free to post bugs and suggestions in Figma’s Support Forum. Figma has a good track record of listening to our feedback :) I hope this was helpful. Thumbs up if you liked it. Comment if you loved it. & Subscribe to stay notified with upcoming videos. Thanks for watching till the end . I’ll see you in the next one.
Info
Channel: Udayraj Sathe
Views: 13,786
Rating: undefined out of 5
Keywords: figma interactive components, interactive components, interactive components figma, new figma 2021, new figma features, figma new update, figma update, figma interactive components tutorial, learn interactive components figma, Figma interactive component animations, figma swipe prototype, figma swipe animation, figma swipe gesture, figma swipe interaction, figma hover, figma hover and click, figma hover menu, component states figma, figma component states, figma tutorial
Id: tHvx1ug876g
Channel Id: undefined
Length: 17min 36sec (1056 seconds)
Published: Mon Mar 01 2021
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.