English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 111 lectures (11h 32m) | 5.57 GB
Use Figma to get a job in UI Design, User Interface, User Experience design, UX Design & Web Design
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.
What you’ll learn
- 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.
Table of Contents
Getting Started
1 Introduction to Figma Essentials training course
2 Getting started with Figma training
3 What is Figma for & does it do the coding
4 Whats the difference between UI and UX in Figma
5 What we are making in this Figma course
6 Class project 01 Create your own brief
Wireframing Low Fidelity
7 What is Lo Fi Wireframe vs High Fidelity in Figma
8 Creating our design file & introducing frames in Figma
Type Color & Icon Introduction
9 The basics of type & fonts in Figma
10 Rectangles Circles Buttons Rounded corners in Figma
11 How to use color in Figma
12 Strokes plus updating color defaults in Figma
13 Object editing and how to escape in Figma
14 Scale vs Selection Tool in Figma
15 Frames vs Groups in Figma
16 Class project 02 Wireframe
17 Where to get Free icons for Figma
18 Matching the stroke of our icons
19 How to use Plugins in Figma for icons
20 Class project 03 Icons
Pages
21 How to use Pages in Figma
Prototyping Level 1
22 How to prototype in Figma
23 Prototype animation and easing in Figma
24 Testing on your phone with Figma Mirror
25 Class project 04 Testing on your phone
Animation Level 1
26 What is Smart Animation & delays in Figma
27 Class project 05 My first animation
Commenting
28 Sharing & Commenting on Figma file with Stakeholders
29 Share editing with other UX designers in Figma
Moodboard High Fidelity
30 How I get inspiration for UX projects
31 How to create a mood board in Figma
32 Class Project 06 Moodboard
Columns
33 How to work with Columns & Grid in Figma
Tips & Tricks
34 Tips Tricks Preferences and Weirdness in Figma
Colors
35 Color Inspiration & the eyedropper in Figma
36 How to create a color palette in Figma
37 How to make gradients in Figma
38 How to create & use Color Styles in Figma
39 Class Project 07 Colors & Columns
Text & Fonts Advanced
40 Font on Desktop vs Browser Figma
41 What fonts can I use plus font pairing in Figma
42 What common font sizes should I choose in web design
43 How to make Character Styles in Figma
44 Lorem ipsum & Placeholder text in Figma
45 Useful things to know about text in Figma
46 How fix missing fonts in Figma
47 Class project 08 Text
Drawing
48 Drawing tips and tricks in Figma
49 Squircle buttons with ios rounded courses in Figma
50 Boolean Union Subtract Intersect Exclude Pathfinder in Figma
51 What is the difference Union vs Flatten Figma
52 Class Project 09 Making stuff
53 Smart Selection & Tidy up in Figma
Working with Illustrator
54 Do I need to know Illustrator with Figma
Images
55 Tips & tricks for using images in Figma
56 Masking Cropping images in Figma
57 Free image & plugin for Figma
58 Working with Photoshop
59 Class Project 10 Images
60 Autolayout & Constraints
61 Class project 11 Buttons
62 Auto Layout for spacing
63 How to use constraints in figma
64 Combining Nested frames Auto Layout & Constraints in Figma
65 Adding Text Box Autoheight to Autolayout in Figma
66 Class Project 12 Responsive Design
67 Nice drop shadow & Inner drop shadow effects in Figma
Effects
68 Blur Layer & Background Blur & Image Blur in Figma
69 How to make Neumorphic ui buttons in Figma
70 Class project 13 Effects
Saving & History
71 How to save locally & save history in Figma
Components & Instances
72 What are components in Figma
73 Updating & Changing & Resetting your components
74 You can’t kill main components in Figma
75 Where should you keep your main components in Figma
76 Intro to the forward slash naming convention in Figma
77 Class Project 14 Components
Variants & Variables
78 How to make a variable component in Figma
79 Another way to make variables in Figma
80 How to make a Multi Dimensional Variant in Figma
81 Class Project 15 Variants
Making a form
82 How to make a form using variants in Figma
83 Class Project 16 Form
84 Putting it all together in an desktop example
Prototyping Level 2
85 How to add a popup overlay modal in Figma
86 How to make & prototype a tool tip in Figma
87 What are Flows in Figma
88 Slide in mobile nav menu overlay in Figma
89 Class project 17 Prototyping
90 How to pin navigation to top in Figma
91 How to make horizontal scrolling swipe in Figma
92 Automatic scroll down the page to anchor point in Figma
Teams & Projects
93 What are Teams vs Projects vs Files in Figma
Libraries
94 How do you use team libraries in Figma
Animation & Micro Interactions
95 Micro interactions using interactive components in Figma
96 Micro interaction toggle switch in Figma
97 Micro Interaction burger menu turned into cross in Figma
98 Class Project 20 Micro interaction
99 The difference between animation & micro interactions
100 Animation with custom easing in Figma
101 Class Project 18 My Second Animation
102 How to make animated transitions in Figma
103 Class Project 19 Page transition
Thumbnail update
104 How to change the thumbnail for Figma Files
Exporting
105 How to export Images out of Figma
106 How to share you document with clients & stakeholders
107 Talking to your developer early in the figma design process
108 Sharing Figma with developers & engineers handoff
109 What are the next level handoffs aka design systems
110 Class Project 21 Finish your design
What next
111 What next for you and Figma
Resolve the captcha to access the links!