Drawing Tips And Tricks In Figma
Lesson 48 from: Figma UI UX Design EssentialsDaniel Walter Scott
.jpeg/webp/500)
Drawing Tips And Tricks In Figma
Lesson 48 from: Figma UI UX Design EssentialsDaniel Walter Scott
Lesson Info
48. Drawing Tips And Tricks 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
Drawing Tips And Tricks In Figma
All right. Uh This is what we make in this video and you're like turning it off, skipping, don't skip it. Uh We do some simple stuff and figment is not a full time drawing tool. It does uh it does simple things. Great. OK? And you're gonna use it probably a lot for building U I and icons. So I'm gonna go through not every feature but all the kind of useful stuff when you are A U I designer and you do need to make switches and icons and bits and pieces. I'm gonna go through those tips and tricks right now. That's so bad. All right, let's not do that one. All right. Now I get started. All right to get started. I'm just going to kind of use the checkout page because it's empty. You can use anything you like shift to zoom in on the thing you have selected. OK? Um I'm going to, I'm just gonna like briefly give the pencil tool because I don't really like it. It's an error. OK? You can change basic settings over here. If you hold shift, you can draw kind of like straight sticks. OK? I don't u...
se it. You might love it. There's not much to it. Ah, the pencil tool is one, the pen tool is, it's a weird one. If you've never used it, this is not the video to learn it. I'm just going to give you the real basics. Um, but it is a really, is a U I designer or a UX designer. It's really handy to learn the pen tool. But go off, you know, I've got an illustrator course that spends a lot of time with the pen tool that might be right for you. But the super basics are if you click once you get a corner, so I'm going to give you you, you not doing anything, just really wants to snap and go straight, which is cool and this is my house or an arrow, whatever you want to do when you get back to the beginning here, watch this. If I get to the back of the beginning, I can close it up and then over here, I can give it a fill. OK? So that's the basics of straight lines with a pen tool. Space bar, drag K four. Let's say I need a Moon cos it's an easy example. Remember clicking once, gives you a corner and if you want a curve, you click, hold and drag, click once for a corner, click, hold and drag for a curve, click once for a corner. That's a kind of a, I don't know the basic rules of this. Now, the one thing. So I've got those two and because we've been drawing an object editing mode, they're not two separate shapes. Can you see I'm still inside of here, I'm trapped in object editing mode. This is a common, I get caught in this all the time because I'm used to other programs. So this vector is together. So what I'm gonna do is select you cut, who remembers how to get out of this? There's the official way done. The other way is just double click the background when the selection tool. So I'm out now, I can hit paste. OK? So I've got them separate. I've got my house and my moon when you are drawing and you're trying to do like a bit of symmetry and symmetrical. If you zoom right in, OK. If I zoom right in, you can start to see the pixels. It's a little hard to see on screen. OK? Probably in the recording. But can you see and it will try and snap to them so you can do some stuff like this. OK? Where it is actually, you know, following uh really snapping to these uh pixels here drawing a house because who else? Well loves sided house. I'm using my arrow key just to move it across one. So I selected it once I'm in object editing mode, selected it, move it across once who else um was driving them nuts. This one here remember Mobile. Um our original one just kind of ignored it there, but I'm like you are the wrong width and the way it was designed I couldn't change it. So, hey, we can do it now with our sweet pencil to get it to stop looking like an arrow. I need to have drawn it with a, a door. So my pen tool, I'm going to go inside of this thing by actually back to the selection tool, double click it to go inside pen tool. I need probably back to my selection tool. I need these two guys to come up here. Here we go. Beautiful then better, slightly better. OK. So zooming into pixels can I don't know, give you a bit of consistency. Another thing to do with this is the stroke. So um you get out of the way you come over here. So the stroke we looked at earlier with it, selected the stroke, you can go to this kind of advanced stroke option. Click on that. OK? And we had a look at the end points, OK? We don't have any end points because it's complete shape. Remember they're rounded and stubby ends. The one I'm looking for now is actually this one first. So center can you see over here? The blue line is kind of, you know the line I drew and then my stroke which is one pixel is straddling it. OK? But you can go from inside and outside. This is going to make a bigger difference to this. Can you see the difference in the house? Now? It's the same kind of original stroke. What you might find is you'll download a bunch of icons and they'll be the same height and width be like, why does this one seem smaller? And this one seem bigger? It's just the way that this is being processed. Does the stroke run around the inside or the outside? And the other thing is the edges here, you might have a bunch of uh icons that don't have these really sharp edges. So back into advance there, this is this, this is a metering here. You can or mitering. Sorry, metering. Ok. That's a little sharp one by default, you can slice them off. Ok. Little stubby ends or you can round them, which is quite nice. Hm. Fancy. It's not fancy as that one's a bit longer than that one. I'm giving up. You get the idea. Another couple of things is there's dash lines, ok? They're in here. Stroke style solid. Let's go. Dashed. There you go. That's where that is and undo that um other things that are useful are I haven't covered yet. There is a star. Oh, click it once I want to click, hold and drag and let go. That doesn't seem to work. I got to click once and then click. Ok. If you run into the same problem, you too OK. I can drag out a star if I want it to be a perfectly um uh height and width is constrained. Hold shift. I get a star. I go back to my selection tool. Now I can play with things like over here is the star number. So I can do more of like a, like a little star bursty thing. And these two here you can play around with, OK. They're pretty self explanatory. OK. This one here and Randy corners same with a triangle. You can make a triangle. What polygon here, man, I keep doing it. Polygon, draw it out and then go like this. Look over here to all of your shapes. Can you see this one here count? OK. So it said polygon room not triangle. So you can have four is not a poly. Well, is it, I don't know, makes it square, but let's go five. OK? And we'll go to six. OK. You get the idea octagon, let's do it round the corners and then here, oh The count is there as well. It's a bit of a weird one. There you go. You do get a rectangle square. Other thing that I need to show you is kind of the rotation. Now with the selected tool. OK? You can actually just hover here and rotate things. OK? If you rotate them. So I'm just hovering outside here, hold shift and rotate it. It will block it into kind of like larger units, you can type it in over here. Ok. I think it was, what was it going up in something like 15, yeah, 15 degree increments. Ok. So you could decide that actually I just want to rotate this one, you know, 100 and 80 you just type it in. Also know that there is a bunch of options under here under um the little f under object. And can you see rotate, we've already kind of looked at these flip horizontal, flip vertical. There's a bunch of stuff in here and last but not least is something called outline mode. OK? So it even uses if you know if you've heard of outline view, OK? Uh From Adobe Illustrator. It's the same in here. It's even the same shortcut. Go try it if you know the shortcut, OK? It's command Y on a Mac control, Y on a PC and it was in there. If you want the long way, if it's new to you, it's just this option in here. Slick back here. You object. Where is it actually? No, it's under view and there it is their outlines. What is it? It's viewing your document. If I zoom right out what's zoom to everything, it's right. Shift one, everything on my whole page. You see it breaks it down to this kind of really simplistic view. This is really handy when, especially when stuff is clipped off. Look at this guy, I was using this off camera when I was um what is it command Y or control Y when I was just trying to get these to line up? And I was like, is that going to the edge there? I just went command Y or control Y on a PC. OK. And just so I'm like, so I can start working on these and actually see them, you can work exactly how you were doing it before. Like it's just kind of an outline view. Hence the name, outline view really good when you are drawing, get things to line up, see through things like an X ray. And let's turn it back on command Y on a Mac control, Y on a PC. The one thing that I always get stuck in is you're in here and you don't realize it and you're trying to do something over here and you're stuck in site editing mode. I mentioned a couple of times because I just feel like why can't I move this because you've zoomed in over here and you don't know what you're doing and you're like, yeah, du stuck in object editing mode done. We'll just double check the background with the selection tool. Alright. That is my like tips and tricks for drawing in fig A without getting too deep into it. We do do drawing in here. It's not, it's like best feature, but it does all the good stuff, all the basic stuff perfectly. Thank you fig Ma Thank you for watching and I'll see you in another video.
Class Materials
Bonus Materials
Ratings and Reviews
Student Work
Related Classes
UX Design