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

Class Project 02 - Wireframe

This lesson is exclusive to members

Course contents
SECTION: 1
Getting Started 30:36
SECTION: 2
Wireframing - Low Fidelity 11:03
SECTION: 3
Type, Color & Icon Introduction 1:12:34
SECTION: 4
Pages 8:32
SECTION: 5
Prototyping - Level 1 30:08
SECTION: 6
Animation Level 1 10:46
SECTION: 7
Commenting 14:09
SECTION: 8
Moodboard - High Fidelity 13:40
SECTION: 9
Columns 13:54
SECTION: 10
Tips & Tricks 7:21
SECTION: 11
Colors 34:48
SECTION: 12
Text & Fonts Advanced 47:48
SECTION: 13
Drawing 35:41
SECTION: 14
Working with Illustrator 4:16
SECTION: 15
Images 17:55
SECTION: 16
Working with Photoshop 11:58
SECTION: 17
Autolayout & Constraints 52:08
SECTION: 18
Effects 15:30
SECTION: 19
Saving & History 5:42
SECTION: 20
Components & Instances 36:15
SECTION: 21
Variants 23:04
SECTION: 22
Making a form 34:05
SECTION: 23
Prototyping - Level 2 43:01
SECTION: 24
Teams & Projects 5:19
SECTION: 25
Libraries 11:03
SECTION: 26
Animation & Micro Interactions 1:00:51
SECTION: 27
Thumbnail update 4:10
SECTION: 28
Exporting 35:21
SECTION: 29
What next 14:53

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Student class projects

0 0
Avatar

Natalie Walsh

@natalieWalsh
0 0
Avatar

Larney Rutledge

@larneyRutledge
0 0
Avatar

Bob Hamilton

@bobHamilton

Howdy 🤠
0 0
Avatar

Jonas Jaukkuri

@jonasJaukkuri

Went a bit overboard, let's see if it bites me in the behind.
0 0
Avatar

DAVID LYTHBERG ANNOR

@dAVIDLYTHBERGANNOR

Assignment 2 Done and dusted
0 0
Avatar

Nick Stokes

@nickStokes

All good so far
0 0
Avatar

Ghaydaa ss

@ghaydaaSaifo
0 0
Avatar

Klára Pálossy

@kláraPálossy
0 0
Avatar

Scott Rook

@ScottRook
0 0
Avatar

Ahmar Faraz Shaik

@ahmarFarazShaik
0 0
Avatar

Nourhan Mamdouh

@nourhanMamdouh
0 0
Avatar

Niazra Enano

@niazraEnano

Here is my project 02 - Wireframe
0 0
Avatar

Rebecca Crecelius

@RebeccaCrecelius
0 0
Avatar

Preetam Dias

@preetamDias1

about the wireframing
0 0
Avatar

Esra'a Aqrabawi

@esra'aAqrabawi
0 0
Avatar

Sara Peršič

@saraPersic
0 0
Avatar

Mark Cheriyan

@markCheriyan

Class Project 02 - Wireframe
0 0
Avatar

Suciu Alexandru

@Suciu

Wireframe pratice.
0 0
Avatar

Allyson Boate

@allysonBoate
0 0
Avatar

Ant Browne

@anthonyBrowne
0 0
Avatar

Antonia Meissner

@antoniaMeissner
0 0
Avatar

Lorenzo Carboni

@lorenzoCarboni
0 0
Avatar

Agnieszka Olearczyk

@agnieszkaOlearczyk
0 0
Avatar

Martin Peiffer

@martinPeiffer

I didnt struggle with any part here. I did however find myself conflicted whether I should group or frame elements for later. I also took some time to except placeholder text.
0 0
Avatar

Kathy Rogers

@kathyRogers

Wireframe
0 0
Avatar

Hicham BAKIR

@hichamBAKIR
0 0
Avatar

Nataliya Marynchenco

@nataliyaMarynchenco
0 0
Avatar

Nadia Gouda

@nadiaGouda

Class Project 02 - Wireframe
0 0
Avatar

Riya Niwalkar

@RiyaNiwalkar
0 0
Avatar

Thomas Wong

@ThomasWong

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.

Downloads & Exercise files

Download Exercise Files

Transcript

Hi everyone, it is class project time. I want you to create something like this, You might be following along so far, and you might be, kind of at a similar sort of stage here, if you're not, I want you to build, get all your frames in, I want you to build this first page plus these other three, basically just other kind of versions of this first page, rectangles, lines, some text. 

I want you to keep it reasonably similar to my layout, even if you're like, even if you disagree, and you're like, "No, they shouldn't be there." Keep it kind of similar because, I don't know, I want you to be able to follow along with your example throughout this course, and these kind of units help me show you, all the different features in Figma, so keep it close to that. 

The actual requirements, for the different class projects are in your Exercise files, you'll see something in there called Class Projects, open that up, and it will look something like this. We've done this first one, so ignore that, now if you haven't, this website url will change, kind of building it at the moment, but remember, you're going to go to that website, and you're going to create your own brief and persona. 

So we've done that one already, potentially, and then we're up to here. So use the skills you've learnt so far, it should look something like that. If you're looking for a larger version of it, you should be able to zoom in, in this PDF, but if you can't, in your Exercise Files there is the png, Wireframe Example, just a nice big version of it you can look at. There is a Figma file in there as well, remember, if you can't remember how to do the Figma file stuff, when you go 'Home', go to your 'Drafts', and hit that, and you can import that Figma file, up to you. 

All right, what else needs to be done? Here are the requirements, so four pages, those are the four pages from our Task Flow, pick your own color, it doesn't have to be green, and your own font. You lose points if you use, Papyrus, Trajan, BrushScript, or Comic Sans, all terrible fonts, pick a plain simple font that I don't hate, it's part of the requirements. I'm looking at you, Papyrus, and then what I want you to do is, just take a screenshot, I'll show you how to export frames and stuff properly later on, but it's actually just easier at the moment to go into Figma, and open up your project, and just take a screenshot. 

On a Mac it's 'Command-Shift-4', you can just drag a box around it, and on your desktop you probably have a screenshot. On a PC it's slightly different, you do use Print Screen, and then you paste it somewhere. I'm not big on PC, exactly how to do it for the different versions, so just Google, "how to take a screenshot." You're allowed to take a photo with your phone, either way, do that and then upload it to either, the projects or assignments, it depends on the website you're on, you'll have a look, there'll be a way to kind of submit it, either as an assignment or a discussion, or a project. 

Once you've done that, I will see you in the next video. Is that big homework? I don't know, it doesn't take too long, but it's good, we're going to practice our tools, our techniques, and we're going to get better together, but we need our wireframe. All right, I'll see you in the next video.

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