Mô tả

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.

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.

Bạn sẽ học được gì

How to begin working as a UX Designer using Figma.

How to use Figma for Essential UX Design & UI Design

How to make fully interactive prototypes.

How to work with a UX personas.

You will be able to add UX designer to your CV.

Build a UX project from beginning to end.

What the client expects of you as a UX designer.

How to create simple wireframes.

How to implement colours & images properly in your designs.

The dos & don'ts around choosing fonts for web & mobile apps.

How to create your own icons, buttons & other UI components.

Terms such as Components, Constraints & Multi Dimensional Variants.

Free UI kits & plugins for Figma which will speed up our workflow dramatically!

How to build a simple style guide, ready for client handoff.

How to make both simple & advanced micro interactions, page transitions & animations.

Learn to design websites & mobile phone apps.

Work with fonts & colors.

Test on mobile phones.

Export production ready assets.

Create your first UX brief & persona.

Learn professional workflow tricks & shortcuts.

Forum support from me and the rest of the BYOL crew.

All the techniques used by UX professionals

111 videos of detailed Figma & UX & UI Design content.

Yêu cầu

  • You'll need a copy of Figma. A free plan is available on the Figma website.
  • No previous UX Design/UI Design experience is needed.
  • No previous Figma skills are needed.
  • No previous design skills or experience required.

Nội dung khoá học

29 sections

Getting Started

7 lectures
Introduction to Figma Essentials training course
02:53
Getting started with Figma training
02:45
What is Figma for & does it do the coding?
03:46
Whats the difference between UI and UX in Figma
05:22
What we are making in this Figma course
09:18
Class project 01- Create your own brief
04:01
Class project 01- Create your own brief
1 question

Wireframing - Low Fidelity

2 lectures
What is Lo Fi Wireframe vs High Fidelity in Figma
02:34
Creating our design file & introducing frames in Figma
08:29

Type, Color & Icon Introduction

14 lectures
The basics of type & fonts in Figma
10:51
Rectangles Circles Buttons Rounded corners in Figma
06:50
How to use color in Figma
05:45
Strokes plus updating color defaults in Figma
09:28
Object editing and how to escape in Figma
01:47
Scale vs Selection Tool in Figma
02:39
Frames vs Groups in Figma
09:24
Class project 02- Wireframe
03:00
Class project 02- Wireframe
1 question
Where to get Free icons for Figma
09:31
Matching the stroke of our icons
05:16
How to use Plugins in Figma for icons
05:06
Class project 03 - Icons
03:48
Class project 03 - Icons
1 question

Pages

1 lectures
How to use Pages in Figma
08:31

Prototyping - Level 1

5 lectures
How to prototype in Figma
10:46
Prototype animation and easing in Figma
10:53
Testing on your phone with Figma Mirror
05:40
Class project 04 - Testing on your phone
03:51
Class project 04 - Testing on your phone
1 question

Animation Level 1

3 lectures
What is Smart Animation & delays in Figma
08:44
Class project 05 - My first animation
02:01
Class project 05 - My first animation
1 question

Commenting

2 lectures
Sharing & Commenting on Figma file with Stakeholders
07:10
Share editing with other UX designers in Figma
06:58

Moodboard - High Fidelity

4 lectures
How I get inspiration for UX projects
06:39
How to create a mood board in Figma
05:33
Class Project 06 - Moodboard
01:26
Class Project 06 - Moodboard
1 question

Columns

1 lectures
How to work with Columns & Grid in Figma
13:54

Tips & Tricks

1 lectures
Tips Tricks Preferences and Weirdness in Figma
07:52

Colors

6 lectures
Color Inspiration & the eyedropper in Figma
06:34
How to create a color palette in Figma
09:02
How to make gradients in Figma
07:46
How to create & use Color Styles in Figma
08:01
Class Project 07 - Colors & Columns
04:00
Class Project 07 - Colors & Columns
1 question

Text & Fonts Advanced

9 lectures
Font on Desktop vs Browser Figma
01:30
What fonts can I use plus font pairing in Figma
06:01
What common font sizes should I choose in web design
11:30
How to make Character Styles in Figma
06:36
Lorem ipsum & Placeholder text in Figma
04:28
Useful things to know about text in Figma
09:35
How fix missing fonts in Figma
02:42
Class project 08 - Text
05:19
Class project 08 - Text
1 question

