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

Creating our design file & introducing frames in 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

So let's make our first design file, so can be a little confusing for this first screen, yours is going to look different from mine, because they change this quite often. If you have nothing like mine you might go up to the top left hand here, and click on the little drop down. If you're somewhere else you might have to, click on the 'Home' button first, and then this little drop down, and what you're looking to do is to click on your 'Name', mine would be a bit blurry here, because it's got my email addresses as well, but click on your 'Name', not Community, click here, and you should get to something resembling my screen. 

What we want to do is a new design file, that only appeared the other day. So what I've normally done in the past, is I go to-- we're going to create drafts, and hit this little '+', it's kind of next to it. So either way we're making a new design file, and there we go. If you're brand new, I've kind of reset my Figma, so all these little pop-ups, you can show stuff, I'm here to show you, so I'm going to cancel that. You end up with this big nothing screen. 

We've got our design file, now we need to introduce frames, frames of these guys here, this little icon here, third one in, click on it, and you can draw out any size frame. Think of a frame as a page, so if we're drawing an app, we're going to draw something kind of like, oh, go back to this tool here, draw out something that looks okay. You can have multiple frames, all sorts of different sizes, desktop one, tablet one. 

So frames have many uses, but at this early stage of the course, think of them as a page or an artboard, if you're from Adobe land. What we need to do is delete them because those are random sizes, click anywhere on the inside of them, hit 'Delete', click them, delete them. So go to your 'Frame' tool, and actually let's be a little bit more specific with our sizes. Over here you'll have some pre-made sizes, you are going to be in the future, so you might be at iPhone 52, I'm going to use iPhone 8, it's a nice generic size for both Android and Apple, some of these big ones get a bit big and strange sized. 

Now the goal here is to pick a size that is generic, we're not going to design every different iPhone, in different size, we're going to design something close enough, to the general purpose phone, and our developer will build something that is a bit more responsive, and we'll adjust for the kind of small changes in different pixels. So pick a phone size that is quite generic, it's easiest just to Google, like, "most common phone size," and you will get something, or "most common desktop size," and you will get something in here, and pick it. 

If you're designing a watch, if you're doing kind of just regular old, old school paper, the wood stuff, there's all sorts of things in here, so yours will be different. Now I'm going to start with phone, and I'm going to start with iPhone 8, even though it's really old, I don't know why it's still in here, here it is, but it's a good generic size, 375 pixels, I like. You can adjust it afterwards, here's your frame, and you can see, actually the new size is not even listed there. I'm going to use 400 and just type over the top, I'm going to undo that because iPhone 8 is perfect for what I need, and again, if you're watching in the future, and there's no, like iPhone 8, you can type in this, 375, 667, to get the same dimensions, but hey, go with whatever is common for you right now. 

The other thing I tend to do is, I try and, at the meeting, figure out what kind of phone my client has, because they're going to be potentially testing it on their phone. So I want to make sure, like if they've got some sort of phone, I might use that just so that the mock-up works really great on their phone. So we're going to end up with naming loads of these frames, because iPhone 8, 1, 2, 3, 4, 5, 6, 7, 8 is not going to help us. So we're going to double click on the word up here, or you can double click over here in your 'Layers' panel. If you can't see the Layers you might be on Assets, double click it, either one, and let's call this one, remember our task flow we've got, we're going to have our Marketing page, we'll call it the Home page, Home page/Marketing page. 

We want another one, so you can go back to your 'Frame' tool, click on 'iPhone 8' again, you'll get another one, and just keep going the way through. We're not going to do huge amounts of shortcuts in this course, but we're going to have to learn a few. The first one's going to be space bar, so hold down space bar, it's pretty common in lots of design programs, right? Click, hold, and drag, and I'm going to name it in this one. So remember, our task flow is Marketing page, then Product Details. 

Another shortcut that we use quite a lot, is you can just copy and paste these frames, so just click the name, 'Command C' on a Mac, or 'Ctrl C' on a PC, then 'V', so 'Command 'V'. We've got another one, 'Ctrl V' on a PC, up to you, I say no shortcuts, and then I start with lots of shortcuts. Let's put in our four pages, so our task flow said, we did the Product Details, what else was there? So Check Out, and copy paste, spacebar, click and drag, we're going to do our Confirmation.

So in the same document, there's no reason why you can't then go, actually, now, I want my Desktop version, so I'm going to click on 'Frame', I'm going to say 'Tablet', and I'm going to say, we're going to be designing for the iPad Pro 12, because that's the one I own, and over here, Landscape, Portrait, hit space bar across, Landscape, Portrait, you can remove them. I'm going to click the name, you drag the name, spacebar around, drag the name around, you might say copy paste, paste, and do the same thing. 

We're going to have Home page, Product Details, same with like the Desktop versions, I'm just going fast here, because we're going to delete them, so you don't need to, maybe practice playing around with it. If you, see this one's iPad Pro at the moment, you can click on this frame and say, actually, now you are a normal kind of standard Desktop, that's a really good Desktop size, really common and generic. Now zooming in and out, 'Command' on a Mac, 'Ctrl' on a PC, and it's the plus and minus keys. 

There's a million different ways of doing lots of things here in Figma, I'm going to give you one way that I think is probably, the easiest at your level, or just the generic best way. If you do find another way, and you're horrified, I'm not using the hold option, hold the 'Command' key down, and use my scroll wheel, that's what I can do, to zoom in and out, you can do that, that's fine. What I want you to do is, for this course, is I'm going to select all of these, and I'm just using this tool, it defaults to it every time. So you don't really need to pick it that much, I'm just going to delete it, this is where I want you to be, at the end of this. 

If you end up in the middle of nowhere, I zoomed in into the middle of nowhere, I'm going to zoom out, use my spacebar, get it right in the middle, and then zoom in. So this is what I want you to get to, I want just four boring old frames, and I want you to name them all. 

The last thing I want to show you, kind of kicking off this, getting used to Figma, is naming your file. Just so you know, you're going to end up with lots of untitled documents, it just happens, I don't know, this program loves untitled documents. So we're going to be really specific, and actually name them. if we click off in the background here, can you see, it appears up there, if you've got something selected, it goes away, have nothing selected, click in no man's land, and you can click up here, and you can say, give it a name, and you've already got your brief, right? 

So mine is Scott, yours is going to be something different, but we're all going to call ours "Ecom v1" So you pick your, the name of your company, and put Ecom v1, our e-commerce is version 1. So the v1, just something, A, B, C, 1,2,3, it doesn't matter. As long as you're not like a Final person, Final 01, Final Revisited, Final final. If you're laughing, it's, you know what I'm talking about, I'm talking to you, give it some version numbers. There are some sweet features later on, for like versioning within the document but that's later on. 

Another thing is, if you have got a bunch of Untitled, you can, let's go back to, I want to explore this little house, or go back to, yeah, go back to the little house. Remember, make sure you're at your little Name here, and not Community, and what you'll notice is, look, there he is down there, Ecom v1. If you've got lots of Untitled already, I've cleaned mine out, you can right click them and go to 'Rename', and just do it there or open them up, and do what we just did, back to this tab, back to 'Home'. Keep practicing that, home base into our work, kind of like a browser. 

All right, that is our basic setup, these are frames, the whole thing is called a design file. Frames have other sneaky settings that we'll talk about later in the course, but for the moment consider them pages or artboards, but they call them frames, onwards to the next video.

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