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

What is Figma for & does it do the coding?

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

All right, let's talk about what Figma is for, and what it's not for. It is amazing at rapid prototyping of things like websites and apps. It does do other things, which we'll cover a little bit, but it is the main tool of a UX or UI designer, and their role in the creation of either wireframes, which we'll do in this course, really quick, kind of look and feel for an app or website through, to kind of like, really, like it looks exactly like a website, high fidelity mockups of this website, with interactivity as well, and this kind of leads me to what it doesn't do. 

You can make something that looks very like a website , enough so that you can go out to testing, and that's probably the best bit about Figma and UX in general, is that we'll create something, and then we'll actually be able to get in the hands of the client, the intended audience, our customers, and they can-- it's not going to be complete, but they'll be able to use it enough, that we can make some observations and actually test some theories, about what they think, and what the users want, and if things need to be changed, we can change them really quickly in Figma, and then get them back to like why they're sitting there. 

So it is about rapid prototyping, quick, you know, changes, and get to a point where you're like satisfied with the website or the app, and you're like, this has gone through a bit of user testing, client's happy with it, now this is where Figma doesn't do anything else. It's just the prototype, it's not going to code the website for you, or the app, it hands over little pieces to the developer to use, CSS and SVGs, and graphics and stuff, but not a lot that the developer can use. 

They'll end up kind of starting from scratch using your mock-ups, and they'll use a lot of things, like spacing, and they'll make it look like your app, but that's what Figma doesn't do, it doesn't do the coding side. So what you do is you get it kind of signed off, with a client, and then you either work with a developer, if you're a developer yourself, you start coding it, or you might start, like if you're-- you might get into HTML and CSS, I've got a course on that, if you want to start doing your own stuff, or you might be using something like WordPress or Web Flow, I've got courses on the horizon for both of those two, or Wix, or something more drag and drop, you then have to build it, based on your Figma mockup that you've-- It's a lot faster to do, then go and build it, either in one of those tools or code it. 

So that's what it is, rapid prototyping, and what it's not is, you're not going to have a complete site at the end, that's a question I get asked a lot, so next video. Actually, I forgot one thing, don't go away, editor, don't cut it. What else is it getting used for? Figma is getting used a lot for, like just regular graphic design, mainly in the digital space, so, like social media campaigns, there's some amazing things you'll, you'll see it as you go through the course, you'll be like, this would be really handy for doing, Instagram story posts, or carousels, or a bunch of different sizes for ads. 

 It is getting really good at it, it doesn't do a very good print stuff, you can put a normal page into it, you can say A4 or US Letter. So our people are using it as an alternative for something, like maybe Illustrator, and a bit of Photoshop, Photoshop's still required, but you'll see, it's made for designing websites and apps, but people are using it for all sorts of other stuff, now, it's coming, not a general design tool, but know that you will find some people using it a lot more, for things that it's not meant to, but it does it just perfect. All right, so that's what it is, that's what it isn't, now this is the end, cut.

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