This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.
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.
Wireframing - Low Fidelity
-
1Introduction to Figma Essentials training course
-
2Getting started with Figma training
-
3What is Figma for & does it do the coding?
-
4Whats the difference between UI and UX in Figma
-
5What we are making in this Figma course
-
6Class project 01- Create your own brief
-
7Class project 01- Create your own brief
Type, Color & Icon Introduction
Pages
-
10The basics of type & fonts in Figma
-
11Rectangles Circles Buttons Rounded corners in Figma
-
12How to use color in Figma
-
13Strokes plus updating color defaults in Figma
-
14Object editing and how to escape in Figma
-
15Scale vs Selection Tool in Figma
-
16Frames vs Groups in Figma
-
17Class project 02- Wireframe
-
18Class project 02- Wireframe
-
19Where to get Free icons for Figma
-
20Matching the stroke of our icons
-
21How to use Plugins in Figma for icons
-
22Class project 03 - Icons
-
23Class project 03 - Icons
Prototyping - Level 1
Animation Level 1
Commenting
Moodboard - High Fidelity
Columns
Tips & Tricks
Text & Fonts Advanced
Drawing
-
47Font on Desktop vs Browser Figma
-
48What fonts can I use plus font pairing in Figma
-
49What common font sizes should I choose in web design
-
50How to make Character Styles in Figma
-
51Lorem ipsum & Placeholder text in Figma
-
52Useful things to know about text in Figma
-
53How fix missing fonts in Figma
-
54Class project 08 - Text
-
55Class project 08 - Text
Working with Illustrator
-
56Drawing tips and tricks in Figma
-
57Squircle buttons with ios rounded courses in Figma
-
58Boolean Union Subtract Intersect Exclude Pathfinder in Figma
-
59What is the difference Union vs Flatten Figma
-
60Class Project 09 - Making stuff
-
61Class Project 09 - Making stuff
-
62Smart Selection & Tidy up in Figma
Working with Photoshop
Autolayout's & Constraints
Effects
-
70Autolayout & Constraints
-
71Class project 11 - Buttons
-
72Class project 11 - Buttons
-
73Auto Layout for spacing
-
74How to use constraints in figma
-
75Combining Nested frames Auto Layout & Constraints in Figma
-
76Adding Text Box Autoheight to Autolayout in Figma
-
77Class Project 12 - Responsive Design
-
78Class Project 12 - Responsive Design
-
79Nice drop shadow & Inner drop shadow effects in Figma