Drawing

7 lectures
Drawing tips and tricks in Figma
09:38
Squircle buttons with ios rounded courses in Figma
02:48
Boolean Union Subtract Intersect Exclude Pathfinder in Figma
07:25
What is the difference Union vs Flatten Figma
03:36
Class Project 09 - Making stuff
03:29
Class Project 09 - Making stuff
1 question
Smart Selection & Tidy up in Figma
08:40

Working with Illustrator

1 lectures
Do I need to know Illustrator with Figma
04:15

Images

3 lectures
Tips & tricks for using images in Figma
06:11
Masking Cropping images in Figma
09:12
Free image & plugin for Figma
02:31

Working with Photoshop

3 lectures
Do you need Photoshop for UX Design in Figma?
10:40
Class Project 10 - Images
01:17
Class Project 10 - Images
1 question

Autolayout's & Constraints

10 lectures
Autolayout & Constraints
07:59
Class project 11 - Buttons
01:15
Class project 11 - Buttons
1 question
Auto Layout for spacing
05:47
How to use constraints in figma
08:22
Combining Nested frames Auto Layout & Constraints in Figma
14:29
Adding Text Box Autoheight to Autolayout in Figma
08:27
Class Project 12 - Responsive Design
02:19
Class Project 12 - Responsive Design
1 question
Nice drop shadow & Inner drop shadow effects in Figma
05:56

Effects

4 lectures
Blur Layer & Background Blur & Image Blur in Figma
05:57
How to make Neumorphic ui buttons in Figma
07:37
Class project 13 - Effects
01:53
Class project 13 - Effects
1 question

Saving & History

1 lectures
How to save locally & save history in Figma
05:42

Components & Instances

7 lectures
What are components in Figma
06:19
Updating & Changing & Resetting your components
07:47
You can’t kill main components in Figma
07:22
Where should you keep your main components in Figma
05:02
Intro to the forward slash / naming convention in Figma
08:55
Class Project 14 - Components
00:44
Class Project 14 - Components
1 question

Variants

5 lectures
How to make component variants in Figma
06:41
Another way to make variants in Figma
06:14
How to make a Multi Dimensional Variant in Figma
11:13
Class Project 15 - Variants
01:41
Class Project 15 - Variants
1 question

Making a form

4 lectures
How to make a form using variants in Figma
16:48
Class Project 16 - Form
01:27
Class Project 16 - Form
1 question
Putting it all together in an desktop example
19:44

Prototyping - Level 2

9 lectures
How to add a popup overlay modal in Figma
03:03
How to make & prototype a tool tip in Figma
07:26
What are Flows in Figma
05:39
Slide in mobile nav menu overlay in Figma
03:55
Class project 17 - Prototyping
01:10
Class project 17 - Prototyping
1 question
How to pin navigation to top in Figma
11:09
How to make horizontal scrolling swipe in Figma
06:36
Automatic scroll down the page to anchor point in Figma
04:50

Teams & Projects

1 lectures
What are Teams vs Projects vs Files in Figma
05:18

Libraries

1 lectures
How do you use team libraries in Figma
11:03

Animation & Micro Interactions

12 lectures
The difference between animation & micro interactions
02:55
Animation with custom easing in Figma
25:36
Class Project 18 - My Second Animation
01:54
Class Project 18 - My Second Animation
1 question
How to make animated transitions in Figma
17:23
Class Project 19 - Page transition
01:31
Class Project 19 - Page transition
1 question
Micro interactions using interactive components in Figma
05:54
Micro interaction toggle switch in Figma
04:23
Micro Interaction burger menu turned into cross in Figma
04:23
Class Project 20 - Micro interaction
01:35
Class Project 20 - Micro interaction
1 question

Thumbnail update

1 lectures
How to change the thumbnail for Figma Files
04:10

Exporting

7 lectures
How to export Images out of Figma
07:40
How to share you document with clients & stakeholders
07:09
Talking to your developer early in the figma design process
03:55
Sharing Figma with developers & engineers handoff
06:07
What are the next level handoffs aka design systems
03:18
Class Project 21 - Finish your design
04:57
Class Project 21 - Finish your design
1 question

What next

1 lectures
What next for you and Figma
06:08

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.