Figma Ui Ux Design Essentials
Last updated 8/2022
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
Language: English | Size: 5.58 GB | Duration: 11h 33m
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.
Screenshots
Homepage
*
=========================================================
*
*
*
*
*
*
=========================================================