00:00 today we're going to be diving into
00:03 prototyping 101 should be more like a
00:05 tiptoe a tiptoe and a splash we're going
00:08 to talk about these Concepts so that
00:10 y'all can better understand and work
00:13 with it uh and test your ideas so once
00:16 again prototyping is going to allow you
00:19 to take your designs and the test the
00:21 ideas that you have to share them with
00:24 others if you are a designer developer
00:27 or if you're working with developer or
00:28 if you're working with Stak holders you
00:30 need to show them something that works
00:32 you need to show them something that
00:35 that that is much more than just a
00:37 static or a flat screen and that's why
00:40 we have prototyping capabilities in
00:42 figma it helps you bridge that Gap a
00:45 little bit sooner if you don't have
00:47 development shops sometimes you just
00:49 need to test something out so once again
00:52 my name is Miggy uh you can find me on
00:56 twitter.com as migy I'm also joined by
00:59 Alex Alex figma edu we run these
01:01 workshops every month to just support
01:03 the education Community out there
01:05 whether you're a higher ed or a boot
01:08 camp or any structured learning that you
01:11 may have we're going to be covering
01:12 prototyping 101 I'm going to cover basic
01:16 prototypes then we're going to cover
01:18 scrolling prototypes and I'm going to
01:20 throw in sticky scrolling in there as
01:22 well to a relatively new feature in
01:25 figma uh I know a lot of you are looking
01:27 for more Dynamic scrolling we're going
01:29 to show you how to do that we're going
01:30 to show you previewing and sharing
01:32 prototypes we're going to cover
01:33 interactive components as well as uh
01:36 motion and video so the motion is going
01:38 to be sprinkled throughout the lesson at
01:40 the end we're going to talk a little bit
01:41 about video and then see where we go
01:43 from there all right so this file once
01:46 again you can copy you can duplicate it
01:49 uh and you can go through the pages the
01:52 same way that I am going through them as
01:54 well I'm going to click on over here on
01:56 the left panel you could see I have my
01:59 pages there's another page called basic
02:00 prototypes and this is where we're going
02:02 to begin our lesson all right so once
02:06 again prototyping is a way for you to
02:08 test your ideas all prototypes in figma
02:12 begin with a frame to create a frame
02:15 you'll notice on the upper left hand
02:17 toolbar there are region tools when you
02:20 click on the region tools you'll see
02:23 three different types of regions a frame
02:25 a section and a slice the ones that are
02:27 most essential to programming are going
02:29 to be frames and sections frames being
02:32 the quintessential thing that you need
02:35 to create to use a prototype so when you
02:38 do that you can also just press the F
02:40 key on your keyboard I'm going to draw
02:42 out a frame here so everything begins
02:45 with a frame now with that frame
02:49 selected on my canvas I'm going to come
02:51 over here on the right and you can see
02:53 in the properties toolbar so over here
02:56 we're in the design panel you'll see
02:58 that we have this Frame option that is a
03:00 drop down that will give you the ability
03:02 to choose any number of devices that you
03:06 can be prototyping for you can set your
03:08 own width and height for that frame but
03:12 if you want to use a recommended
03:15 viewport size you can choose it here all
03:18 of these are using the true viewport
03:21 sizes of the devices and that's going to
03:23 be important for when you're designing
03:25 and for developer handoff here I'm going
03:28 to choose let's say an iPhone 14 15 Pro
03:31 and you see the second that I create it
03:33 I automatically have a sense of scale on
03:36 my canvas I'm going to zoom in and for
03:39 those of you that are unfamiliar you
03:41 know I'm just scrolling in so I'm going
03:43 to hit command or control if you're on
03:46 Windows and use the scroll on my wheel
03:49 if you have a laptop you can use your
03:51 touch and pinch gestures to zoom in and
03:54 there we go I have my frame so creating
03:56 a frame this is where prototypes begin
03:59 let's begin to talk about creating
04:01 prototypes and what they are so
04:03 typically you're going to navigate and
04:05 you're going to create an interaction
04:06 between two frames so here I have a
04:09 start frame and I have an end frame and
04:13 I'm going to create a very basic shape
04:16 in this start frame so I'm going to
04:18 select it I'm going to come over here to
04:20 the left over here I have my shape tools
04:22 I have a rectangle I'm going to draw out
04:25 just a very simple rectangle this is
04:28 going to be a placehold ER for my button
04:31 often times when I'm prototyping I use
04:34 very basic shapes just to start to get a
04:37 proof of concept of my prototype it's
04:39 like a prototype of a prototype so here
04:42 I'm going to select that object come
04:44 over here to the right where I have the
04:47 fill I'm going to make it red and there
04:49 it is so now I'm going to select this
04:53 and uh I'm going to copy it and over
04:56 here in the end I'm going to make that
04:58 just a little bit bigger right there we
05:01 go it's bigger it's the same exact
05:03 object what I've done is I've copied
05:05 right command C or control C and then
05:08 command V or contrl V copy paste y'all
05:11 know that from Google right you know how
05:13 to do that I'm going to paste it over
05:15 here in this end frame and same thing
05:17 here I'm going to change that color just
05:19 so you can see that there's a difference
05:21 so what I have here is I have two frames
05:23 and I want to create a relationship
05:25 between them so here in this start frame
05:28 I'm going to select it I'm going to
05:29 select my object inside of the start
05:31 frame and now I want to create a
05:33 connection so when I click on that plus
05:36 button from that first frame I'm going
05:37 to go to the next frame over I'm going
05:39 to select it come over here to the
05:42 Prototype tab when I click on that
05:44 prototype tab you'll see that the the
05:47 the canvas changes a little bit so we
05:50 went from being in design mode to
05:52 prototype mode and you'll see things
05:54 change and behave a little bit
05:56 differently the keyboard shortcut to go
06:00 between design and prototype mode is
06:02 shift and E so when I press shift e
06:05 think of it just where shifting over
06:07 shift e it's going to swap between
06:09 design mode and prototype mode now that
06:11 I'm in Prototype mode when I select this
06:15 rectangle you'll notice a little plus
06:17 icon that plus icon is going to allow me
06:20 to create an interaction from that first
06:23 frame to that next frame and then we're
06:25 going to talk about how to control that
06:28 interaction so the way that we are are
06:32 creating this is not that different than
06:34 how it might be created in code so
06:36 you'll see here we have an interaction
06:39 right we have an ontap when I click
06:41 there I can change the type of
06:43 interaction there's many different types
06:44 of interactions you can have ontap on
06:47 drag while hovering while pressing you
06:50 can even trigger an interaction with a
06:53 keyboard or a gam pad you can pair
06:56 Bluetooth a game controller such as a
06:58 PS5 five or like a switch controller and
07:01 actually use that to control your
07:03 prototypes um companies like Amazon and
07:07 uh Netflix actually use this to uh mimic
07:10 remote control interactions there's also
07:13 Mouse enter mouse leave touch down and
07:16 touch up so if you think about the way
07:17 that you interact with your computer
07:19 we're going to change what's going to
07:21 happen based off of that so here we're
07:24 going to ontap so we're going to make it
07:26 behave just as if you were to tap on
07:29 your phone so on tap we're going to uh
07:34 to and we're going to go to this end
07:36 frame so you see what it's doing is it's
07:39 looking for that frame and then we can
07:41 choose how it goes there right so here
07:44 I'll watch walk you through that one
07:45 more time so let's delete that I'm going
07:48 to walk you through so we have an
07:49 interaction we have the behavior event
07:52 it's going to navigate to another frame
07:54 this is one of the most common
07:55 interactions that you're going to work
07:57 with as if you are designing something
07:59 like a website or if you're designing an
08:01 app where you have different screens and
08:03 you're navigating between them the
08:05 transition is going to be how is it
08:07 going to go from one to the other often
08:09 times when you're in a website you click
08:11 on a link and you just see the next page
08:13 that's an instant transition sometimes
08:15 when you're on an app you click on the
08:18 button and then you see the whole screen
08:20 move over and that can be a move
08:21 transition so we're going to determine
08:24 what that's going to look like what
08:25 that's going to feel like when you test
08:27 that prototype here's the duration what
08:29 is the the the distance of time right
08:32 how quickly is it going to move right we
08:34 generally want that to be under a second
08:36 if it's going to be a pretty quick
08:37 transition uh we choose how it
08:39 accelerates or de accelerates I'll show
08:41 you all my favorite type of ease uh and
08:44 then you can see a preview of that
08:45 interaction and the State Management
08:47 we'll talk about that in a little bit so
08:50 once again I am in Prototype mode so
08:52 here I have two frames I created the
08:54 frames I put a shape into each one in
08:58 prototyp type mode I can create this
09:00 interaction as noodle so you see I have
09:02 one on the canvas I'm just going to
09:03 delete that that's a fake one that's
09:05 just to kind of remind me to show youall
09:07 how this works so I can drag this little
09:09 arrow you see the arrow kind of going
09:12 and it's going to pick a destination it
09:13 comes over here and it snaps on that
09:17 frame so there we go it snaps onto that
09:20 other frame and you'll see ontap
09:22 navigate to and then we're going to end
09:25 we're going to go to that end frame
09:27 that's the frame that we decided that
09:29 frame was named something else that name
09:31 will show up right there right now this
09:33 is going to be instant let's see what
09:34 that work looks like and uh we can try
09:37 that out so when I click on this blue
09:40 rectangle we're just going to navigate
09:42 back and you'll see on top navigate to
09:44 we're going to go to that start frame
09:46 and we want it to be instant so we've
09:48 just created a relationship between this
09:51 object inside this Frame causing it to
09:53 go to the next one and then from this
09:55 one going back to the first one so I'm G
09:57 to preview this over here see my my
10:01 little example this is a starting point
10:04 the starting point if it wasn't there
10:06 let's see let's let's let's delete the
10:09 point uh let's see where's my my
10:13 starting point is it gonna allow me to
10:15 delete my starting point oh I think they
10:16 moved it here we go so I'm going to
10:18 select the frame here's the uh the flow
10:21 starting point I'm going to remove that
10:22 there's no flow starting point you can't
10:24 preview it so I can select the frame
10:27 come over here in the protot type panel
10:29 and I want a flow starting point so
10:32 where are you starting this off from is
10:34 really important so I'm going to just
10:35 say example one now there's a preview
10:38 button I'm going to click on that
10:40 preview button and it's going to show me
10:42 right here in the editor and I can get a
10:44 sense of how this works when I click
10:46 from that first one it goes to the next
10:48 one you see how that happens that's
10:50 wonderful now I'm going to click on that
10:53 first interaction again and I can change
10:55 how it behaves let's say instead of an
10:58 instant transition I want to instead
11:02 move in and we can see what that looks
11:05 like here in this preview so you've
11:07 probably used an app on a mobile phone
11:10 before where you click on the menu and
11:11 the menu overlays the current screen
11:14 that's what's happening here and we have
11:16 an ease out transition I'm going to
11:18 leave that ease out but you'll also
11:20 notice here I can choose how it moves in
11:23 let's have it move in from the top so
11:25 here we go it's going to move in from
11:27 the top so we've clicked on that noodle
11:29 that's where those interaction details
11:31 live so that noodle right there yes we
11:33 call them noodles at figma we call uh
11:36 pictures that have all the noodles pasta
11:37 pictures as a matter of fact so I can
11:39 preview this and now you can see that it
11:41 fades in right and it in it's instantly
11:44 going back so let's change that
11:46 transition one more time so we're going
11:48 to move in let's try a slide in let's
11:51 see what the slide in looks like and
11:53 let's have it come in from the right
11:55 right so here we go let's click the
11:57 slide in is kind of cool because you see
12:01 the previous screen darken and also move
12:04 to the left now what we might want to do
12:07 is then have that transition back also
12:10 match and we need to think about where
12:12 this came in and how it's moving so here
12:15 we go so the shortcut for preview is
12:19 shift spacebar so uh someone just asked
12:22 what is a shortcut for preview that is
12:24 shift space bar so once again shift
12:26 space bar we can preview that I can even
12:29 leave this open and make some changes
12:31 let's say here instead of that instant
12:33 transition uh I want to move it out and
12:36 we're going to have it move back out
12:38 actually no we were using slide out so
12:40 now it's going to slide out and now
12:42 you'll see comes in and slides out maybe
12:46 we want to make sure you know we're
12:48 coming down so there we go we want to
12:50 make sure that there's a good sense of
12:52 psychology at play here the brain wants
12:56 to know where the thing went and where
12:58 it's coming back from so that's how this
13:01 transition is playing out now I'm going
13:04 to I'm going to jump right into some
13:06 advanced stuff really quick we're also
13:07 going to preview a smart animate
13:10 transition I'm going to talk about these
13:12 as well so instead of a slide in we have
13:15 Smart animate and now what smart animate
13:17 is going to do it's going to look at the
13:19 two objects in both of those frames so
13:22 here in this first frame I'm going to
13:24 look it's called rectangle 5 and over
13:26 here I have rectangle 5 let's make it a
13:29 more me give it a more meaningful name
13:31 how about James okay we're going to call
13:34 that rectangle James we've officially
13:36 named our layers so as long as James is
13:38 going to go to James and the layers are
13:40 matching correctly then it should
13:42 animate so let's select both of those
13:45 arrows I can change both of those arrows
13:48 at the same time so I'm clicking
13:50 dragging selecting both of those arrows
13:53 and you can see that there are now
13:55 dropdowns that are demonstrating a mixed
13:58 Behavior and what that means is you know
14:00 one is instant one is move in you know
14:03 one is smart animate and and one is push
14:06 so let's just have them both be smart
14:08 animate so what it's going to do it's
14:10 going to look at the difference between
14:12 those two shapes it's going to look at
14:14 its size its position its scale and its
14:18 color only certain properties and it's
14:21 going to cause a nice little animation
14:23 between them two so now instead of doing
14:26 a allout transition uh where the whole
14:29 screen moves it's attempting to Tween
14:32 between the two objects that it
14:34 recognizes as being the same so here one
14:38 more time I click that plus button there
14:39 we go we got a little transition now
14:42 what I like to do instead of using an
14:44 ease in or ease out I like to use a
14:47 custom bezier I like to make a nice ease
14:51 in ease out it's what I refer to as an
14:54 scurve sometimes I like to to type in
14:57 the numbers specifically so here it'll
15:00 be uh let's say 08 comma 0 comma. 2
15:06 comma 1 and what that means is that dot
15:08 is 80% over at zero and that dot is
15:12 going to be uh oops let me let me move
15:15 back let's see 08 comma
15:20 0er uh 0.2 comma one so it's controlling
15:24 that dot and that dot to create this
15:26 nice little s that's my favorite kind
15:29 a a a motion curve right there so that's
15:31 a it's a bit of a cheat sheet for me and
15:33 you get this nice Snappy animation if I
15:36 change the timing of it let's make it
15:40 really slow right let's see what it
15:41 looks like really slow let's do 1,200
15:44 milliseconds so it's about 1.2 seconds
15:48 you'll actually see how slow 1.2
15:51 milliseconds really feels when you see a
15:53 transition happen so there we go so
15:57 hopefully you got a good introduction to
15:59 this once again you can duplicate this
16:01 file at figma Community Alex can share
16:03 that link so then that way you can see
16:06 exactly what this file is and use this
16:08 as practice to start this up and to see
16:10 how it works oh by the way uh if I were
16:13 to go back into design mode and I move
16:16 the location of that button uh and I
16:19 preview this you'll see that wherever
16:22 that button is that's where the
16:24 transition is going to happen even if I
16:26 was to change a property over here like
16:28 rotate that on the right you'll see that
16:32 it's going to do everything that it can
16:34 to try to animate between those so smart
16:37 animate is a fun way to learn some of
16:40 those Basics and to get a sense of how
16:42 you might eventually design micro
16:47 figma okay so next up I have a little
16:51 example here and I want to showcase a
16:54 newer feature that we have here in figma
16:57 so I'm going to go to prototype mode I'm
16:59 going to show you this example in this
17:01 example I'm taking each number and so
17:05 each number when I click on it when I
17:07 tap it's going to navigate to the next
17:09 screen it's going to go sequentially
17:11 right so when I click on one it's going
17:12 to go to two when I click on two it's
17:14 going to go to three when I click on
17:15 three it's going to go to four and I
17:17 highly recommend that as your beginning
17:19 figma you make these simple prototypes
17:22 to help you understand how the
17:24 navigation and how the controls work I
17:26 love making these types you'll see that
17:28 I have a little movein animation and it
17:31 has a little S curve so we can preview
17:34 that right here so I'm going to click
17:35 one two three and four
17:38 now prototypes can get kind of large
17:41 you're going to have a lot of screens
17:43 you're going to be clicking around
17:44 you're going to be navigating them um
17:46 and one thing I want to show you is that
17:48 here in this inline preview there's this
17:51 little three dots menu it's an ellipsis
17:53 menu It's called The overflow menu
17:55 you're going to click there and there's
17:57 this option it's called follow active
18:00 frame this is new as of last uh fall so
18:04 when I click on this what it's going to
18:05 do is as I navigate it's going to show
18:08 me where on the canvas the current frame
18:11 is so by demonstrating it this way if
18:14 you have a larger prototype you'll have
18:16 a much better sense of where you are
18:19 navigating to and it'll help you
18:21 troubleshoot any issues that you may be
18:24 having so once again you click on the
18:26 ellipses tool and you're going to choose
18:27 follow active frame and so long as
18:29 you're in this preview pane you can kind
18:31 of see where you are at all times okay
18:34 so once again these four frames they
18:36 follow the basics that we've already
18:39 encountered and what I'm going to do now
18:41 is I'm going to show you another way to
18:43 create a navigation within your
18:46 interface so down here I've created a
18:49 component out of four circles actually
18:51 let me delete it I'm going to create
18:53 this from scratch just so y'all can see
18:55 how it's done I'm going to draw a
18:58 rectangle oh I'm going to start with
19:00 rectangles I always kind of start with
19:01 rectangles it's a thing that designers
19:03 do and uh I'm going to select a color
19:07 here we go I'm going to go to my design
19:10 panel because you want to make sure in
19:11 the design mode when you're designing
19:13 I'm going to add a stroke value to this
19:16 let's make this stroke value three and
19:20 I'm going to come up here what designers
19:22 typically do we don't start with circles
19:24 we start with rectangles and then make
19:26 them circles so here in the properties
19:29 bar with this rectangle selected I'm
19:32 going to round that corner all the way
19:34 out let's say you know it's going to be
19:36 bigger than its height so let's say an
19:38 80 corners and that's going to make it a
19:40 little circle so I have one Circle I'm
19:43 going to duplicate that and make another
19:45 Circle right so I'm going to hold down
19:47 the option key hold down the ALT key if
19:49 you're on Windows I'm going to click and
19:52 drag it while holding down the option
19:53 key so I have one two three and four so
19:57 we have four of these circles now I'm
20:00 going to select this circle I'm going to
20:03 press the ey dropper tool I'm going to
20:05 use the ey dropper tool it's the I key
20:08 on your keyboard I'm going to press the
20:10 I key it's going to give us a little ey
20:12 dropper tool that second button I'm
20:13 going to make blue I'm going to select
20:15 that third one I'm going to press that I
20:17 key the ey dropper tool and you'll see
20:19 it kind of shows me up here in the top
20:21 right the current color that I'm
20:23 selecting with a little bit of zoom and
20:25 then this last item here I'm going to
20:27 press that I key and we're going to
20:28 choose that purple so what I'm doing
20:31 here is I'm going to make a
20:33 nonlinear navigation so this way I'm
20:36 going to create a navigation that can go
20:39 to all of these sections in a nonlinear
20:43 way much more Dynamic I'm going to
20:45 select them all so these are all now
20:48 selected I'm going to come up here and
20:51 I'm going to create what is known as a
20:53 component a component in figma is an
20:56 element that you're going to re use
20:58 again and again so we're going to create
21:00 a main component and then we create
21:03 copies of it and those copies are
21:05 dependent on the main one so if you make
21:08 changes to the main one right then it's
21:11 reflected in all of the copies that
21:14 exist on this page so we're going to
21:16 create this as a component you're going
21:18 to see it's called component one I can
21:20 name it by just double clicking on the
21:22 name right there we go I double clicked
21:24 on it super easy to name you'll see that
21:26 name reflected and changed over over
21:28 here in the layers panel as well let's
21:30 name that I'm going to call this
21:32 navigation navigation right now when
21:35 you're building out and designing the
21:36 real app you're going to be using you
21:39 know realistic buttons things that are
21:40 going to be more intuitive for the user
21:43 but when you're testing this out and
21:45 you're learning this for the first time
21:47 these are wireframes I'm making a
21:48 prototype to test my idea so we have
21:52 this main component here right it's
21:54 called navigation I'm going to go ahead
21:56 I'm going to copy it command C contrl C
21:59 if you are on Windows and now I'm going
22:02 to select every one of the frames that I
22:05 have here I can click and and drag and
22:08 select them all or I can select that
22:11 first frame hold the shift key select
22:14 the next frame keep holding that shift
22:16 key press the third and the fourth so
22:18 that's going to select all four frames
22:20 there's many different ways to do this I
22:21 can even come over here to the layers
22:23 panel hold the shift key and click all
22:25 four at the same time so the important
22:27 thing that they are all selected now
22:29 that they're all selected I'm going to
22:31 paste right command V I'm going to paste
22:35 command V paste and you can see that the
22:38 navigation has now been placed into
22:40 every single one of these frames if I
22:44 look over here in the left there's my
22:45 frame four the navigation instance has
22:48 been placed there number three the
22:50 navigation instance has been placed
22:52 there so each one of those instances
22:55 each of those frames has a copy of that
22:58 instance and if we look on over here on
23:00 the left as well we'll see that Four
23:02 Diamonds the Four Diamonds is the main
23:04 component right uh the single open
23:07 diamonds those are the copies so I'm
23:10 going to take this I'm going to move
23:11 this all the way down and you'll see
23:13 that as long as they're they're selected
23:15 you know we're moving them all down
23:17 together and they all remain on their
23:19 frames right that's going to be key so
23:23 you'll see that like if I make a change
23:25 here right if I change that to dark blue
23:27 you see it reflected in all of them but
23:29 I'm going to hit command Z let's undo
23:31 that I just wanted to show you how the
23:34 main inst main component then works with
23:36 its instances so what we're going to do
23:39 is a little bit of magic right now I'm
23:42 going to select this navigation
23:43 component I'm going to go to my
23:45 prototype Pane and instead of trying to
23:49 wire up all of these individually right
23:51 it would take a lot of time because I
23:53 have to make this one go here this one
23:54 go here this one go there I'd have to go
23:57 three you know know like this one goes a
23:58 three this one goes a three right that
24:00 could be a lot of work but because we
24:02 have this component instance
24:04 relationship I only need to wire up the
24:08 main component with all of those
24:10 navigation items and the rest is going
24:13 to be done by figma so I'm going to
24:15 double click in I'm going to select that
24:17 first navigation item and I'm going to
24:19 drag a noodle to one so there you go we
24:22 see on tap we have our little navigation
24:24 it's going to remember the uh previous
24:28 action that I just performed so like
24:30 let's say we're going to do our our our
24:32 movein right we have our movein
24:34 animation and we don't want that to be
24:36 so long we want that to be about 300
24:38 milliseconds right we want quick Snappy
24:40 transitions so same thing here I'm going
24:42 to drag the second one and remember you
24:44 must be in prototyping mode to create
24:47 these relationships these interactions
24:50 so there we go ontap navigate to two
24:53 right let's go here on toap navigate
24:56 three and let's choose number four on
24:59 tap navigate Four so we have one two
25:02 three four so we click on this first one
25:05 we have that interaction right now when
25:08 I click on this first frame you'll see
25:11 that it's all been wired up because
25:15 these are all references to here and if
25:17 I were to test that out when I click on
25:20 Blue it goes to Blue and I click on
25:21 yellow right goes to purple goes to Red
25:24 goes to Blue Goes to Red goes to Yellow
25:27 so we have a much more Dynamic way so
25:31 you can create a main menu that is a
25:34 component right that main menu can be a
25:37 component and then that can drive all of
25:40 those interactions I like explaining
25:41 this in this way because it's very
25:43 Visual and as you start thinking about
25:46 how you might make an app or as you
25:48 start believing and and thinking like
25:50 okay I can make it this way you know you
25:52 start realizing that these shortcuts
25:54 exist to speed up your workflows so once
25:58 again I'm using the main component and
26:01 also you know these different frames so
26:03 I'm using this and just a copy of each
26:06 one is there now the one cool thing that
26:08 I can also do is I can actually come
26:12 here and I can make some changes to this
26:15 property so let's say you know o sorry
26:19 here uh does the component need to be on
26:21 the same page or they can be on separate
26:22 pages that's a great question Heather if
26:25 I was on a different page and I want
26:27 that component because I created it in
26:30 this file if I go to my assets panel
26:33 you'll see we have my basic prototypes
26:35 there's my component boom there it is
26:37 now in order for it to work correctly
26:40 you will need it to be like on that same
26:44 page but the component itself can be
26:46 anywhere so you can wire it up on this
26:48 page and then create copies of that and
26:50 that should also work however in order
26:53 for this Behavior to work yes it does it
26:57 does need that relationship otherwise
27:00 the instance can be
27:02 overridden right and then you can copy
27:04 and duplicate those those instances if
27:08 sense all right great
27:11 question okay so we're g to move on to
27:15 the next section um here I want to just
27:19 hop back and talk a little bit about a
27:22 very basic prototype I love using figma
27:25 for presentations um it's because I can
27:28 draw out these frames and I can design
27:31 them all up so these are some example
27:33 frames that I have as as a template for
27:38 presentations now the way that I can
27:40 easily navigate between frames while I'm
27:43 editing I can press the N key and it's
27:46 going from one frame to the next right
27:50 so I can see okay here's a frame right I
27:52 press the N key and it's going to the
27:55 next frame n key and if I if I press
27:58 shift n it goes backwards so nnn shift n
28:02 shift n shift N I can also if at any
28:05 point you know if I want to go to a
28:06 frame I can just double click and I can
28:08 go to it now the reason I'm talking
28:10 about this is that if you want to create
28:12 a very rudimentary presentation and if
28:15 the idea of creating interactions
28:18 between every single slide feels
28:21 daunting right I want to make this into
28:23 a nice presentation if you have no
28:26 interactions whatsoever when I go into
28:29 prototype mode we haven't shown full
28:31 prototype mode yet up here in the top
28:33 right you'll see a little play button
28:35 for present so if as long as you
28:38 organize slides from top left to to top
28:41 to bottom so one two 3 four five six
28:43 seven8 nine 10 as long as you arrange
28:46 them visually on the canvas in this way
28:49 when we go to present mode right I can
28:52 present these slides and I can navigate
28:54 these slides as if it were a
28:56 presentation I even have options here to
29:00 uh hide the figma UI now you'll see the
29:03 shortcut here is command backlash it
29:05 might be control backslash for for y'all
29:08 if I hide that you know I can see that I
29:11 can now use this as a presentation link
29:14 and I can even copy that sharing link
29:17 and other people can see what I see so I
29:21 can copy that sharing link and then
29:23 people can see me as I'm navigating
29:26 through this as well so I saw somebody
29:29 ask how to create these as PDF let's say
29:31 I have all these slides here and I want
29:33 to generate them as a PDF now the PDF
29:36 capabilities out of figma um they they
29:39 create larger files because there's some
29:41 issues with with fonts uh but if you
29:44 just need a quick and easy PDF you can
29:46 go here to the main menu you go to file
29:49 export frames of PDF you do that and
29:52 then it creates this as a PDF I can open
29:54 this up and you can see this right here
29:56 we have this now this entire slide deck
29:59 as a PDF so that was a great question
30:02 and uh hopefully you'll you'll use this
30:04 you know you can find it helpful all
30:05 right so once again n key will go
30:07 forward it'll go back and you can also
30:11 uh press uh I believe you can also press
30:15 uh function like function key uh right
30:18 and left if uh depending on the keyboard
30:20 that you're using I know I cover a lot
30:23 of keyboard shortcuts in figma if you
30:26 are at all just kind of like keyboard
30:28 lost uh you can always hit command slash
30:32 or control P or command P right and
30:36 that's going to bring up this little
30:37 menu uh it's called the um the quick
30:40 actions menu it's also located over here
30:42 in the top left the quick actions menu
30:45 you can type in keyboard shortcuts and
30:47 you'll get a whole listing of different
30:49 keyboard shortcuts uh for zooming for
30:52 viewing for accessing the tools and I
30:54 know many of you are coming from
30:56 location that are outside of the US so
30:59 if you go to layout you can actually
31:01 change the way that the shortcuts are
31:03 mapped to your keyboard so Chinese
31:06 Danish Finnish Korean Norwegian Spanish
31:09 you can actually change that so then
31:11 that way the keyboard shortcuts are
31:13 going to be much more comfortable for
31:15 your fingers based on of your keyboard
31:18 all right cool so next we're going to
31:22 head on over and we're going to talk
31:23 about an entirely different type of uh
31:27 y let me bring my my chat back here we
31:30 go uh how do you preview the Prototype
31:33 with interactions um to preview the
31:35 Prototype with interactions here I can
31:37 select this Frame uh same thing I just
31:40 hit play and now I'm previewing the
31:42 Prototype with interactions and here you
31:44 can see I'm I'm clicking and I'm tapping
31:47 and actually this is going to give me an
31:49 idea because I'm seeing something that's
31:51 happening here that I might not want to
31:53 to happen and it's great that you ask
31:55 that question and I can now remedy it
31:57 so uh when I go to prototype mode you'll
32:01 see that this Frame um I can actually
32:05 change the settings I can come into show
32:07 prototype settings and right now it's
32:10 choosing the the default that I'm
32:12 working with an iPhone Pro Max but any
32:15 device that you're working with you can
32:17 actually change that device so you can
32:20 see a frame of it to get a sense of what
32:22 it might actually look like you can even
32:25 change the background right so when you
32:27 go into that present mode you'll
32:29 actually see the device that you're
32:30 working with next there's something I
32:33 forgot to talk about with these
32:37 interactions um there is this option
32:40 called animate matching layers what that
32:43 means is when the transition takes place
32:46 if there is something like that Global
32:48 navigation that persists across all of
32:52 those frames right so if I click that um
32:56 and even here on all of these
32:58 transitions so I can select you know
33:00 this one transition this uh two
33:03 transition uh this uh three transition
33:06 right I can select them all and I can
33:08 choose animate matching layers now what
33:11 that's going to do is make sure that
33:14 when I'm testing this it's not going to
33:17 move the um the uh the navigation now
33:21 you'll might notice too that it's like
33:23 changing up the uh the background a
33:26 little bit uh let me go here to
33:28 prototype mode uh let's go to
33:31 present and and that's because the the
33:34 background is matching right so what you
33:36 want to do is you might want to change
33:38 up uh uh how you you you create those
33:42 backgrounds you can put in a a
33:43 background color to to uh inform that
33:46 and change that there but I'm going to
33:48 move on to scrolling prototypes let's
33:50 head on over to scrolling prototypes um
33:52 simple scroll is probably one of the
33:55 easiest things that you can do well let
33:57 me bring up my chat here so I can see
33:59 what you all are saying all right cool
34:02 uh so simple thing that you can do here
34:05 uh the simplest thing that you can do in
34:07 making a prototype is just make it
34:08 scroll um I guarantee you it'll it'll
34:11 like wow people uh because we're
34:13 designing for devices that have such
34:15 limited real estate demonstrating a
34:18 scroll in a prototype is going to be
34:20 really helpful so I'm going to select
34:22 this Frame here um and with this Frame
34:26 selected and in Prototype mode you'll
34:28 notice there's this option over here in
34:31 the right prototype panel that says
34:33 overflow and has scrolling so when you
34:37 click on that you can choose vertical
34:40 scrolling and what that means if there
34:43 is any content that extends outside of
34:47 that frame so here I can select the
34:50 frame it right now it has a property in
34:53 the design panel called clip content if
34:56 I uncp it you can see that this frame
34:58 has a lot more stuff outside of it if I
35:00 want to clean that up I just say clip
35:02 content so you can see even when I
35:04 select this that there's all of these
35:07 objects here and because they extend
35:09 outside of that frame in Prototype mode
35:13 it'll give me the option to apply
35:15 overflow vertical now what that means is
35:18 when we preview this I can actually I
35:21 can scroll this up so I can actually
35:22 scroll with my scroll wheel or if I
35:25 click and drag can see and there's even
35:28 like a little bit of a like a little
35:29 Snapback if I drag this all the way down
35:32 and you might also ask yourself well
35:34 well Mig wait there's this like black
35:35 bar at the top you know what what's that
35:38 um if you want to have an element not
35:43 follow the scroll right just select it
35:47 and go to the prototyping Pane and you
35:49 can change it scroll Behavior so
35:52 everything is going to be scrolling with
35:54 parent unless you tell it to be fixed
35:57 if I turn off that fixed behavior when I
36:00 scroll this it's going to go with the
36:03 content if I want that to be a menu or a
36:06 persistent navigation at the top I can
36:09 instead choose for it to be fixed and
36:12 when it's fixed it will stay so let's
36:16 create a very simple frame and show you
36:18 how to make scrolling content I'm going
36:21 to press the F key I'm going to draw the
36:23 frame I am going to go over here to my
36:26 design panel and choose a different uh
36:30 type of frame or might as well just
36:32 stick with it we're we're already doing
36:34 the the iPhone 15 Pro Maxes there we go
36:37 and uh I'm going to draw a rectangle
36:39 right so I have one rectangle let's have
36:41 two rectangles can this scroll I don't
36:43 know let's see if it'll scroll when I
36:45 select the frame go over to my prototype
36:47 panel once again scroll Behavior no
36:49 scrolling oh we want to be vertical if I
36:52 choose vertical scrolling and I don't
36:55 have overflow con content that goes
36:57 outside of the frame it's going to give
36:59 me a little warning and it tells me for
37:01 that to work there needs to be content
37:04 that's bigger than the frame so here I'm
37:06 going to follow suit with that let's
37:08 make these a color so y'all can see them
37:10 in the back if you're sitting all the
37:12 way in a far back right I'm going to
37:14 duplicate this and I'm going to hit
37:15 command D command D is a duplicate so
37:18 you see we have a bunch of these these
37:20 rectangles here when I go back to the
37:22 design panel and I select that frame I
37:25 can uncp that content you can see it's
37:27 all there now in Prototype mode I want
37:31 this to scroll so I can choose overflow
37:33 let's set it to vertical and now I can
37:36 add a flow starting point now that I
37:38 have a flow starting point I can preview
37:40 that and I can see it scroll now if you
37:43 want that content let's say you want
37:45 that content to be horizontal and you
37:48 want it to scroll horizontally um I'm
37:50 going to show you a quick trick for that
37:51 I'm going to select all of these objects
37:55 I'm holding down the shift key while I
37:57 click them so I'm selecting all of them
37:59 you can see them over here in my layers
38:01 panel rectangle through 2 through eight
38:04 uh I'm going to come over here to the
38:06 design panel once again and you'll see
38:08 this little option for auto layout I
38:10 don't know if you're familiar with auto
38:12 layout it's kind of great what it's
38:13 going to do it's going to put all of
38:15 these rectangles into a frame for me and
38:19 uh keep them arranged together so I'm
38:22 going to press Auto layout you'll notice
38:24 over here it says frame three there's
38:26 all my rectangles and I'm just going to
38:28 call this you know Al container right
38:31 and what's cool about this is I'm going
38:33 to switch these from being vertical it's
38:34 a horizontal in a snap so now that it's
38:37 Auto layout you see that there's these
38:39 options there this whole little pane of
38:41 options here there's a lot more to Auto
38:43 layout that I'm going to be covering
38:44 today so make sure you check out our
38:46 YouTube for auto layout videos but I'm
38:48 going to make this horizontal layout
38:49 there we go make them vertical make them
38:51 horizontal just saved a bunch of time so
38:54 with my frame and in my prototype
38:57 settings you'll notice that there's no
39:00 vertical overflow but instead there's
39:02 horizontal and so now when I turn this
39:05 on you can see that it'll be horizontal
39:10 scrolling cool so as you start to go
39:15 from like wireframes and shapes to
39:18 actual UI these are are components that
39:21 I have here um you can start to to
39:25 create more interesting things uh and
39:29 and you can start to realize your vision
39:31 right so start with simple shapes and
39:33 then gradually start to add text and and
39:36 and imagery and icons so here what I
39:40 have I have a component not that
39:43 dissimilar to the navigation component
39:45 we made earlier and except this one I'm
39:49 going to set a horizontal overflow I'm
39:52 going to show you how it works and then
39:53 we're going to make one so when I place
39:55 this here I have the the horizontal
39:57 overflow for these cards and I'm going
40:00 to have another have another copy of
40:01 that and here you'll see I have an
40:03 overflow for one and for another so a
40:07 component is going to give you the
40:10 ability to just Target an area itself
40:14 for scrolling right so it's not just the
40:18 whole frame scrolling but we're going to
40:20 have a nice little condensed area for
40:23 scrolling um even here I can select on
40:26 that whole frame I can set vertical
40:29 right and what's cool is I can kind of
40:31 scroll up and down and I can scroll
40:33 these horizontally I'm going to show you
40:35 that so here in the file um I'm going to
40:39 go to my assets panel and uh we're going
40:42 to come down to scrolling prototypes or
40:44 where is it do I not have this component
40:46 here I think I don't oh that's a bummer
40:49 okay so I'm just gonna I'm going to copy
40:52 here uh let's grab that one and I mean
40:55 but we could do this with shapes let's
40:56 do this with shapes so I'm going to draw
40:59 rectangle right so this is my object
41:01 that I'm working with uh I'm going to
41:03 duplicate a bunch let's make rounded
41:05 Corners let's go to the design panel
41:07 let's add a stroke you know we're trying
41:09 to get a little bit more higher Fidelity
41:11 so let's say we have a bunch of these
41:13 cards right I'm going to duplicate that
41:15 by holding down the option key you can
41:17 also just press command D or control D
41:20 it'll make a copy it'll put it right on
41:22 top of itself there we go um and I can
41:25 you know duplicate that command D
41:26 command D command D command D command D
41:29 or control D I'm going to select them
41:31 all and we're going to make a component
41:33 just like we did previously so we have
41:36 these elements there all the way across
41:39 we're going to come up here to the top
41:41 the four Diamond icon and we're going to
41:43 create a component so this component
41:46 we're going to call this our
41:50 horizontal scroller there we go we got
41:52 our horizontal scroller and this is
41:55 going to be a a main component and we're
41:58 going to put it into this Frame and this
42:01 Frame is going to be the container for
42:03 this now what we want to do is we want
42:06 this to scroll left and right but notice
42:09 the purple frame is all the way around
42:12 it so we need to define a a smaller area
42:17 right so I'm going to hold down the
42:19 command key and I'm going to drag this
42:21 over it's the control key if you're on
42:23 Windows and you'll see I could change
42:26 the scrollable visual area for that
42:29 component I'll show you that one more
42:30 time I select this Frame and you'll see
42:33 these four little squares on the edges
42:35 those are the absolute bounds of that
42:38 frame now I'm going to hold the command
42:39 key if you're on Windows it's a control
42:41 key and while I'm holding it I'm going
42:43 to drag this over to the right so we
42:46 just have this little area and what
42:48 that's going to be this is going to be
42:50 kind of like our Target area for the
42:51 scroll it's going to scroll left and
42:53 scroll right from here it's not the
42:55 similar to having that frame even if I
42:57 go here I can clip the content and you
43:00 can see what's outside of it and if if
43:03 if I clip it and I hit that command key
43:06 or control key you see I can make more
43:08 of it visible and available right so I'm
43:10 going to drag this all the way over to
43:12 the left I'm going to uncp that content
43:15 and I'm going to go to my prototype
43:17 settings and you'll see for the
43:19 component I have overflow Behavior right
43:24 and so you're calling that a frame a
43:26 component right this is a component this
43:27 is a frame um so here I'm going to
43:31 choose horizontal scrolling here's the
43:34 on this component I'm going to copy that
43:38 and I'm going to paste it into my uh
43:42 example scroll uh let's let's get a copy
43:45 of it there we go uh into my example
43:48 scroll right so so there it is and you
43:50 see there's a little bit of overlap here
43:52 now uh I can even have an a copy of this
43:55 right let's duplicate that down and when
43:58 I preview this you see I can scroll them
44:00 now horizontally and based off of that
44:03 preview area right let's let's see what
44:06 that preview area looks like let's add a
44:09 a stroke to the the component you'll see
44:13 there it is once again hit command key
44:15 and you can control the viewable area of
44:17 it this way you'll just see where it's
44:20 showing up here as kind of like a you
44:22 know like this is where my scrollable
44:24 area is that's my viable window and so
44:27 as I drag these left and right you can
44:29 see I could drag this up and then those
44:31 will drag left and right so those are
44:34 the the contents inside of that
44:37 component now you want to have
44:40 fun I can uh move this one out of the
44:43 way oops let's move this one out of the
44:45 way there we go I'm going to select my
44:46 example scroll let's uncp that content
44:48 we can see them there if I wanted to
44:51 populate these rectangles with images
44:54 let's say I want to make a little
44:55 gallery I'm G to come over here and I'm
44:57 going to choose file Place image video
45:01 you'll see that the shortcut for me is
45:03 shift command K right place image video
45:06 and uh here you're probably not going to
45:08 see this at home but I have my my UI
45:10 show up and it's going to ask me to pick
45:12 some images and so I grabbed some images
45:15 and now those images are going to be
45:18 charged up with my cursor so there we go
45:20 there's my cursor so click click click
45:22 click click click click so now I've
45:25 populated those shapes with those images
45:28 so if I was to clip that once
45:31 more I can now see like the little
45:35 gallery of images that I have so uh in a
45:38 previous Workshop if you've joined my
45:40 workshops before all images are just
45:42 fills on shapes I'll show you that one
45:43 more time here we go so once again um
45:47 let me hide the stroke on this to create
45:49 more of the illusion right so we have
45:52 this example scroll um and what I'm
45:54 going to be doing is is overriding the
45:57 fill on these component instances with
46:01 image fills so come up here file Place
46:05 image video show you another way to do
46:07 that command P or control P say place
46:10 there you go image or video I'm going to
46:12 select the images from my file browser
46:15 on my operating system and then I'm back
46:19 here and I can now Place those those
46:21 images into that Gallery there we go and
46:24 now when I preview my example
46:27 scroll right I'm previewing it you know
46:30 I could see it in the device might take
46:31 a second for the images to load and and
46:33 there they are those those those
46:35 beautiful beautiful images have a nice
46:36 little Gallery so just by scrolling you
46:40 can get a really high fidelity prototype
46:44 that you can use okay so I know we're
46:46 running short on time and there's some
46:48 other Concepts that I want to get into
46:50 um here I'm just going to demonstrate
46:52 this concept there is a sticky scrolling
46:56 uh playground file on figma's community
46:59 I'm just going to show you how you like
47:01 how this works um basically inside of
47:04 this there is a a frame and this Frame
47:07 is set to position sticky right and so
47:10 here there's another frame and it's
47:12 nested inside of a frame right so and
47:15 then this one is set to position sticky
47:17 and this one is also set to position
47:20 sticky everything else is just occupying
47:23 this Frame and what's cool is when I
47:26 that uh let me let me preview this uh
47:29 better I'm going to turn my device off
47:31 there we go my device is set to none so
47:33 here now when I preview this imagine
47:35 this as being like a website when I
47:37 scroll that content will stay but other
47:41 content will move uh so the key factor
47:45 here being that this element is nested
47:48 inside of this Frame and then that's
47:51 nested inside of the larger frame so
47:53 this Frame here give you a sense it
47:57 Clips right about there and then inside
48:00 of that there's an element and it's
48:03 basically going to follow its top Point
48:05 down to its bottom point and it's using
48:07 some padding to kind of determine
48:10 whether or not it's going to stick
48:12 unfortunately this is a beginner
48:14 Workshop so I don't want to go too much
48:15 into it but if you head on over to figma
48:20 docomo there is a uh file what is
48:24 referred to as a playground file
48:26 uh That'll Walk Through sticky scrolling
48:28 prototypes here it is I'm going to take
48:30 a copy that link so if this interests
48:33 you head on over to that link then you
48:35 can check out sticky scrolling
48:37 prototypes and go through all of the
48:38 steps to make that happen I'm going to
48:40 move on to our next topic interactive
48:43 components once again interactive
48:46 components are going to be a little bit
48:48 different than your traditional
48:50 prototype so uh in your your your
48:53 typical prototypes we're going from
48:55 frame to frame to frame right so it's
48:58 frame to frame to frame
49:02 now what I'm going to do here uh is I'm
49:06 going to create a a a prototype that's
49:08 going to be uh much more Dynamic I'll
49:11 show you an example here let's imagine
49:13 you have this frame with a uh let's
49:16 preview this here with with like little
49:18 draggers right and you could turn them
49:19 on and off if you imagine and uh uh
49:24 prototyping this with frame you need so
49:28 permutations of these that you know it
49:31 would be impossible to make so an
49:33 interactive component is going to allow
49:36 you to create kind of like a uh like an
49:39 embedded uh uh uh prototype um so it's
49:42 like like a prototype within a prototype
49:44 and it's really fun for animations so I
49:47 like to make these animations here right
49:50 so what I have is I have just a single
49:52 frame but that single frame has these
49:55 little nested interactive components
49:58 that have their own kind of timelines
50:02 their their their own animations that
50:04 are taking place I'm going to show you
50:05 how to make one of those all right we're
50:07 going to make this switch and I'm going
50:10 to show you how that works so let me
50:11 delete that I'm going to delete this
50:13 we're going to start from scratch I'm
50:17 rectangle here's my rectangle I'm going
50:19 to come over here and I'm going to round
50:22 out those Corners right so let's say
50:24 it's a 20 by 120 and if my Corners are
50:28 120 right it's going to be perfectly
50:30 round I tend to prefer using rectangles
50:32 as opposed to outright ellipses then I'm
50:35 going to create another rectangle and
50:38 I'm going to send it behind that first
50:39 one I'm going to just drag it down
50:41 behind that first one so this up here
50:43 this is like our DOT we're going to
50:44 change the color of this one make it a
50:46 little bit darker here we go and uh also
50:49 just round out those Corners so if the
50:51 height is 200 the rounded corner it
50:54 could be also 200 and there we go we
50:57 have a little switch and figma will
50:59 automatically snap it to the middle
51:01 there we go so we have our start frame
51:04 now I'm going to select this I'm going
51:07 to rightclick right click and I'm going
51:10 to choose frame selection so this is
51:13 going to make a frame around this object
51:15 let's make this nice and eveny that's
51:17 4.99 wide let's make that a good 400
51:20 wide there we go so I'm gon to select
51:21 this whole thing andna right click and
51:23 choose frame selection and that's going
51:25 to put a frame around the artwork that I
51:28 created directly on the canvas let's
51:30 double click that let's name this and uh
51:32 let's call this off right now I'm going
51:36 to select that frame and press command d
51:39 control D if you're on Windows duplicate
51:41 now we have another frame right it's
51:43 cool put it right where we wanted let me
51:44 undo that I'll show you command D there
51:46 it is this one's going to be on and I'm
51:49 going to move this to the right right
51:52 there we go and I could change some of
51:53 its properties let's make that that
51:56 green let's let's make this like extra
51:59 green you know there we go we got on and
52:01 we have off and it's just a a rectangle
52:04 and uh two rectangles that have very
52:07 rounded Corners so uh what I'm going to
52:10 do I'm going to create a quick prototype
52:12 I'm going to drag this
52:14 circle the little noodle over here so
52:17 it's going to go navigate to on we're
52:19 going to use Smart animate right there
52:21 we go let's make it very fast let's say
52:23 250 milliseconds um and instead of an
52:26 onclick we're going to choose on drag
52:30 we're going to use a drag interaction
52:32 and as long as the the the the object is
52:35 going in the direction of where it needs
52:37 to go that's how it knows where to drag
52:39 it to same thing I can connect that one
52:42 back and we're going to choose on drag
52:44 it keeps my settings from the previous
52:46 interaction so we're good so we have and
52:48 I can even move this around and if I
52:50 move this around you'll see it keeps the
52:51 noodles so we have on and off right and
52:53 I can preview this you know I have on
52:56 and off on and off but now we want to
52:59 make this reusable we want to
53:01 encapsulate it so it can be used again
53:04 and again in multiple frames I'm going
53:06 to select them both I'm going to come up
53:09 here and I am going to create a
53:12 component set right so I selected these
53:16 two frames they're not components yet
53:18 I'm going to come up here I'm going to
53:19 create component sets and now you'll see
53:22 they're they're they're all purple and
53:24 with that means is this is a component
53:27 and this is a component but there are
53:29 two main components that have some
53:32 differences that have some interactions
53:34 so if I was to create a frame let's go
53:37 to the design panel let's choose an
53:39 iPhone 15 here we go and I was to copy
53:43 you know this little little bean that I
53:46 have here by the way if it's too large
53:48 and I want to scale it the scale tool is
53:51 different than just resizing it you can
53:53 press the K key for the scale tool tool
53:55 and you'll see the scale tool pop up
53:57 over here if you're a person who likes
53:58 to click on things on the canvas you'll
54:00 see the scale tool is over here under
54:02 that I can make this smaller so I can
54:04 say 0. five so you can make a make that
54:07 scale it smaller you don't want to just
54:09 resize it you want to scale it so there
54:10 you go we have one going to hold down
54:12 the option key the ALT key if you're on
54:14 Windows let's drag that down we got two
54:16 command d d DD right we got a bunch of
54:18 these so here we go they're aligned and
54:21 now when I preview this Frame go to
54:23 prototype create our starting point
54:25 Point you'll see that we have more of a
54:29 dynamic approach to this right so what's
54:34 cool is that this is these are
54:36 interactions it's a it's a prototype
54:39 that's encapsulated it's packaged up
54:41 that can then be used on a single frame
54:44 uh to create multiple states in the same
54:46 way that all of these if you in if you
54:48 look at their interactions you see
54:50 instead of using a a click or a drag
54:53 we're using after delay and an after
54:55 delay is going to create these
54:57 animations that are going to allow the
54:59 object to rotate and I'm actually doing
55:01 some fun things here I'm only rotating
55:04 this point to this point you know this
55:07 circle to that Circle so I'm not truly
55:10 like rotating it all the way around I'm
55:11 only changing it by like 20 degrees and
55:14 using a linear ease right uh let's see
55:19 here you'll see a smart animate
55:21 linear and that provides for a nice
55:25 little animation and if I was to
55:27 duplicate these if I was to put a bunch
55:28 of these on on the canvas you know and I
55:31 preview that they're all going to do
55:33 their thing it's like this prepackaged
55:35 animation I can press the K key and
55:37 scale it right make that bigger and and
55:40 previe that now look at that we have so
55:42 many more um and that's what's kind of
55:44 great about this so if you wanted to
55:46 play around with these draw a frame copy
55:49 one of those in right copy one of those
55:52 in right and these are all kind of
55:55 and so when I hit that space bar right
55:57 oops I didn't do this one right let's uh
56:00 copy the the thing there we go and
56:04 you'll see it it kind of plays and if I
56:07 press the K key and scale it right it's
56:10 bigger we move it and it's going to
56:13 play so a couple other things yeah this
56:16 is here's a whole set of interactions as
56:19 an interactive component I can choose
56:21 the starting point so when I select it
56:23 on the canvas I can change it to step
56:25 two step three I know we got to wrap up
56:28 pretty soon here so I'm just going to
56:29 finale out of here in just a bit but
56:31 here we go one two three
56:37 starts let's restart it it starts from
56:39 this point um because we're selecting it
56:42 we're coming over here to the properties
56:44 panel and choosing its its starting
56:46 point um so same thing if this were
56:49 frame by frame interaction right it's
56:52 just playing through the frames if we
56:55 make it an interactive component then we
56:58 can copy it and and add multiple you
57:02 know to the canvas I'm going to press
57:05 the K key to scale it and then even
57:07 change the starting point so you know in
57:10 my intro workshops I like to cover some
57:12 Advanced topics as well what I want you
57:14 to do is think about the types of fun
57:15 that can actually be had with figma and
57:18 the types of aspirations when I work
57:19 with students typically I like to create
57:21 these more fun examples then kind of
57:23 walk our way back to the more serious
57:25 ones I know I mentioned we were going to
57:27 talk about video today video prototyping
57:29 basically you can just place a video
57:31 onto any shape the same way that we
57:33 place those images um and you can pause
57:37 and play video when you select the video
57:39 go to the Prototype panel and you could
57:41 choose autoplay uh you could change
57:43 various properties I have an entire
57:45 video on video prototyping so I didn't
57:47 want to call this out because video
57:49 prototyping can uh uh is free for
57:52 education so if you have an education
57:54 team you have full access to video
57:56 prototyping and it's it's one of my
57:58 favorites all right so know we have a
58:01 bunch of questions it's Alex you have a
58:04 bunch of questions I tried to put a few
58:06 of the ones that I think were the most
58:07 common at the top but we only have qu
58:09 time for about two to three questions so
58:11 up to you on which one you address live
58:13 and then everything else maybe we can
58:14 address on Twitter or in a future video
58:17 okay awesome thank you thank you
58:18 everybody again today so is on tap the
58:20 same as on click ontap or on click will
58:23 change whether or not you're using a
58:25 touch device or a web device so if
58:27 you're using uh in your prototype you
58:30 designate it as like laptop it'll say
58:32 click if you designate as iPhone it'll
58:34 change to tap so that is going to be the
58:36 main difference between those two so
58:37 it's based off of what you set as your
58:39 preset uh so those are both of those
58:42 Boop all right I recently had some
58:43 issues connecting my wireframe sometimes
58:45 the connections don't work properly how
58:46 do I fix that issue it can be any number
58:48 of things usually if I'm having
58:51 difficulty with my connections it's
58:53 usually best to to start over like if
58:56 you get this like really big mess and
58:58 you just need to say hey I call
59:00 connection bankruptcy I need to start
59:02 over you can rightclick and um you can
59:05 remove the interactions so here uh let's
59:09 say um I select this Frame uh where's
59:12 remove interactions there it is remove
59:13 interactions so you can remove
59:15 interactions and it'll it'll clear the
59:17 interactions from the selection that you
59:19 currently have and then what I would do
59:21 is just start simple again like I know
59:23 sometimes it could be daun
59:25 what I highly recommend is breaking up
59:27 your prototype into smaller chunks so
59:30 using these flows to represent smaller
59:32 chunks for your prototypes highly
59:34 recommend that over going through very
59:37 large prototypes uh how do I few at the
59:40 top to that you might want to address
59:42 okay there a way to add padding to the
59:44 elements you're wiring together for
59:46 example you're wiring an interaction
59:47 from an icon you want to actually space
59:49 around the icon so for for people to
59:52 click on um so it's all in the way that
59:54 you create create that icon so typically
59:56 when icons are created uh the icon might
59:58 only occupy like that much area so the
01:00:03 uh component that you generate for that
01:00:05 icon uh can then be the hit State as
01:00:09 opposed to you know um taking an icon
01:00:13 and then have prototyping with that you
01:00:15 know wrap that icon in a larger frame
01:00:18 and that way that frame can be and can
01:00:21 serve as the larger hit area for your
01:00:23 interaction uh what is the most effe way
01:00:26 to make an interaction on basic
01:00:27 prototype move in either from left or
01:00:29 right depending on their position um so
01:00:33 I mean it's it's a matter like we try to
01:00:35 create the tools so then this way you
01:00:37 could have as much intention uh as
01:00:39 possible I know sometimes you just want
01:00:41 to move fast and you need to think about
01:00:43 what it is that you're trying to
01:00:44 communicate so sometimes you don't even
01:00:46 need transitions uh if you're working
01:00:48 with someone a bit more sophisticated
01:00:50 but as you're trying to develop
01:00:52 complexity or uh communicate an idea of
01:00:56 your prototype that requires more of
01:00:58 that sophistication um then it's up to
01:01:00 you to add in the details that you feel
01:01:02 are most necessary to communicate what
01:01:04 it is you're trying to communicate what
01:01:06 is the smoothest transition between two
01:01:07 screens where the status bar Sams uh but
01:01:10 the tab bar will change section once
01:01:13 again that is a matter of um basically
01:01:17 coming in and choosing the option to
01:01:20 animate matching layers you want to make
01:01:22 sure that you turn that on
01:01:25 um but that everything that is going to
01:01:26 be transitioning um is going to uh uh be
01:01:30 named differently or not transitioning
01:01:33 um be named differently so any layers
01:01:35 that match will be uh uh handled here
01:01:39 but typically when you're working with
01:01:40 smart animate um such as something like
01:01:43 this you want to be very very specific
01:01:46 about what it is you're animating and
01:01:48 what it is that you aren't things that
01:01:50 don't match up or aren't named correctly
01:01:53 if I was to go in here here and see we
01:01:55 have James going to James if this wasn't
01:01:57 James and this wasn't said Jane uh when
01:02:00 I hit play right you'll see that it
01:02:02 doesn't smart animate anymore because it
01:02:05 it doesn't recognize those as the same
01:02:06 thing but if I go back and I change them
01:02:09 both to match right then we'll see it'll
01:02:12 it'll provide that transition so
01:02:15 understanding what it is that you want
01:02:16 to transition what's going where um
01:02:19 curating that and being intentional
01:02:21 about it is going to be integral for you
01:02:23 to have a successful animation or a
01:02:26 successfully smooth animation prototype
01:02:29 uh that being said I want to make sure
01:02:30 you all give us feedback let us know how
01:02:33 we're doing and how we can additionally
01:02:36 support your Learning Journey let us
01:02:38 know in these in the feedback form what
01:02:41 you would like to see next what you
01:02:42 think was helpful um and what You' like
01:02:44 to hear from more make sure you check
01:02:46 out figma docomo future monthly
01:02:50 education workshops really appreciate
01:02:52 you all being here today whatever time
01:02:55 it is where you are I know some of you
01:02:56 are in time zones where it's pretty late
01:02:59 so once again really appreciate you by
01:03:02 you coming and attending these workshops
01:03:04 you're supporting us to produce more
01:03:06 workshops so really appreciate you all
01:03:09 make sure you drop that feedback and I
01:03:11 hope you all have a wonderful day
01:03:14 evening morning uh and as always happy
