Figma Ui Ux Design Essentials

Use Figma to get a job in UI Design, User Interface, User Experience design, UX Design & Web Design

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.
Requirements
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.
Description
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 & animationsBefore the end of this course you will have made fully interactive prototypesYou 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.

Overview

Section 1: Getting Started

Lecture 1 Introduction to Figma Essentials training course

Lecture 2 Getting started with Figma training

Lecture 3 What is Figma for & does it do the coding?

Lecture 4 Whats the difference between UI and UX in Figma

Lecture 5 What we are making in this Figma course

Lecture 6 Class project 01- Create your own brief

Section 2: Wireframing - Low Fidelity

Lecture 7 What is Lo Fi Wireframe vs High Fidelity in Figma

Lecture 8 Creating our design file & introducing frames in Figma

Section 3: Type, Color & Icon Introduction

Lecture 9 The basics of type & fonts in Figma

Lecture 10 Rectangles Circles Buttons Rounded corners in Figma

Lecture 11 How to use color in Figma

Lecture 12 Strokes plus updating color defaults in Figma

Lecture 13 Object editing and how to escape in Figma

Lecture 14 Scale vs Selection Tool in Figma

Lecture 15 Frames vs Groups in Figma

Lecture 16 Class project 02- Wireframe

Lecture 17 Where to get Free icons for Figma

Lecture 18 Matching the stroke of our icons

Lecture 19 How to use Plugins in Figma for icons

Lecture 20 Class project 03 - Icons

Section 4: Pages

Lecture 21 How to use Pages in Figma

Section 5: Prototyping - Level 1

Lecture 22 How to prototype in Figma

Lecture 23 Prototype animation and easing in Figma

Lecture 24 Testing on your phone with Figma Mirror

Lecture 25 Class project 04 - Testing on your phone

Section 6: Animation Level 1

Lecture 26 What is Smart Animation & delays in Figma

Lecture 27 Class project 05 - My first animation

Section 7: Commenting

Lecture 28 Sharing & Commenting on Figma file with Stakeholders

Lecture 29 Share editing with other UX designers in Figma

Section 8: Moodboard - High Fidelity

Lecture 30 How I get inspiration for UX projects

Lecture 31 How to create a mood board in Figma

Lecture 32 Class Project 06 - Moodboard

Section 9: Columns

Lecture 33 How to work with Columns & Grid in Figma

Section 10: Tips & Tricks

Lecture 34 Tips Tricks Preferences and Weirdness in Figma

Section 11: Colors

Lecture 35 Color Inspiration & the eyedropper in Figma

Lecture 36 How to create a color palette in Figma

Lecture 37 How to make gradients in Figma

Lecture 38 How to create & use Color Styles in Figma

Lecture 39 Class Project 07 - Colors & Columns

Section 12: Text & Fonts Advanced

Lecture 40 Font on Desktop vs Browser Figma

Lecture 41 What fonts can I use plus font pairing in Figma

Lecture 42 What common font sizes should I choose in web design

Lecture 43 How to make Character Styles in Figma

Lecture 44 Lorem ipsum & Placeholder text in Figma

Lecture 45 Useful things to know about text in Figma

Lecture 46 How fix missing fonts in Figma

Lecture 47 Class project 08 - Text

Section 13: Drawing

Lecture 48 Drawing tips and tricks in Figma

Lecture 49 Squircle buttons with ios rounded courses in Figma

Lecture 50 Boolean Union Subtract Intersect Exclude Pathfinder in Figma

Lecture 51 What is the difference Union vs Flatten Figma

Lecture 52 Class Project 09 - Making stuff

Lecture 53 Smart Selection & Tidy up in Figma

Section 14: Working with Illustrator

Lecture 54 Do I need to know Illustrator with Figma

Section 15: Images

Lecture 55 Tips & tricks for using images in Figma

Lecture 56 Masking Cropping images in Figma

Lecture 57 Free image & plugin for Figma

Lecture 58 Working with Photoshop

Lecture 59 Class Project 10 - Images

Lecture 60 Autolayout & Constraints

Lecture 61 Class project 11 - Buttons

Lecture 62 Auto Layout for spacing

Lecture 63 How to use constraints in figma

Lecture 64 Combining Nested frames Auto Layout & Constraints in Figma

Lecture 65 Adding Text Box Autoheight to Autolayout in Figma

Lecture 66 Class Project 12 - Responsive Design

Lecture 67 Nice drop shadow & Inner drop shadow effects in Figma

Section 16: Effects

Lecture 68 Blur Layer & Background Blur & Image Blur in Figma

Lecture 69 How to make Neumorphic ui buttons in Figma

Lecture 70 Class project 13 - Effects

Section 17: Saving & History

Lecture 71 How to save locally & save history in Figma

Section 18: Components & Instances

Lecture 72 What are components in Figma

Lecture 73 Updating & Changing & Resetting your components

Lecture 74 You can’t kill main components in Figma

Lecture 75 Where should you keep your main components in Figma

Lecture 76 Intro to the forward slash / naming convention in Figma

Lecture 77 Class Project 14 - Components

Section 19: Variants & Variables

Lecture 78 How to make a variable component in Figma

Lecture 79 Another way to make variables in Figma

Lecture 80 How to make a Multi Dimensional Variant in Figma

Lecture 81 Class Project 15 - Variants

Section 20: Making a form

Lecture 82 How to make a form using variants in Figma

Lecture 83 Class Project 16 - Form

Lecture 84 Putting it all together in an desktop example

Section 21: Prototyping - Level 2

Lecture 85 How to add a popup overlay modal in Figma

Lecture 86 How to make & prototype a tool tip in Figma

Lecture 87 What are Flows in Figma

Lecture 88 Slide in mobile nav menu overlay in Figma

Lecture 89 Class project 17 - Prototyping

Lecture 90 How to pin navigation to top in Figma

Lecture 91 How to make horizontal scrolling swipe in Figma

Lecture 92 Automatic scroll down the page to anchor point in Figma

Section 22: Teams & Projects

Lecture 93 What are Teams vs Projects vs Files in Figma

Section 23: Libraries

Lecture 94 How do you use team libraries in Figma

Section 24: Animation & Micro Interactions

Lecture 95 The difference between animation & micro interactions

Lecture 96 Animation with custom easing in Figma

Lecture 97 Class Project 18 - My Second Animation

Lecture 98 How to make animated transitions in Figma

Lecture 99 Class Project 19 - Page transition

Lecture 100 Micro interactions using interactive components in Figma

Lecture 101 Micro interaction toggle switch in Figma

Lecture 102 Micro Interaction burger menu turned into cross in Figma

Lecture 103 Class Project 20 - Micro interaction

Section 25: Thumbnail update

Lecture 104 How to change the thumbnail for Figma Files

Section 26: Exporting

Lecture 105 How to export Images out of Figma

Lecture 106 How to share you document with clients & stakeholders

Lecture 107 Talking to your developer early in the figma design process

Lecture 108 Sharing Figma with developers & engineers handoff

Lecture 109 What are the next level handoffs aka design systems

Lecture 110 Class Project 21 - Finish your design

Section 27: What next

Lecture 111 What next for you and Figma

Anyone who wants to start using Figma in their career & get paid for their user experience design skills.,This course is for beginners, newbies & amateurs in the field of UX design.,Aimed at people new to the world of design & user experience.,For anyone that needs to add ‘UX Design’ to their portfolio.,Anyone who wants to learn the essentials of UI & UX Design.