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

How to use Plugins in Figma for icons

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, in this video we're going to look at some of the secret source, what makes Figma amazing, and it is the plugins that are run in parallel with Figma. So plugins are made by other people, not Figma, and basically you install them, and in this case, I've installed a little icon plugin. Let's say we search for a house, I can grab my icon, and just drag it out. 

So it is a way of-- it's a bit teeny tiny there, but you get the idea. This is a way of extending Figma, there are lots of plugins, and they are amazing. We'll focus on the icon one at the moment, but they all work roughly the same sort of way, they extend what Figma can do, let's jump in, and look at at least one of them. 

So to install our first plugin, if you go to this little drop down, next to the Figma icon, you can go to 'Plugins', and we're going to browse them in the 'Community'. 'Manage', just will be able to see the ones you've already got installed, and maybe uninstall them. I'm going to go to 'Browse in the Community', often, I don't use this method, I just go to this Home screen, and remember, under 'Community', we were looking at icons a second ago. 

There's another option here, it says Plugins, so this is kind of new and always getting developed. What I'd like you to do is-- plugins is just-- so an amazing part of Figma, that just spend, like take a break, take, you know, take five minutes, and just have a read through all the amazing plugins. There's just so much in here that can get you so far, and kind of enable you to be fast and efficient, and like visually really compelling. 

So have a look through all the different plugins, we're going to look at icons for the moment, what you need to do is, well, the way that I use to gauge, whether this plug-in is good, is mainly bound to 'Installs', there's no like star rating yet, which I wish there was, but like Unsplash, which is a way of getting kind of commercial-free images, is a really cool plugin, really common, probably the first one everybody installs. We'll do it later in the course, but you can see, 6,30,000 other UX designers decided was useful, so there must be some big in here. 

We're going to use Iconify, if this one is not in here, or hasn't been updated for the last three years, you'll find another version that will work similar. This video is not actually how to use Iconify, but just like how to install a plugin, and get it working. So we're going to click "Install", yes, please, remember these aren't made by Figma, so no responsibility taken, and let's go and have a look now how to actually operate a plug-in. We'll do a few through this course, so let's have a look. 

So you have to turn the plugin on, you can only have one running at a time, so you're going to say, I want plugin called Iconify to start working. Now this is where they all vary, most of them have some sort of UI, they all look different, none of them look the same. This one here, it's big, I put mine on another screen, but I'm just going to move it over here. Let's have a look, let's have a look at that shopping one we're looking for, maybe look at another house, maybe that house was broken, it was hard to change it. 

So in here let's have a look at the houses, is that going to be a Stroke? None of them are going to be Strokes, I bet you. Maybe that guy might, and maybe that guy will be, probably not, I'm going to use this one, fingers crossed. So you can just click and drag them out. Look at that, got a giant svg icon, and really, that's it, that is that plugin, you can just drag stuff out, obviously there's other options in here, you can search icons, and there's lots of tagging and stuff going on. 

So plugins all work a similar sort of way, there's some sort of UI, and you'll be able to click and drag things out. We'll do a few more throughout the course, but yeah, that is the plugin, specifically for icons. I don't need this guy now, so I'm just going to delete them. 

Now when you are deleting bits and pieces, it's probably because you're always going to be left with a frame, so try not to, like you can, you can just delete it, you get to this frame. It's best to go into your actual layers, and say, that's it, I'm going to hit 'Del', and everything inside of it, and then just make sure your layers are kept nice and tidy. What the hang was that? What are you doing down there? I have no idea how I got that one, anyway, keep it clean, select that guy too. 

All right, that is, yeah, a really simple plugin, plugins are amazing in Figma, we're going to learn a few more throughout the course, let's get into the next video.

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