.jpeg/webp/500)
Lesson Info
11. How To Use Color 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 Use Color In Figma
Alright. I hope you're sitting down this video. We're gonna look at color. You ready City boom. It's green and black. It's not very exciting. I know I am going to try and convince you that you don't need a lot of colors. When it comes to your wire frames, you should probably leave it gray. But hey, we're learning about color in this video. Let's jump in and I'll show you what you need to know. Alright, to work with color um select on we're gonna use this big big rectangle here. That's the default color for fig m. All you do is click on it, OK? So now fill, click on it once and you get this little guy if you've never used a color picker before, this little dots where our color is, you can click him and drag them around, ok? So at the moment, you can only pick red, OK? To change it. This little hue slider here, drag it along to the kind of zone that you want it to be. I'm gonna pick some sort of greeny thing, ok? And then move this around, OK? To get the full saturation, no saturation li...
ght dark somewhere in there. Ok. Other things you should know about in here if you want full white, just click drag and drag it like past, you know, like just keep going and it'll be full white and either of these dark ones down the bottom are gonna be the same. Ok? So white, black or that one is black doesn't matter. And I'm gonna pick some sort of like greeny color so you could pick it from the brand. Ok? Or just pick like light blue is probably the most common kind of, you know, wireframe color. It's the default in like X and a few other ones. So we end up seeing this kind of like, hm T blue thing throughout. I'm gonna pick a slightly greener version. You pick anything you like other things to know about color is transparency down the bottom here. You can make things slightly transparent, which makes no sense unless I bring this all the way to the front. Ok. So I'm using my R square, you can see it's kind of covering things with a bit of transparency. I'm gonna go back to actually, I was gonna change that there at 100%. It doesn't matter whether you do it here, you can see it there 100% or you just type it in here and you say I want it to be 50 or same again, you can kind of use your up and down arrows to kind of go through it all. So I want mine to be 100. Perfect. OK. And if you are a bit more of a color nerd, then you might be like me. Ok. Hexadecimal numbers. That's the kind of like web version of a color. You might not like that. You might like the R GB versions. There you go. It's R GB A so you can store it transparency at the end. Red, green, blue, you might be mixing colors from maybe a corporate spec manual or something else. Um Other color ways. CS S hm You probably, if you're a developer, you might be working this way. OK. R GB A colors you can type them in there. Um hue saturation luminance. I don't often use, I use this quite a bit hue saturation brightness. Um Actually do I do it in this one. Probably not in this program very often. I do a lot in things like premiere and illustrator but not my hair and fig. So I'm going to stick to the Hexad number. Other things I want to point out is the eye dropper. So we've got this here. I wanna steal this color. So I select on it. Go to my field color. Click on the little eyedropper and you'll notice. Can you see up here? There's like a zoomed inversion and watch this. I can move it around. Can you see it just zooms in on things? So it's, you know, ours is pretty easy because we can pick this big rectangle. But sometimes you're trying to pick a teeny tiny bit of color from like that, but it's gonna be that weird light gray. OK. So eyedropper, I'm gonna click on this one. Same with this fella you eyedropper. You now to get to the eyedropper very often. I won't be going into the color and pick her to do it. So I'm gonna undo to get my grays back. So I select on it. There is the shortcut for I for eye dropper like I not eye the letter I OK. It's a shortcut. So selected it, hit the eye dropper. Click on that. There's a lot of that going on. However, you won't get that this all the same color for me and be resilient. Don't try and add a bunch of colors. OK? Keep it really just black grays, whites and you know a color just to set that up a tiny bit. OK? When you start adding color palettes to it, you again, start entering different parts. Uh you know to the conversation about, oh, is this the right color? Is it the right brand color? Just keep it generic, keep it gray. Then nobody's gonna complain. The last thing about colors is and down here can you see document colors? You're like, oh great. These are the colors that I've used already. OK. So this though gets mad big and not very useful and it's fine for the moment because you're like, OK, I wanna go back to that gray that we had before. There it is there. It's something that's been used. OK. Or there's that green, is that the green? It's the same green it gives. Yeah. Later on, we're gonna look at this and we're gonna look at team library colors. It's quite later in the document. Plus we're gonna look at something called color styles in the not too distant future where we kind of tidy it all up and get a bit more consistent, but document colors will show everything they've been used in this document. So it gets a bit mad, but that's what they are. All right. That's the basics of colors. Let's jump into the next video. Actually, we're going nowhere. It's driving you mad, it's driving me mad. You can't do that then. Uh So this needs to be bigger. We're gonna do some responsive buttons later on. But for the moment I can't live with, this needs to be bigger and this needs to be more in the center. One of the things I want to show you a little shortcut might be handy is because you want to like make it bigger on both sides. You can hold down the option key on a Mac or key on a PC. And when you're scaling things instead of just like dragging the edges and then trying to move it around. If you hold down the option key on a Mac. Ok. On a PC kind of does it from both sides? You're like, that's better for you. All right. Now we can move on to the next video. Is that even in the middle, Dan? Yeah, a range. Look that is better. Let's do the same thing with this one. I got closer with that one. Some of you like, why does he care so much? And then some of you would be like, oh my goodness, finally fix the button. Will he ever get rid of the full stop? It's not lining up properly, is it anyway, let's get on to the next video now.
Class Materials
Bonus 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!