How to Prototype in Figma
Daniel Walter Scott
Lesson Info
22. How to Prototype in Figma
Lessons
Introduction to Figma Essentials
02:53 2Getting Started with Figma Training
03:06 3What Is Figma For & Does It Do The Coding?
03:46 4What's The Difference Between UI And UX In Figma
05:22 5What We Are Making In This Figma Course
09:18 6Class Project 01 - Create Your Own Brief
04:01 7What is Lo Fi Wireframe vs High Fidelity in Figma?
02:34 8Creating Our Design File & Introducing Frames In Figma
08:29The Basics Of Type & Fonts In Figma
10:51 10Rectangles, Circles, Buttons And Rounded Corners In Figma
06:50 11How To Use Color In Figma
05:45 12Strokes Plus Updating Color Defaults In Figma
09:28 13Object Editing And How To Escape In Figma
01:47 14Scale vs Selection Tool in Figma
02:39 15Frames vs Groups in Figma
09:24 16Class Project 02 - Wireframe
03:00 17Where To Get Free Icons For Figma
09:10 18Matching The Stroke Of Our Icons
05:16 19How To Use Plugins In Figma For Icons
04:31 20Class Project 03 - Icons
03:48 21How to Use Pages in Figma
08:31 22How to Prototype in Figma
10:46 23Prototype Animation and Easing In Figma
10:53 24Testing On Your Phone with Figma Mirror
05:40 25Class Project 04 - Testing On Your Phone
03:51 26What is Smart Animation & Delays in Figma?
08:44 27Class Project 05 - My First Animation
02:01 28Sharing & Commenting on a Figma File with Stakeholders
07:10 29Sharing & Editing With Other Ux Designers In Figma
06:58 30How I Get Inspiration For Ux Projects
06:39 31How To Create A Mood Board In Figma
05:33 32Class Project 06 - Moodboard
01:26 33How to Work with Columns & Grids in Figma
13:54 34Tips, Tricks, Preferences, and Weirdness in Figma
07:21 35Color Inspiration & The Eyedropper In Figma
06:34 36How To Create A Color Palette In Figma
09:02 37How to Make Gradients in Figma
07:09 38How to Create & Use Color Styles in Figma
08:01 39Class Project 07 - Colors & Columns
04:00 40Fonts on Desktop vs in Browser in Figma
01:30 41What Fonts Can I Use? Plus Font Pairing In Figma
06:01 42What Common Font Sizes Should I Choose In Web Design?
11:30 43How to Make Character Styles in Figma
06:36 44Lorem Ipsum & Placeholder Text In Figma
04:28 45Useful Things To Know About Text In Figma
09:35 46How To Fix Missing Fonts In Figma
02:42 47Class Project 08 - Text
05:19 48Drawing Tips And Tricks In Figma
09:38 49Squircle Buttons with ios Rounded Courses In Figma
02:48 50Boolean, Union, Subtract, Intersect and Exclude with Pathfinder in Figma
07:25 51What Is The Difference? Union vs Flatten In Figma
03:36 52Class Project 09 - Making Stuff
03:29 53Smart Selection & Tidy Up in Figma
08:40 54Do I Need To Know Illustrator With Figma?
04:15 55Tips & Tricks For Using Images In Figma
06:11 56Masking & Cropping Images In Figma
09:12 57Free Images & Plugins For Figma
02:31 58Do You Need Photoshop For Ux Design In Figma?
10:40 59Class Project 10 - Images
01:17 60What Is Autolayout & Expanding Buttons In Figma?
10:27 61Class Project 11 - Buttons
01:15 62Auto Layout For Spacing
05:47 63How To Use Constraints In Figma
08:22 64Combining Nested Frames Auto Layout & Constraints in Figma
11:54 65Adding Text Box Autoheight to Autolayout in Figma
08:27 66Class Project 12 - Responsive Design
02:19 67Nice Drop Shadow & Inner Drop Shadow Effects In Figma
05:56 68Blur Layer, Background Blur & Image Blur in Figma
05:57 69How to Make Neumorphic UI buttons in Figma
07:37 70Class Project 13 - Effects
01:53 71How To Save Locally & Save History In Figma
05:42 72What are Components in Figma?
06:19 73Updating, Changing & Resetting Your Components
07:47 74You Can’t Kill Main Components In Figma
07:22 75Where Should You Keep Your Main Components In Figma
05:02 76Intro To The Forward Slash / Naming Convention In Figma
08:55 77Class Project 14 - Components
00:44 78How To Make Component Variants In Figma
06:41 79Another Way To Make Variables In Figma
06:14 80How to Make a Multi Dimensional Variant in Figma
11:13 81Class Project 15 - Variants
01:41 82How To Make A Form Using Variants In Figma
12:52 83Class Project 16 - Form
01:27 84Putting It All Together In A Desktop Example
19:44 85How To Add A Popup Overlay Modal In Figma
03:03 86How To Make & Prototype A Tool Tip In Figma
07:26 87What are Flows in Figma?
05:39 88Slide In Mobile Nav Menu Overlay In Figma
03:55 89Class Project 17 - Prototyping
01:10 90How To Pin Navigation To The Top In Figma
10:17 91How To Make A Horizontal Scrolling Swipe In Figma
06:36 92Automatic Scroll Down The Page To Anchor Point In Figma
04:50 93What are Teams vs Projects vs Files in Figma?
05:18 94How Do You Use Team Libraries In Figma
11:03 95The Difference Between Animation & Micro Interactions
02:55 96Animation With Custom Easing In Figma
25:36 97Class Project 18 - My Second Animation
01:54 98How To Make Animated Transitions In Figma
12:34 99Class Project 19 - Page Transition
01:31 100Micro Interactions Using Interactive Components In Figma
05:54 101Micro Interaction Toggle Switch In Figma
04:23 102Micro Interaction Burger Menu Turned Into A Cross In Figma
04:23 103Class Project 20 - Micro Interaction
01:35 104How To Change The Thumbnail For Figma Files
04:10 105How To Export Images Out Of Figma
07:40 106How To Share Your Document With Clients & Stakeholders
07:09 107Talking To Your Developer Early In The Figma Design Process
03:55 108Sharing Figma With Developers & Engineers Handoff
06:07 109What Are The Next Level Handoffs Aka Design Systems
03:18 110Class Project 21 - Finish your design
04:57 111What Next?
06:08Lesson Info
How to Prototype in Figma
Hi, everyone in this video. We're gonna prototype. We're gonna put it in a phone and when we click stuff, it moves through to the next frame. Cool. Huh? I'm also gonna get a little bit lost, a little bit into this video. Something goes wrong. We're gonna fix it together. So we all learn. Let's get started. Ok. It's an exciting time. Uh How do we prototype it? We'll do some basic stuff first. What we need to do, first of all is go from design, which we've been at for a long time. Now go to prototype. OK? And what we're going to do is have the home page selected. Ok? We'll start with this one. And what you'll notice is this little dot This little dot is important. We're gonna click hold and drag, drag, drag at arrow and go book and stick them on there. Uh Give it a play. You can just kind of click it and then let go. Now that's it. It's gonna do some basic stuff to start with. We'll do the other pages. It's the same with this one. Click on the name at the top and say you at the name at t...
he top of this one and there you go. All right, let's prototype it. Hi everyone. It is future Dan. I'm just going to pause the video here real quick and share an update to FI A I'm about to click on this button over here. The little arrow. Ok? And that is the present option. Ok. And that was the only option when I made this course. Ok. The latest update is added an extra option. Preview. So present is what we're gonna use for the rest of this video. It opens up our design in a new tab. OK? The difference between present which we use in this course and preview is preview opens up in like a little window on its own. It still does our interactions. OK? There's no real difference except one is a small little window that you can kind of keep open all the time and the other one is a separate tab. There you go. Nice little update from FIG A which is better. I still use the tab option. This one here is fine but it's always in the way but it is new. So I might get used to it. You can decide which one you prefer. There's no real difference from prototyping other than one's open and one's in a separate tab. I'm gonna close this down and let you get back to the video. Why is his that orange color? I don't know. I tried to recreate the video, but hey, it's close enough you get back to the video. OK? To prototyping it, it's called present. You can see it here. A little play button. Click on that and it will open up. You'll notice another tab. There's our original, we've gone off to this other tab. OK? And what happens is it'll present from whatever page you were on. So that's not what I want. I want to go back here and if I go to this home page here, OK, just click on the word homepage and then present. Ok. It'll basically jump back to that same tab, but at least we're at the home page. Now. Look at that. That's our sweet home page. So what we're gonna do is just click anywhere. OK? So click once. Oh it moved on, click in, check our page. Got it. What is that confirmation page has had a bad day. What is on there that is doing that shouldn't do that. Uh Let's close it downside again. Uh What is on there? Nothing, something's weird happening. Uh I'll leave it in the course in case it happens to you homepage present yours is probably gonna have this little load screen as well. There we go. You, you, you giant something in the way. I'll figure that out later on, but it's kind of working. We're getting on the giant black box. Uh Yucky, you wait there and I'll figure it out. So we all know. Wait there. All right, I'm back. I have no idea is the answer. Did you? You've already sort of in fast mode. Basically. What I normally do in a situation like that is I will start, um, I'll start going through and deleting stuff. I figured it was some SVG doing some weed stuff. So I delete that and I tested it and it still was broken. Let's double check. It's still broken. No, it's fixed. Weird. I don't know then um so all I did was delete it and then undo it and it came back to life. So just in case something else happens and it's not as easily fixed like that took me ages. It took me about 5, 10 minutes to kind of figure out what was going on. What I normally do is actually I go through and I just delete stuff and then test it, delete stuff and test it, delete stuff and test it and to see eventually something that I've deleted kind of shows that it was causing the problems. That's normally how I do it. And then I gave up on that. So I just made another version of it and that worked and in this case I just deleted it and undid it and it came back, probably closing the program, opening it back up, restarting machine anyway. Alright. That was a little bit of a um tangent. But these things happen. So it kinda worked. Let's go to our present. Now, forget this is back in the zone, Dan, back in the zone. OK? So we're gonna preview it and we have done some basic prototyping where you click anywhere and it moves along. OK? It gets to the end and it's kind of stuck. So what you can do if you kind of wiggle around, OK? You'll notice that um after a while, some other little options appear. OK? Restart which is r it's a really common one. Get back to the beginning. So you can kind of work through your prototype again. You can manually get through it. Can you see down here? Page other things that might be useful is under these options here. You might just like you wanna go like 100% or full screen to get rid of all the kind of chrome around the outside. Uh What else do you want to do? That's kind of it. And one thing you need to know is that you don't need to close this every time. OK? You, I don't know, I feel like when you're finished, you close this down and then come back over here, but you don't have to leave it open and just always go back to it because what happens is it updates, see this if I go in here and I decide to uh change the color of this. Ooh Good point. This happens quite a bit when you're new and you're like Where did it all go? OK. Cos you're on prototype. Remember to go back to the design. There's three at the top here we'll look at in spectator in the course. But whenever you're missing your colors or fonts, it's because you're stuck on prototype, not design. So I'm gonna go in here and I'm gonna say you are now going to be another color. OK. Now I'm gonna jump out to this tab that's still open and you'll notice uh if I go back through my pages, it updates. If you're using the browser version, it's handy to get this tab, pull it out and put it on another desktop on the desktop version. It's kind of stuck in here at the moment. I can't kind of pull it apart. So just toggle back between the two. If you do wanna toggle back between the two, the shortcut is there's no shortcut. That is a bit of a pain. There might be in the future check. You want Google, the thing that says uh fig a present uh what is it called? Yeah, present shortcut. OK. It doesn't exist at the moment. What we do is we use the command on a Mac control and a PC and command one is back to your little home screen. OK? We've been clicking on that command two is whatever the second tab is, that's considered the 1st 123. So in my case, I'm gonna be going back between command two and command three, command two, command three, command two make a change come on three. OK? And it updates instantly so you can keep that open. Another thing to note is you can't prototype across pages. OK? So I go to my home page, I go to prototype and I'm like I wanna go to page something over here. That's not possible. OK? So it's only between frames on a page. What you'll notice in mine as well is that I have this nice chrome around the outside of an iphone eight that might look ancient when you're watching this. OK. But you can change that. And let's let me show you how. So let's be on prototype. Let's go to show prototype settings or have nothing selected, you end up at the same place. OK? So having something selected prototype, click this button or just click in no man's land. OK? And you can say, all right, I don't want an iphone six. I want uh I don't know what Google pics are like. I own a four at the moment. Why? Why can't we have a four? You have to look at a really old uh two. and you can pick through the different colors. Um Not that they change much on an iphone, but obviously on a iphone eight. OK? Instead of the gold one, you can pick the space gray one or the silver one. It's basically the backs of the phone. So not a whole lot changes, you can change the background color, you can go from portrait to landscape. OK? And when I go into preview, now, let's have a look, hey, doesn't quite work on landscape, but you get the idea if you can't see any of these. It's because when you started, OK, remember way back in the beginning when we went, all right, make our first frame and we picked one of these defaults, OK? They're attached to this. OK? So even if you've just typed out, you've started with a desktop version and you've typed it out and made it a phone size, it doesn't connect up anymore. So you might have to make phone sizes and copy and paste them on if you want that uh chrome there. It's, it doesn't help the testing very much other than it looks cool. You'll also notice that our desktop versions. So let's have a look at desktop. Click on this one even though there's nothing on this. So click on home page on the frame too, aren't I? OK? Click on the home page. You'll notice some prototype, prototype settings. There's nothing in here. OK. So I can go and say that I want it to be a desktop. OK? Like a laptop and it's not there. OK? So there's only a few things you can actually wrap that chrome around at the moment. Alright. One last thing before we go is if you have been following me, what I want you to do is go back to mobile and I want you to break all of the um these prototypes here cos I don't want to just click anywhere. I want it to go to product details only when I click the learn more button and I want to go straight from buy. Now all the way to the checkout page. When that button's clicked at the moment, it's using the entire frame. So to get rid of it, you can do two things. Uh What I tend to do is just click on the arrow, hit delete or you can click on your frame here. OK? And say under prototype, can you see? It says we've, we've applied this interaction called tap check out. OK. Just hit minus the same thing, whether you want to delete it by selecting and deleting it or selecting the frame and then just minusing any interactions you've got added. All right. So we're back. We've gone nowhere. We added them, but we deleted them. Let's jump to the next video and we will break up the buttons, but we'll also add some animations with our transitions. All right, I'll see you there.
Class Materials
Ratings and Reviews
Mahyar Hassid
Great class, Daniel drops so much knowledge in every video and in all the in between unexpected moments that helps speed up your process!