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:40
SECTION: 27
Thumbnail update
4:10
SECTION: 28
Exporting
34:21
SECTION: 29
What next
15: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 08 - Text
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:40
SECTION: 27
Thumbnail update
4:10
SECTION: 28
Exporting
34:21
SECTION: 29
What next
15: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
Hi everyone, it is class project time. We're going to kind of wrap up a lot of the text stuff we've been doing, and push your design that you're working on, the one that you got the brief earlier on. It's got your own name, your own object, and you're going to work on that one.
So create a logo, it can be simple, just do something, like all I did for this course was, like stack different weighted fonts on top of each other, or something like that where it's just kind of separate weights. If you are keen, you can spend a lot longer on your logo, up to you, but I'm not expecting anything fancy.
On the Home page I want you to add your marketing message and placeholder body copy, and then kind of work through, finding a font. So we kind of did it in this class, so go off, look at Google Fonts, Adobe Fonts, whatever you want, find some good font pairings, and I want you to have, like this big marketing message, and this body copy.
The marketing message, come up with, by yourself, mine is super cheese, look at that, "The music of our people," so you, come up with your own one. If your, I don't know, if your product ends up being handbags, I don't know, you could borrow from some other company as well, we're just practicing here.
So something actually in here, style it, get it nice, make it one of your headings, and in here I want you to install the plugin for content real, just to practice installing a plugin, and throw in some body copy, and kind of style it. I put mine on some background colors, we're going to probably throw an image in the background later on, but yeah.
Once you've done that, and you kind of got a sense of the fonts you want to use, I want you to build that styles, those text styles. I've moved mine to here, so this thing, you don't need an alternative one, just the first one. So create these, you can pick any fonts you like, turn them into the styles, like here, and what I want you to do is grab these, plus your color palettes, remember, they used to be over here, on mobile, just copy and paste them, move them to their own page.
So you're going to learn, well, you know how to make a new page now. Create a page, create a style guide, dump both of these in there. I tied them up in their own little frames, oh, fancy, otherwise you end up with stuff like this, where is it? This, if you don't end up kind of moving, mood board to mood boards, and styles to styles, and man, there's so much junk, so let's do as I say, but not as I do.
To create the styles, move them to their own page, and this one here is an interesting one, this is our research project, so if you're an experienced designer, and you're already kind of like, you know, you're just learning Figma, you can skip the research part, and just build some cards.
So UI cards is a term you need to know, and it's, I don't know, I can't go through all design principles in this one, so if you are new, go research, "What is a UI card?" I've given you some examples, of the kinds of ones I want you to build in this. This is what I've done, it is not fantastic, but this is my little card, the short version is, a card is like a reusable unit. I could have 100 of these, it's a nice, easy, reusable, these are going to be images.
So I want you to make an image card, I've done this weird circle on the side with a text over here, I know it's going to come back to bite me, when somebody wants more text, but hey, it's a course, I get away with some things here. So go and research, what is a UI card, and just have a look through the first few articles. Doesn't have to be long, spend 10 minutes, read about them, get your skills up, know what a card is. I've given you some examples of the kinds of ones that I think would be appropriate for this.
You can use whatever you want, under your 'Exercise Files', under 'UI Card Examples', and they're just ones that use images and text, that's what I was kind of looking for. See these things here, there's a card, it's got, this one's quite an in-depth one, right? There's a heading and body copy, kind of like what we've got in an image, very different from the card that I'm trying to make here. So have a look, sizes, ways they're laying it about, there's a few examples in there, go find your own, Google images or Dribbble, and look at "card," or "ui card design" would be the easiest term to use.
What then? Now we're going to start, up until now we've been doing stuff, and kind of just keeping it to yourselves, or uploading it to the assignments, what I'd like to do is share some of this stuff for feedback now from the group. So we've got a friendly group on Instagram, Twitter, Facebook group and LinkedIn, whatever your home base is, whatever you like the most, take a screenshot of two things, take a screenshot of this, these two bits, and your style guide.
So upload them to the assignments part as well, in the class projects, but also take screenshots and upload both of those, just so I can see what you've done. You can ask for feedback, I'm on Facebook, I'm on all the places as well, I get a little bit overwhelmed, so I've got help from teaching assistants, creative friends of mine, that help out and kind of review and give feedback, and it might just be like, "Hey, good work," that might be what you're looking for, or if you're like, "Hey, I don't know what I'm doing, what am I doing wrong?," just let us know in the comments, when you do post stuff, we're a friendly bunch, go check them out.
All right, that is it, I will see you in the next video, a little bit of work there, not too much, and again, we're not really looking for design, like if you, if you hate your colors and you hate your fonts, that's okay, this is not what this is about, this is a software course, let's get the skills up, let's get practicing, and don't worry if you're not super proud of where you're at just yet, be proud that you started. All right, next video.
- Powered by Marvin
- Terms of use
- Privacy policy
-
- © Bring your Own Laptop Ltd 2024