.jpeg/webp/500)
Lesson Info
17. Where To Get Free Icons For 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
Where To Get Free Icons For Figma
Hi, everyone. Let's talk about where to get free icons. I'm not gonna talk specifically about websites, even though I'll give you a couple. It's more about what you're looking for when you are downloading icons for our fig file. So I'm using icon finder.com. I like it. Um, there's lots of free stuff on here. Good paid stuff as well. But if this website's not here, when you go visit the internet, there's plenty of free icons. Ok. So, uh what you're looking for is, let's say I want the shopping cart icon. Ok. That's what I need for my mock up here. What you're looking for is a particular file format. It's called an SVG. I'm stalling that thing to gauges the load anyway. So there's a couple of things on most of the sites. The main thing is all to do with how free it is. Ok, because it's free and then there's properly free. So free, all licenses. And I'm gonna use the one that's for commercial use. Ok. And this one here requires you though to use it for commercially, but you have to link b...
ack to them, which is totally fine. You might find good free stuff in there. Um This one here requires commercial use, but it doesn't require a back link. So I don't actually have to acknowledge the people that made it. So in here, pick anything I say, pick anything. I'm gonna find a shopping cart that looks like a shopping cart. Here is one, pick something quickly. Dan, people are watching. All right. This one. All right. So this one here, I'm gonna open it up and what you'll find in most of these sites is there's a PNG version and an SVG version. Let's look at both of the PNG is probably the one you already know SVG. You may or may not know already. So I'm just gonna pick a um a smaller icon version of this PNG and I'll show you the difference. I'm gonna download both of them, stick them on my desktop and this SVG, let's compare both of them and how FIG A deals with both of them. So um is there a right one and a wrong one? Yes. SVG is better but more complicated. But now that we know what frames are and groups are, it's actually not that bad. OK. So let's bring in a file. I'm gonna do this way, place image. OK? And let's bring in both of them. You can bring in more than one image at a time. OK? But holding shift and clicking both of them, let's click open. Can you see? I got like a number two there, you can even see my little icon look a little trolley. OK? So I'm going to click hold shift so that when I drag them out, they are not going all wonky like that. OK? So hold shift on your keyboard. That's the reason we have a SVG rather than a PNG. I acknowledge that I downloaded a very small version. OK? On here in here, you can download like the really big version. Let's download that and it will look fine. Um So let's bring in another one command shift K OK? We've got this other PNG. The difference is, can you see that size of that one? OK. So I can get a good quality PNG. But my SPG is one kilobyte. This is 100 and 12 kilobytes. That's the reason we don't, you know, we prefer to use SVGS. Uh So it looks good but it's ginormous. So can't use UPNG. Uh it's transparent which is awesome. This SVG is transparent kind of you're like, well, that's not transparent. It's got a white background SPGS into fig A. What they do is we kind of looked at this earlier. Can you see they came in as a frame? OK? Inside of that frame is a group inside of that group is a vector. That's all we really want. So I'm just gonna copy it. OK? Come out of that frame and have paste. I didn't actually come out of that frame. You can drag it out of the frame. So it's just sitting there, no man's land. So I'm gonna click on this thing. I kind of like that's what I do. I don't want it in a frame at the moment. I just wanna kind of yank it out and delete the original frame just so I've got the vector sitting lying around happy days. Now. It's transparent and it is colored. OK? So I can go through use my eyedropper tool and actually start using these now. Whereas the PNG we can't change the color. We could, we can go to Photoshop, change it. OK? But obviously SVG is scalable. That's what the S and SVG is W OK. And yeah, we can go into object editing mode which you know about already. OK? If you like, I love this, but I really want a double click, start going in. I really want a Spiky Hindo then OK? It's like a digger. Anyway, you get the idea. SVGS are better. So whenever you are looking for icons free or not free, make sure you get the SVG. All right, another great place to get uh free stuff is part of the fig A community. So if you go back to your like little house along the top here, there'll be an option uh somewhere around here called FIG A community. It's kind of new. It's better at mine depending on how long in the future it'll get more and more robust. There is just amazing stuff in here and most of it's free. OK? So in here, you can do things like icons, OK? And you will find loads of great icon sets created by people that we're allowed to use. It's not as searchable as something like icon finder. If you just want to like a, hey, I need a sharing icon or a social media icon. You have to kind of do a little bit more searching through this, but there is great stuff and it's kind of already in fig A. OK? So let's have a look, let's have a look at the fig pic. OK. Uh fig I just means fig A has decided this is awesome and everyone should look at it. So what we can do is when we are dealing with the community for fig A, you end up downloading things. OK? So let's have a little look, let's kind of, you can go into it to preview it, but eventually at some stage to get all the stuff out of it, you need to do something called duplicating. OK? So let's click on duplicate and basically you get your own copy saved to your fig a kind of flow. So now let's have a look, have a look around here. There's two different pages. Oh Lots of good icons. OK? And before we actually copy and paste them out, let me show you what happens to these community files or at least anything you've duplicated. Let's go back to home what you'll notice now in my home, I'm kind of lost. Ok, so I'm going to go to my little drop down here, my blurry email address and I'm going to say pick my name. Let me get back to kind of home base where we were before. That took a while. Yours might do the same, so I'll leave it in there. Ok. Um I was like, have I done something wrong? It eventually loaded? OK. What happens is it duplicates into your drafts? You'll notice that. Now I have unicorns. I'm like you kind of opened it just to grow something out of it, but now it's part of your flow. OK? You can right click it and delete it. OK? But everything you open or duplicate in fig A ends in this like it's part of your world now, that's the kind of benefit I guess of working in the cloud which fig A does. OK? It's not saved your hard drive. It's part of your cloud kind of online login stuff. It also means that after a little while you're gonna have a ton of things open in here and it's gonna be hard to know which is yours. So we'll look at searching and finding the files you want later on and you might be really tidy and actually go delete the ones you don't want anymore. OK? So we've got a couple of files open. We've got the one we're working on. Plus our little unicorns unicon. Is that unicorns? Anyway. Uh So let's go and have a look. Now, it would depend on how these things have been created. These things are being created as what's going to be called a component later in this course. So this can be a little bit tricky for us at this level. OK. So let's just do it anyway. Let's go copy. I really need this. I like it from my wireframe. I'm gonna go back to this document and I'm going to paste it. And what will end up happening is this weird file turns up with a weird icon. It ends up in our assets folder. OK? Used in this file. There it is there. It's a special thing that we're going to learn later on for the moment though. What we're gonna do is select it right, click it and say detach instance you're like, I don't know why I'm doing that. Don't worry we'll learn about it later on, but it means you can just say it's kind of like un grouping, OK? We're gonna see detach the instance. You can see it kind of goes back to that frame and you might decide actually like we did before, you can keep the frame that works fine or you might go like we did before and like get it out of that frame, drag it out. So it's kind of just hanging out by himself or is he there? Let's rename it, let's call it file and in my case, it's on the, where is it on? It's ended up on a weird page. So let's say that I want it on the checkout page. It's currently not on the checkout page. There we go, ha ha. And that is the community. I kind of introduced it earlier on. OK. Getting into the community because there's so much good stuff in there. You can find good wire frames and good kind of like layouts and lockups and cards and icons. And we're gonna be used to copying and pasting them and sticking them into our document and seeing what happens they come through as components, sometimes, sometimes as frames, sometimes they're just groups and they're real easy. But for the moment I'm just gonna tidy up. I don't need these guys a kind of an example of what to go get and find and I will see you in the next video. Now we know what we need when we're getting these free icons. Let's get some icons onto the page ready for our wireframe.
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!