Transcripts
1. Introduction: Hello friends. My name is Tatiana and today I'm excited
to share with you my knowledge on how to
create prototypes and figma. Prototyping has become
an essential skill for UX and UI designers. As with prototypes, you can
show how your ideas should work in a real app or
mobile application. Also with prototyping, you
can communicate better with your clients
or for example, developers who should implement or design in the real life. Basically, this course has
been created for all levels. Doesn't matter if you are
just starting out with Figma or you already worked
with the sulfur for a while. We will start with
basics of prototyping on how to create basic
interactions between screens. And then we'll move on to
more complicated topics, such as creating
interactions for clicking and dragging
hover effect. We will also talk about
different types of animations, including
smart animate. The end. We will talk about
how to work with interactive components which are very essential to speed up
your prototyping process. I hope to see you
inside of my class and enjoy my first tutorial.
2. Basics of prototyping in Figma: In this video, we'll
talk about how to create a simple interaction
between two frames. I already prepared two
different designs for a hero section and
also for our products. This is just a simple
fictional shop that we're going to
work books today. Sigma, as you already know, on the right money tab, you'll see Design tab. This is basically where you do everything related
to your design, alignment, colors,
typography, and so on. Then you have Prototype tab. And this is actually what
we're going to talk about. They, and also in
the next videos, inspect that is just engaged
if you want to know, for example, CSS settings
of other elements. So when you are in
your prototype section and you select your frame, you immediately can see an
ending point or the plus icon. This is quite easy because
when you press on it, you immediately see
an error that you can point to another
frame like that. When you release your arrow, you immediately get the
interaction details which are quite adjustable. So in this case you can select enclave on track and so on. But in this video we
will only focus on the basic click interaction
and we'll talk about more details about animation and other interaction types
in the next videos. To delete, for example, interaction select an error and press on the
Delete keyboard. In my case, it will
make the most sense to connect Shop Now button
to the next frame. So let's just quickly do it. Select the Shop Now button and connect this button until
the next frame, like that. The zoo can see here, I can immediately navigate
to our products frame. And if you have
different frames, so you can easily select
from the list here as well. Alright, let's also
connect the upper menu in my hero section as well to
the next frame like that. And of course, if the
user is on our products, maybe he or she
wants to go back. Let's just connect this button. Go back to our initial frame, the hero section and the same. Usually when the user
presses on logo, you will see this
indirection that you can go back home to the main page, important to mention,
if you actually click on a gray background area, you can immediately see all of the interactions that happen
between both of our frames. Let's say you decided to change some interaction or
maybe you made a mistake. You can easily do
this modifications by selecting an arrow and actually changing
the settings in the interaction details or
in an animation subsection. If it has that, let's preview our prototype
and the interaction. To do that, let me get to the upper menu bar and
press on the present icon. Alright, so we are in a
presentation mode and let's quickly test if actually
our interaction works. When I hover over my
bottom right here, you'll see that the
mouse arrow changes and that actually it indicates
that I can click on it. Simple as that. I'm navigated to the next frame to our
products as well. I see that my next button go
back actually works as well, and that's how I navigate back. Let's also test quickly if this manual works, our products. Yes, perfect, it works. And the final interaction
is going to be on our logo. And yes, we are also
redirected to our homepage. In the next video, we
will talk more about the presentation
mode settings and also devices that you can
use to view your prototypes.
3. Presentation mode & devices: Here I would like
to share with you a few tricks in the
presentation mode that you can use to get the best viewing experience
of your prototypes. When you open your frame, you can basically
interact with it. But for example,
if you are unsure or if your user is
not true right-click, you can simply click anywhere
on the frame and you will get the hints on where
you actually click. So this is just the clickable
areas that you can use. Of course, when you hover
over these elements, you can see that they
are clickable as well. Let's talk about different
options right here. You could fit your frame to the different width
of the screen. So actual size means
that your frame will so a 100% of
how it should be. So if your frame has much more pixels than
your actual screen, then you will not see it fully. The best one would
I like to do is fit width or for
example, full screen. Then you see a general overview. Not area of your frame is
scarred out and you can easily navigate and test it out as
well in the options you, for example, can disable
the hotspots in onClick. So when you press on your frame, the null hints are
being shown anymore. When you activate it. Now you see the
hints again as well. You can hide the sidebar
so you have a better view. You have more area to
see your prototype, which is also quite useful. Of course, the last one
is to show Figma UI. If you're disabled that, then you do not see any
many settings anymore. To reactivate it back, you can see the hint
from Figma press Control slash bar to show the thing
my UI again, Let's do that. Here we see again our menu. What I also like about the presentation mode
is that you can collaborate with your team
members or with your clients. For example, the main feature
is to share the prototype. When you press an
a sharp prototype, you can actually add the
emails of people who you want to view your prototype
or actually edit that. This is quite useful if you
want to collaborate together. Even easier, you
can actually have anyone with the link can
view or for example, can edit in Figma like there are free
and also paid plans. And on the free plants
you have a limitation on how many people can
edit and collaborate. But we will not cover
this topic here. You can easily read it in a health center of
Figma and as well, the last point I wanted to show right here is that you can put comments on your prototype
in a presentation mode. For example, let's
add something. For example, when your
team member opens it, they can immediately
see that you left a comment like, Hey, I want the color of this
button to be changed easily. Another person can
either reply to your comment or for example, market as resolved
also when your exit from the presentation mode, you have different sentence
in the prototype DEP. This settings are only visible if you
deselect the frames. If you select the frame, then you have totally
different settings right here. So let's quickly deselect it. And one of the most
important settings I will just show you is
actually device. It's quite useful
because you can preview your prototype on
the real device. And in this case, I
will like to preview my mobile version of
our products screen. The frame that I created
is iPhone 11 Pro. Let's check it. You can immediately
see the preview how it will look like. You're going to, for
example, modify the model. You can choose a
silver space, gray, midnight green, but let's just
keep it gold, for example. You can also modify
the placement so either vertical
or horizontal. And of course you
could see the flows. And right here we can either
copy a link to your flow, specifically select
the frame of the flow. As you can see, the
first flow immediately redirected to my
hero section frame. And of course you can
immediately play it. Yeah, let's see actually how our second flow is being
shown on a real device. So right here we see actually
how our mobile version of the screen is gonna be
displayed on a mobile phone. And it's actually
quite nice to see, especially for the margins on the side margins and top
margins to make sure that nothing is cut out and
that your user will get the best experience
out of your prototype.
4. Animation types.: Remember our simple
interaction between two frames that we
created a while ago? Well, if you remember
it correctly, we did not play
around specifically, would've settings of the interaction details
and animations. And today I'm going to explain to you eight
different types of animations that you can actually use in your prototypes. So by default, in Figma, your animation is set on
instant and an instant. Actually your prototype
transition is quite a broad. It doesn't have this
smooth transition that you usually see in nice
apps and websites. To create a smoother transition, I always recommend to
start with basics. For example, by choosing
dissolve animation, it will dissolve animation. You can have this different
curves that you can select with different
types of transmission. So by default, it's
set to ease out. And here you can set
different types of delay. For example, if it's
only 300 milliseconds, the transition will
be quite fast. What I like about sigma is that right here on this black box, you can immediately
see the interaction, how it will look like. So let's test it quickly
on our prototypes. So I press shop now and I
see this smooth transition, but it was quite
fast right here. Let's increase it to 1 second. Here are the transition is
smaller and much slower. In this case, it doesn't really apply because
it looks a bit strange on a website to have
a transition like that. But he's gonna be useful,
for example, for slides. If you have some
presentation to make, then it will look much, much better rather than
just an instant animation. The next animation type
I would like to talk about is smart animate. Smart animate looks for matching layers
between two frames. It recognizes the difference and actually animate this
layers between the frames. I will quickly show
you how it works, but we will have another video specifically dedicated to smart animate because it's
a bit complex and it requires more
time to explain. So as well, Let's just
select ease out with, for example, 800 milliseconds and you will see what
is going to happen. Let's press our bottom. You see that the animation
that was quite complicated. So Figma found this combinations
between texts layers. And you can see that we had this complicated
interaction that where the primary texts was kind of going upwards to the next frame, the next animation is moving. And you can see that actually our friend is getting moved
in from different direction. And what I like about
this type of animation is that you can
select the direction, whether it comes from the top, from the bottom
or from the side. Here you see our second
frame is getting moved in from the left
side of our first frame. Move out has a very
similar indirection, but it just works
other way round. Let's quickly check
how it looks like. Bush has quite a similar
animation and interaction. You can also select
different directions from which the second frame is
pushed onto the next one. But I also quite like it because it can be really
nice interaction, especially when you have
scrollable website. It's quite awesome, but
maybe to make it better, we can increase delay. Let's increase it to
1600 milliseconds. Here's awesome is quite
a lot of websites and nowadays use this
trick when they want the user to waste could
scroll down and get his cool interactions when
they press on the button. I really, really like it. So I didn't works
exactly like push by. It has this feeling as a slide and it's
coming from the top to our frame and basically
moves it out right here. You can also select
different directions, but let me quickly show
how exactly it looks like. So basically, our frame is
still coming from the top, but it doesn't push
out the first frame, but it kind of comes on
top of it as a slide. Finally, the last
one is slide out is when the first
frame is getting slide out and the second frame
appears exactly like that. So that was quite a simple
interaction right here. On the animation,
you're going to have different types of interaction. And by default it's an ease out, but you can play around and
select different settings. But for example, if you also want a really
advanced animation, I recommend to use custom. We'll talk about that
later in more details. But what custom you can have
more advanced interaction. So right here you can
see this strength curve, which you can change, for example, like that. And you will see totally
different animation compared to the preset default.
Exactly like that. You can see that
first it was quite fast and then you get the delay.
5. Hover effect: Today we'll talk about how
to create a hover animation. This animation is extremely
easy to do and to be honest, is my favorite type of animation that you
can do in sigma. Right here, I already created a frame with
a desktop size, and I already also found an
image with some furniture. So let's imagine we
create a hover animation for an online shop where
you sell furniture and you want to display some really cool animation was someone basically hovers
over with their mouth. So to start, let's quickly copy this image outside of our frame. Right here, we're going to
make some modifications to display our hover state. So in my case, I would like to
add extra fill of a black color with the
opacity percentage of 30%. I will also add a title. Alright, so I basically changed the font and the size of it. Let's also select both
of the layers and place the minimalistic sulfurs in the middle of architecture. And also if you
create an online shop is very important to
place call to action. In my case, I will create
a button which says Shop Now so the users can immediately opened the
selection of sulphur has, let's say, and shop the
ones that they like. Let's move our text layer above our rectangular layer so
it's getting displayed. Of course, let's select both of these layers and create an
alignment in the center. I will group these
two layers as well, and I will also decrease
the size of this button. I will select my image and also a button to ally
them both in a center. All right, So when you are done with creating your hover state, select all of these layers, and basically click on the right mouse and
select Frame Selection. It's really important
that you do not just group this elements, but you select them as a frame. When both of the
states are ready, let's navigate to
the Prototype tab and create our interaction. Of course, I'm going to
connect the first image, the idle state, to
our hover state. In the interaction details I
will select while hovering, which is quite logical. Important part right
here is we will not select navigate to the fray, but we will have to
select Open overlay. With open overlaid, it means that the layer
that you are being pointed tool actually will
replace the first layers. So in this case, we'll get
the perfect hover effect. And of course, in
an overlay section, you have multiple functions. But what is important here to choose is manual because we want to make sure that our image
is being an executive, the same position as
our guard in the frame. So as you can see, I can move the position of my hover layer in
the different size, which means that it will be
not exactly in the middle of the first image for our
experiment, for our test. Let's just do it
exactly in the middle. Let's immediately
see how it works. So here I will
hover with my mouse and look and see a different hover state, which is perfect. But as you can see as well, that the animation
is not quite smooth. The reason for that
is actually our animation setting
because by default, as you remember from
previous videos, is set on instant. But in this case, let's choose dissolve and we will just keep it as
it is with a default 30 milliseconds of
delay and ease out animation and let's quickly
check how it works. Yes, as you can see,
it's much smoother. You see that
transmission is much better and it feels
more natural. So that was the boreal
about hover animation. See you in the next video.
6. Smart animate - part 1 (basics): Today we will learn about
smart animate in Figma. With Smart Animate,
you can connect to similar frames and get the
fluid animation between them. But to illustrate you more
precisely how it works, let me quickly show
you a simple example. In sigma. Let's create two frames. I will select as always, mobile frame of
iPhone 11 Pro Max. I will immediately duplicate this frame for the convenience. Let's just create
a simple shape, for example, a rectangular. I will place my Rectangular on the first frame
on the bottom. And I will quickly select
a random color to fill. And I will copy paste this rectangular to the second frame, but I will also move it
to the top of the frame. And also to
illustrate to you the smart animate the animation. I will rotate this
shape on 180 degrees. Right now you didn't see
any visual difference, but trust me, in
our presentation, you will definitely see that. Let's quickly navigate
to the Prototype tab and connect both of our frames. So I will just select on tap, I will create an animation
with smart animate and what the default settings of ease out with a delay of
300 milliseconds. And let's do the same. When you tap back
on the same shape, you return back to
the first frame. All right, Let's quickly
validate our prototype. So I'm going to quickly
click on my shape. As you can see, it's
mostly rotated, but I think that the
delay was just too quick. Let's quickly go
back to our file and change the delay
to a bigger number. Let's test it again. You can see that our shape is being rotated in a smaller way. And I really like it
because you can create so many complex animations
with smart animate, but just to give you
another example to compare. So what will happen if we just simply dissolve our animation? Will there be a difference? You might think that yes, it will be exactly the same, but actually it will
be quite different. So I write here, let's
click on our shape again. And you see that the
rotation does not happen. And of course, if it did
not rotate your shape, that it doesn't really matter. You just see the
smooth transition, but you didn't see this
awesome animation effect as we just did before. Let me also show you how smart animate works on
a real life example.
7. Smart animate - part 2 (menu bar): Imagine that you already have a hero section for your website. In my case, I already
prepared a basic layout and you guys are welcome
just to copy it or create your
own hero section. But what I'm going to
illustrate right here is how the hamburger menu will behave with smart animate when
the user will click on it. Let's quickly select our
frame and duplicated. And in the second
frame we are going to create our interaction on how the manual slide
out from the right side. So first of all, I will take this
hamburger menu and I will rotate it by 90 degrees. And then of course I
will create a menu box. Let's quickly also colored in a darker shade of yellow
and they'll forget to move it under the
hamburger menu because you want to see it with a stroke. I will also modify
the colors so we can see our hamburger
menu quite precisely. The last step would be just
to write some menu items. I will select all of my
text layers together with a rectangular box and also
will align them to the center. Right now if we will connect our hamburger menu
in the prototype, we will not see any
specific animation, but we will just see
a very nice flow where the money will appear. Let me quickly illustrate it
to you in a prototype step, let's again connect our
hamburger menu onclick with smart animate with a delay of 800 milliseconds and
the same right here. When I click back, my menu will disappear. Let's quick with that spit. Yeah. So you see that
basically the manager slowly appeared with
a smooth transition. But what I want to
achieve is that my manual slides off
from the right side. So to achieve that, I'm going to take my menu and I'm going to copy paste
it to the first frame. And let's select this
menu is in both of the frames and move
them outside of our frame is quite
important because Figma bicycle tracks all the
interaction that happens. So if our money is going to slide out from
the right side, we have to move it in our first, in both of our frames. And specifically in
the second frame, Let's just move it back
as it was initially. Let's quickly see if we
get a better transition. Yes, So this is what I wanted
to achieve is quite nice. And of course, with
Smart Animate, you can create much more difficult and
complicated animations. But as a basic lesson is a good start for you
to start exploring. Let me know, guys, if you managed to do it and I'm curious to see your
works as well.
8. Horizontal & vertical scrolling - photo gallery app: Hello friends. Today we'll talk
about how to create a horizontal and
vertical animation. And specifically
for this lesson, we will create a simple
screen for travel app. So let's quickly open Sigma, select our frame tool and
select the preset phone frame. In my case, I will
select iPhone Pro Max. I will quickly add some title. Let's also set the size to 26 and also the thickness
of semi bold. I will also create a sub-headline
and decrease its size, of course, and also the
thickness to medium. The next step would be to create a travel cards that I would
further would like to animate and make them available in the
horizontal direction. Let's also round the corners. Right here. I will
also write some text. For example, New York. I will also group these two
elements and copy them. Alright, just for
the convenience, I will move this
elements outside of the frame unless actually
first rename discards. I will also select
each rectangle and add the image for it. Basically, I use Unsplash plugin where you can search for a bunch of different images
for any type of topic that you have
for your prototypes. So let's start with New York. Beautiful. I really
liked this images. Let's select all of these cards and with a
right-click on our mouse, let's select Frame Selection. So it's really important
that our elements are inside of a frame and not
just inside of a group. I will select the frame and
move this elements inside of our app quickly to create the elements for
vertical scrolling, I will just copy the
sub-headline and create the cars for our
vertical scrolling. Right after I got it, All of this elements, of course, I will put them outside
of our frame so I can make the
modifications easier. So let's also change
the titles and the images for each
of our depth element. Perfect. Let us again select
all of our elements as well, convert it to the frame. And of course this frame, I will move back inside
of my app screen. Perfect, So our app
screen is ready. But before we proceed, the prototyping, let me
tell you some trick. You consider the frame goes outside of the frame of our app. And to make our horizontal
and vertical scrolling, we need to modify the
borders of this frames righteous to the same width
and height of our travel app. This is really important
because if you leave the frames outside
of your app frame, the animation will work. I will also modify it like that. When you go to the Prototype tab and you select your frame, you can see here
immediately overflow scrolling tab that
the chest appeared. And by default, you'll
see no scrolling. That means that no
scrolling animation will be implemented. When I open the drop-down menu. For this case, I will choose
horizontal scrolling. The same for the next frame. Will also choose the overflow scrolling to vertical scrolling. Awesome. Let's see how
it works in action. Perfect. This is our app. I'm going to scroll
this cars and it works over horizontal
scrolling is quite perfect. What about our
vertical scrolling? It also scrolls, but I see
some overflow right here. Basically, this frame goes above our subtitle and
other travel guards, which is not how it should work. To fix this issue, go back to your prototype, select the vertical frame. And actually in the
design section, it's really important that you take the clip content function. And when you clip content, that means that basically
the scrolling will not go outside of
the frame borders, which are exactly
defined right here. Let's see in our
presentation mode the changes that we just made. As you can see right now, I scroll and basically my
elements and not overflow, they do not override my opera
elements, which is amazing. So that was the tutorial about vertical and horizontal
animation in sigma.
9. Open overlay - banking app: Today we will learn
how to create overlay animations in sigma. Overlay animations
are especially useful for mobile apps or for any type of prototypes where you would like to
show a popup message. For example, to notify the
user that the action happen or to warn about the
mistake he made and so on. They will work specifically with the finance app that
I already prepared, but this is just
an example to show you how the animation will work. Let's create together
a notification when the user will
press on safe button, I will specifically
create a new frame with a random size outside
of my mobile app frame. So this one will be
named as a notification. Let's create a headline
here, so well done. Alright, and the
last step will be to actually create a call
to action button, which will be much
smaller than this one. And we'll just say this group together all these
three elements and align them exactly
in the center. So specifically for
this notification, I will also round the corners right here to the value of ten. And I will also add a shadow to this
frame in the effects, Let's create a drop shadow. Unless just wanted to find
some settings right here, I will blurred a bit
more and maybe decrease the opacity of the
black color to make it offer more natural look. Alright, so when you are
done with your notification, let's jump into the
prototyping section for the type right here. And we are going to remove the device because I don't want to see any device for now. Let's connect our Save button
with our notifications. So when I will click
on this button, I would like to see my pop-up. But in this case, as you can see in
the interaction, the preset setting
is navigate tool, but we would like
to change it to open overlay and
an open overlay. That's where the fun begins. You can align it in a
center or for example, top-left, bottom
left, and so on. Let us see what happens when we basically select this
central overlay. I will press my
Save button and I see my notification
right exactly in the middle because
our open overlay was set to the central position. But if I want more of
a custom position, I will modify my overlay
to the manual position. In the manual you
can see right here my notification has
with this cross lines, which means that
this is the position where I will set it
to be in my screen. I would like to basically
move it right here. So the more of the upper
part of my prototype, Let's check how it works. Let me quickly press on
Save and you can see that my pop-up notification is right in exact position
where I set it to be. So I hope you liked
this tutorial and see you in the next class.
10. On drag animation - transfer app: Earlier were mostly worked with prototype triggers such as
onclick and also hover. But today let's talk
about how to create an animation will
trigger on drag. This type of trigger
allows it to perform an action when you
drag an element on the screen, I will quickly create a title. Let's change also the
color of the blue. Let's also quickly create
a call to action button. Let's round also
the corners to 20, and let's also call or it into the blue color. Perfect. Now let's get onto the
most interesting part. We are going to create
a slider that we are going to animate with
Andrex animation. I will select the rectangular
tool and draw a very thin rectangular that we'll introduce
the line of our slider. Let's also round
the corners of it. I will change the fill to
the lighter gray color. I'm also going to copy the same rectangular and change
it in its width. And its very important for us to create an animation
what a slider will also change a color when the bottom is going to
move to the other side. Let's quickly fill it as well
into the light blue color. I will make it even smaller. And the last step will
be to create an ellipse. This ellipse we will interact
for our on track animation. Of course not to forget, we also have to create a number, basically, the number that we want to transfer it to someone. Let us quickly revise
some fiction or numbers. For example,
twenty-five dollars. I will align it in the center, and I will also copy
this number to create this crawlable effect of the numbers changing while
I'm dragging my slider. It doesn't really matter that position at
the moment because we are going to group it into
the frame and change it. So basically, the constraints
will be different and will not overlap with other layers that we have in this screen. I selected all of my text layers and I'm going to press on the right-click of my mouth
and press on frame selection. And that's basically
position it a bit higher. So what we're going to do is that we have the
margins of our frame, the blue box around
all of our elements. And I'm just going to drag this margins back to my
initial number like that. But in this case we spill, see other numbers and they
overlap with other layers. To solve this issue, I'm going to clip content. As you can see, other
numbers just disappeared. I just grouped all of
these elements and I will align them
exactly in the center, maybe a bit higher just to
make it visually pleasing. Unless quickly copy this frame and create the next
state of our slider. So in this case, I will just move the
ellipse to the right, right here until the edge. And say what's gonna happen with our second rectangular
of the slide. I'm just going to drag it with the West to be aligned
with the ellipse. And this one will allow us
to create a nice animation that the color is changing when the ellipse
is being dragged. And as well, Let's look, forget about our number. So here of course it was slide
to the right and mix it, our number will
increase as well. What I'm going to do
inside of the frame, I just selected all the
texts layers and I'm going to move them up
with the arrow keys. Exactly like that. So right now we have
two of our frames. Let's move to the
Prototype tab and actually create our interaction. We're going to work
with our ellipse. We are going to connect
our second frame in the interaction details
I'm going to select on Drag. This is what's going to happen
when we drag our ellipse. And of course, for
the animation for the better visual
effect and also for the smooth transition
we are going to work with smart
animate, the same. Of course, when I
drag my ellipse back, I will go to the initial
state in my first frame, the same on track, navigate to the slider
is 0 frame with a smart animate animation with a delay of 300 milliseconds. So let's quickly validate our prototype in the
presentation mode. Right here, where in
the presentation mode, and it's quite exciting. So let's try to drag our slider. And as you can see, the
numbers are changing and also the slider is getting filled with
a light blue color. This is the perfect showcase
of the drug interaction. And it looks really nice
because you can have such a real simulation
of the interaction, for example, for this
imaginary banking app, See you in the next tutorial.
11. Interactive components - social media app: In this video, we will create animations with the help
of indirect of components. Interactive components allow
you to define interactions and animations between variance
in the components set, which means that the
instances become immediately alive in
the prototyping mode. This way you can create reusable indirective
elements faster and also reduce the complexity
of your prototyping, which in general speeds up
your prototyping workflow. So let's quickly create our
interactive components set. So open your Figma
file and let's immediately go to
Plugins and select icon. If I plug-in, in this case, I would like to add a hard I
can because I would like to create a sort of social media app where
the user can like images. Let's quickly import it
and I can see it here. Just for the purposes
of this tutorial, I will ungroup this frame and actually I will
ungroup the group itself. So in the end I only
have a vector layer. This will be an idle state, but we need to create
two more states, which means what will
happen when the user, we'll hover over the
icon and also what will happen when the user
will click on the icon. Let's duplicate this
icon two times. First, I will work
with a hover state. So for this case, I will create, fill and select just the color it makes sense are the
hardest sort of pinkish. But let me just quickly copy
this color code for myself. And that will reduce
the opacity to 30%. The same for the onclick state. I will create, fill and then copy paste exactly
the same color. But in this case the opacity
will be fed on a 100%. When you are done
creating your state's, select all these layers and navigate to the upper menu
bar where you see components. I can open it and select
Create Component set. So it's important that
you do not create a component out of
the three elements, but the Ukraine,
a component set. Right here, you immediately see the borders with
the dashed lines. And that means that
this is your components set is created. Before we start prototyping, it will be smart to rename our variance inside of
the components stage. So the first one will
be default of course, but the second one, I will chest set the property to hover. And the third one will
have the property. Click. When you are done
renaming your variance. Move to the Prototype tab and let's create our interaction. Of course, from the idle state, I'm also the hover state, which means while hovering, my variant will change
the property to hover. You can see it right here
with a drop-down menu, you can change to a
different stakes, but in this case, hover
makes the most sense. The animation I will select
and smart animate with the default settings of ease out and a delay of
300 milliseconds. Then of course, let's
move to the next state. So when I click on it, I changed to the
click it as well. Here is smart animate as
in the previous example. And of course, if the
user deselects our icon, then we move back
to our idle state, which means the same
one would click on the click states that we
go back to the default. This ECS that our
directive components are created right here. And let's quickly create a simple mobile phone screen with our basic social media app. I will immediately select our default variant and copied outside from the
components set frame. I will press on the Alt and drag it to my
social media frame. And of course, I
will select both of these elements and copy them to create more of the
same variance to simulate a social media
feed, it looks fine. And the last step
will be of course, to pay some images with my favorite plugin
called Unsplash. Let's just randomly put
some images in here. Perfect, and if we've done
everything correctly, that means that we
would not have to connect any wires
outside of our frame. We can just immediately go to the presentation
mode and see how our icon changes its
states. Awesome. You can see I hover over, I can click, I can
like the image. I can like another one. I can like another one again. And of course I can
unlike it if I want to. This is really amazing because my workflow is so much
more easier than if I will just simply
create another frame and I would connect every
icon to that frame and so on. What is also useful about
interactive components is that you can share it
across with your team. And for example, if you have multiple pages in
your project file, you can still find the
same icon in your assets. In your essays, you can see the local components and you can simply drag it and have
it on another page. This really simplifies
the workflow. And for example, if you collaborate with
different people, they can also use the same icon, the same interactive component through the file that
you work together on.
Tetiana G, UX Designer
