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 03 - Icons

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

Bob Hamilton

@bobHamilton

Checkout frame!
0 0
Avatar

Jonas Jaukkuri

@jonasJaukkuri
0 0
Avatar

DAVID LYTHBERG ANNOR

@dAVIDLYTHBERGANNOR

Project 3 done and dusted
0 0
Avatar

Nick Stokes

@nickStokes
0 0
Avatar

Ghaydaa ss

@ghaydaaSaifo
0 0
Avatar

Scott Rook

@ScottRook
0 0
Avatar

Klára Pálossy

@kláraPálossy
0 0
Avatar

Ahmar Faraz Shaik

@ahmarFarazShaik
0 0
Avatar

Arthur Kloss

@arthurKloss
0 0
Avatar

Niazra Enano

@niazraEnano

Hi, here is my project 03 - Icons
0 0
Avatar

Nourhan Mamdouh

@nourhanMamdouh
0 0
Avatar

Rebecca Crecelius

@RebeccaCrecelius
0 0
Avatar

Mark Cheriyan

@markCheriyan

Class Project 03 - Icons
0 0
Avatar

Sara Peršič

@saraPersic
0 0
Avatar

Esra'a Aqrabawi

@esra'aAqrabawi
0 0
Avatar

Suciu Alexandru

@Suciu

Icons time.
0 0
Avatar

Lorenzo Carboni

@lorenzoCarboni
0 0
Avatar

Ant Browne

@anthonyBrowne
0 0
Avatar

Agnieszka Olearczyk

@agnieszkaOlearczyk
0 0
Avatar

Antonia Meissner

@antoniaMeissner
0 0
Avatar

Martin Peiffer

@martinPeiffer
0 0
Avatar

lusine khazhakyan

@lusinekhazhakyan
0 0
Avatar

Nadia Gouda

@nadiaGouda

Class Project 03 - Icons
0 0
Avatar

Riya Niwalkar

@RiyaNiwalkar
0 0
Avatar

Asma Aziz

@asmaAziz
0 0
Avatar

Dana Wer

@danaWer

my project for icons!
0 0
Avatar

Maryam Bouferdou

@maryambouferdou

icons
0 0
Avatar

Carole Schmutz

@cocopastell
0 0
Avatar

Dima Dimitrov

@dimaDimitrov
0 0
Avatar

Kim Trow

@Ktb

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, not homework. We are going to be doing something around icons, so if you haven't already, I want you to go and make sure that you add the three icons along the top, that we've kind of done in the class, and then on your own, I want you to add this section down the bottom here, on the Confirmation page, just a, like a prompt, to ask people to share their purchase, and when they click on this it'll pre-fill out their Facebook page, or their Twitter tweet about, "Hey, I just bought these great headphones, check them out here, at this link." 

When you are doing this you're going to kind of start dabbling with our persona, so in my case, Sarah here, she's in her late 20s, so I feel like I can be a little bit, not as explicit with my language , because if somebody else maybe is a little less technologically savvy, born in a different decade, they might need a bit more explicit, "Click this button, to upload to your social media," and to share with your friends your, what you have purchased, it might have to be a bit more deliberate. 

So my persona, she's not like 20, so she, she gets the gag or the joke, or the inference without being too explicit, also she-- these are the social media icons that I feel, I'm not going to put them all there, don't you hate sites that just have like, here's the 40 different social media platforms that you might share on it. I've excluded a bunch because I feel like her age group, what else, like, she's working for herself, so probably has a LinkedIn profile, and it's not going to be corporate. So she's probably going to be okay sharing her new headphones purchase, and everyone's using Facebook still. 

So, like use these sorts of what should I have here, go back to persona, decide what's going to be in there. It might be wrong, like I might have got these totally wrong, and my client's going to come back and go, "Why isn't there Reddit there," or some other thing that's new, and TikTok-ey thing, but this is something that I feel like it's worth testing. We might add more to these later on, and hopefully in our user testing, there will be some feedback, like, "Hey, where is that thing" - that I don't even know about - "why isn't that there?" 

All right, so that is it, so the top Navs, I want you to find icons from, I don't want you to draw them, I want you to find existing ones from either a free site, just to practice the svg stuff and, or plug-in , install your plug-in, get it working so you can get stuff out. There's a little bit of text there that goes on there, choose the appropriate icons, we've talked about that, add them to the Confirmation page, take a screenshot, and upload it to the Assignments, Projects, Comments, and that's an example. 

Actually, before you go, if you are using plugins, which I think you should, get it installed, have a go with it, it doesn't have to be Iconify, use something else. Sometimes when you are dragging things from plugins, let's say, it depends on the size of them, like let's say I drag in this Facebook one, sometimes you're like giant F, and it just makes everything really tough, in terms of your layers when you're new, so I'm going to undo that. 

Often it can be - undo - it's just easier just to find, an empty part of your artboard and just drag it off there, because then they're on their own, in their own little kind of frame, and I can drag off a bunch of these, where are they, and what else we got? I can drag up a bunch of these, and I can scale them down and get them appropriate, and then bring them in rather than trying to push them around in there, and they ended up inside of groups or frames, that they shouldn't be, that's my advice. When you're finished with the plugin, close it down, you guys are gone, and yeah, 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