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.
Guys, this video took me 11 hours to create. I hope you find it helpful.
Let me know your feedback to improve it further.
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!
Is it possible to do same thing in sketch ? (Trying to convince my friends to migrate to figma)