Note: If you have a different UI than in the course, you can change it back by clicking the '?' in the bottom right corner of Figma and select 'Go back to previous UI'. Happy Figma'ing!

Figma UI UX Design Essentials

Where to get Free icons for Figma

This lesson is exclusive to members

Course contents
SECTION: 10
Tips & Tricks 7:21
SECTION: 14
Working with Illustrator 4:16
SECTION: 19
Saving & History 5:42
SECTION: 24
Teams & Projects 5:19
SECTION: 27
Thumbnail update 4:10

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

114 lessons / 12 hours 29 quiz questions 22 projects Certificate of achievement

Overview

Hi there - my name is Dan Scott & welcome to Figma Essentials.

Together - you and me - are going to learn everything you need to get started working as a UX Designer using Figma.

You can try Figma for free by clicking here.

We’ll use this UI UX design tool to create beautiful User Interfaces and engaging prototypes. Most importantly... we'll cover the client expectations of you as a new UX designer. 

This course is aimed at people new to design, new to User Experience design. Even if you’re not totally sure what UX really means, don’t worry. We’ll start right at the beginning and work our way through step by step. 

First we’ll describe the brief & how to work with a UX persona.  

Then you’ll learn how to create simple wireframes.  

From there we’ll look at how to implement colours & images properly in your designs.

You’ll learn the do’s & don’ts around choosing fonts for web & mobile apps. 

You’ll learn how to create your own icons, buttons & other UI components. 

You’ll learn some pretty scary terms such as Components, Constraints & Multi Dimensional Variants. They are all really easy to understand once you know how. 

We’ll also make our lives easier by using free UI kits & plugins for Figma which will speed up our workflow dramatically!

We’ll build a simple Style Guide ready for client handoff. 

You’ll understand how to make both simple & advanced micro interactions, page transitions & animations 

Before the end of this course you will have made fully interactive prototypes 

You will take a project all the way through -  collaborating with other team members and exporting the right files ready to hand off to your developer or software engineer. 

We’ll be focusing on the software Figma but I’ll make sure to explain the techniques & terms used in the UX and how real world projects are run. You will develop a great understanding of the industry and will be able to manage your own UX projects.

I will be setting assignments through the course which will help develop your skills and enable you to create something special and unique for your own portfolio. 

Alright - it's time to upgrade yourself & go from Figma Zero to Figma Hero.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Downloads & Exercise files

Download Exercise Files

Transcript

Hi everyone, let's talk about where to get free icons. I'm not going to 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 Figma file. 

So I'm using iconfinder.com, I like it, 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. So what you're looking for is, let's say I want the shopping cart icon, 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 installing, that thing took ages to load. Anyway, there's a couple of things on most of the sites. 

The main thing is all to do with how free it is, because it's free, and then there's properly free, so free or licenses, I'm going to use the one that's for commercial use. This one here requires you though to use it commercially, but you have to link back to them, which is totally fine. You might find good free stuff in there, and this one here requires commercial use, but doesn't require a backlink, so I don't actually have to acknowledge the people that made it. 

So in here, pick anything, I say pick anything, I'm going to find a shopping cart, that looks like a shopping cart, where is one? "Pick something quickly, Dan, people are watching," all right, this one. So this one here, I'm going to 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 them. 

The png's probably the one you already know, svg, you may or may not know already. So I'm just going to pick a smaller icon version of this png, and I'll show you the difference. I'm going to download both of them, stick them on my desktop, and there's svg, let's compare both of them, and how Figma deals with both of them. 

So, 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. So let's bring in a file, I'm going to do this way, 'Place Image', and let's bring in both of them. You can bring in more than one image at a time, by holding 'Shift' and clicking both of them, let's click 'Open', can you see, I've got like a number, little 2 there, you can even see my little icon, look, a little trolley. 

So I'm going to click hold 'Shift, so that when I drag them out, they are not going all wonky, like that. 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, in here you can download like the really big version, let's download that, and it will look fine. 

So let's bring in another one, 'Command-Shift-K', we've got this other png. The difference is, can you see that, size of that one, so I can get a good quality png, but my svg is 1 kilobyte, this is 112 Kilobytes, that's the reason we don't-- we prefer to use svgs. So it looks good, but it's ginormous, so can't use your png, 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. svgs into Figma, what they do is, we kind of looked at this earlier, can you see, they come in as a frame, inside of that frame is a group, inside of that group is a vector, that's all we really want. 

So I'm just going to copy it, come out of that frame and hit 'Paste'. It didn't actually come out of that frame. You can drag it out of the frame so it's just sitting there, in no man's land. So I'm going to 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 want to 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, 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, but obviously, svg is scalable, that's what the "s" in the svg is. Yeah, we can go into object editing mode, which you know about already. If you're like, "I love this, but I really want a…" - double click, start going in, - "I really want a spiky handle, Dan." Looks 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 free stuff, is part of the Figma community. So if you go back to your, like a little house along the top here, there'll be an option somewhere around here called Figma Community, it's kind of new, it's better in mind, 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. 

So in here you can do things like icons, 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 iconfinder, 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 Figma. So let's have a look, let's have a look at the Fig Pick, Fig Pick just means, Figma's decided this is awesome, and everyone should look at it. 

So what we can do is, when we are dealing with the community for Figma, you end up downloading things, 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. So let's click on 'Duplicate', and basically you get your own copy, saved to your Figma kind of flow, so now let's have a look. Have a look around here, there's two different pages, ooh, lots of good icons, 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, 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, I was like, "Have I done something wrong?" It eventually loaded. 

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 grab something out of it, but now it's part of your flow, you can right click it and delete it, but everything you open or duplicate in Figma 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 Figma does, it's not saved to your hard drive, it's part of your Cloud kind of online login stuff. It also means that after a little while, you're going to have a ton of things open in here, and it's going to 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. So we've got a couple of files open, we've got the one we're working on, plus our little unicorns; unicorns? say unicorns, anyway, so let's go have a look. 

Now, it would depend on how these things have been created. These things have been created as, what's going to be called a component, later in this course. This can be a little bit tricky for us at this level, so let's just do it anyway. Let's go copy, I really need this, I like it for my wireframe, I'm going to 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, 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 going to 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 ungrouping, we're going to say, 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, where 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. That is the community, I kind of introduced it earlier on, getting into the community, because there's so much good stuff in there. You can find good wireframes, and good kind of like layouts, and lock-ups, and cards, and icons, and we're going to get used to copying and pasting them, and sticking into our document, and seeing what happens. They come through as components sometimes, sometimes as frames, sometimes they're just groups, and they're really easy, but for the moment I'm just going to 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.

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024