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:05:38
SECTION: 27
Thumbnail update
4:10
SECTION: 28
Exporting
35:21
SECTION: 29
What next
14:53
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!
Class Project 07 - Colors & Columns
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:05:38
SECTION: 27
Thumbnail update
4:10
SECTION: 28
Exporting
35:21
SECTION: 29
What next
14:53
Questions
Student class projects
Course info
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.
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
Founder of Bring Your Own Laptop & Chief Instructor
instructorI 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
Transcript
All right, class project time, we're going to combine two of them here, mainly because columns was boring, and I didn't want to set it as its own class project. So I've tied it in with colors, we're going to do both of these, the two Cs, the boring C, boring columns, and exciting colors.
Columns is, I want you to create your-- you probably haven't yet, is we've got our Lo-Fi wireframes, create the two pages for our Hi-Fi for mobile and desktop, and in those I want you to add the columns. So remember, 12 for desktop, 6 for mobile, and each of those new pages needs to have four frames.
So this is what I mean, we'll create, you've only got this page at the moment, and this page, create these two, name them, and make sure that there are, 'Shift 1', see everything on your page, there's these four frames, 1, 2, 3, 4, same with desktop, make sure there are columns. More exciting? Pick colors, don't be-- this can be a bit freaky, depending on how experienced you are as a designer. Don't worry about it, we can adjust these later on, they can be terrible, we will start sharing stuff with the group a little bit later on, and you'll be able to get advice from people, which would be great, like, I'm never a good color picker, like, I don't know, that looks all right.
So pick your own colors, do the same sort of thing. So draw like a little grid, like this, pick out primary, secondary, and accent color, plus all the grays, and where do you get these colors from? You can get them from your Mood Board, you might find some colors in there that you like, you want to appropriate or steal, or you might go to one of those color inspiration sites that we looked at before, and kind of get your colors from there.
Do the grid and then create styles, because what I want you to do when you're finished, is to hand up-- is to send me a screenshot, of all the named files here, or the named colors, just to show that you can do it, and you've done it. Don't worry about sending me a screenshot of the columns, boring old columns, I'll trust that you've done them, so that's the class project.
One thing I want to show you while we're in here, is, I kind of made a mistake earlier in the course, well, not a mistake, just, I want to show you something. So the columns here, on my mobile, is, I didn't put any padding on the outside, I like having padding on the outside, you don't have to have it, but let's do this one first.
So I'm going to say, let's have a little looky-look at the columns, and I'm going to click on them here, is we've done a gutter of 16 in between the columns, but I actually want a margin of 16 as well from either side, so that when I am drawing things like this, we're actually kind of like lining up, and there is, it depends on your design, if you don't want to go straight to the edges here, you cannot have this margin, but I need it, I like it.
So I'm going to copy and paste it across all of them. Who remembers how, it's a weird thing, right? Click on the name, go over here, click in this random area, not there, not there, there, copy it, I'm going to say, you, I'm holding 'Shift', clicking you, and you are going to go and just paste, oh, now I've got two of them, didn't realize that happened. So now I've got two of them, on each of them, great, Dan. Which one do I delete? Is it the bottom one? It is, there you go.
All right, we learned something, you can place more than one set of grids. I know that when I'm doing horizontal and vertical, later on, when you're a bit more advanced, you might start doing grids, columns, you can do, I want you to do rows, you can start doing rows as well as columns, gets a bit hardcore fancy, there. We've got our columns, so do that, columns on this, columns on desktop, make up some colors, we can change it later on, and because, remember, it's a style, your color style, we can adjust it easily later on. Make some tweaks based on client feedback, and maybe student feedback, when we start sharing it all together.
All right, that is it, class project over, go do it, I will see you in the next video, in a minute.
- Powered by Marvin
- Terms of use
- Privacy policy
-
- © Bring your Own Laptop Ltd 2024