Figma UI UX Design Essentials

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 

Alright - it's time to upgrade yourself & go from Figma Zero to Figma Hero.

• Introduction to Figma Essentials training course
• Getting started with Figma training
• What is Figma for & does it do the coding?
• Whats the difference between UI and UX in Figma
• What we are making in this Figma course
• Class project 01- Create your own brief
• What is Lo Fi Wireframe vs High Fidelity in Figma
• Creating our design file & introducing frames in Figma
• The basics of type & fonts in Figma
• Rectangles, Circles Buttons & Rounded corners in Figma
• How to use color in Figma
• Strokes plus updating color defaults in Figma
• Object editing and how to escape in Figma
• Scale vs Selection Tool in Figma
• Frames vs Groups in Figma
• Class project 02- Wireframe
• Where to get Free icons for Figma
• Matching the stroke of our icons
• How to use Plugins in Figma for icons
• Class project 03 - Icons
• How to use Pages in Figma
• How to prototype in Figma
• Prototype animation and easing in Figma
• Testing on your phone with Figma Mirror
• Class project 04 - Testing on your phone
• What is Smart Animation & delays in Figma
• Class project 05 - My first animation
• Sharing & Commenting on Figma file with Stakeholders
• Share editing with other UX designers in Figma
• How I get inspiration for UX projects
• How to create a mood board in Figma
• Class Project 06 - Moodboard
• How to work with Columns & Grid in Figma
• Tips, Tricks, Preferences and Weirdness in Figma
• Color Inspiration & the eyedropper in Figma
• How to create a color palette in Figma
• How to make gradients in Figma
• How to create & use Color Styles in Figma
• Class Project - Colors & Columns
• Font on Desktop vs Browser Figma
• What fonts can I use plus font pairing in Figma
• What common font sizes should I choose in web design
• How to make Character Styles in Figma
• Lorem ipsum & Placeholder text in Figma
• Useful things to know about text in Figma
• How fix missing fonts in Figma
• Class project 08 - Text
• Drawing tips and tricks in Figma
• Squircle buttons with ios rounded courses in Figma
• Boolean Union Subtract Intersect Exclude Pathfinder in Figma
• What is the difference Union vs Flatten Figma
• Class Project 09 - Making stuff
• Smart Selection & Tidy up in Figma
• Do I need to know Illustrator with Figma
• Tips & tricks for using images in Figma
• Masking Cropping images in Figma
• Free image & plugin for Figma
• Do you need Photoshop for UX design in Figma
• Class Project - Images
• What is Autolayout & expanding buttons in Figma
• Class project 11 - Buttons
• Auto Layout for spacing
• How to use constraints in figma
• Combining Nested frames Auto Layout & Constraints in Figma
• Adding Text Box Autoheight to Autolayout in Figma
• Class Project 12 - Responsive Design
• Nice drop shadow & Inner drop shadow effects in Figma
• Blur Layer & Background Blur & Image Blur in Figma
• How to make Neumorphic ui buttons in Figma
• Class project - Effects
• How to save locally & save history in Figma
• What are components in Figma
• Updating & Changing & Resetting your components
• You can’t kill main components in Figma
• Where should you keep your main components in Figma
• Intro to the forward slash / naming convention in Figma
• Class Project - Components
• How to make component variants in Figma
• Another way to make variants in Figma
• How to make a Multi Dimensional Variant in Figma
• Class Project 15 - Variants
• How to make a form using variants in Figma
• Class Project 16 - Form
• Putting it all together in an desktop example
• How to add a popup overlay modal in Figma
• How to make & prototype a tool tip in Figma
• What are Flows in Figma
• Slide in mobile nav menu overlay in Figma
• Class project - Prototyping
• How to pin navigation to top in Figma
• How to make horizontal scrolling swipe in Figma
• Automatic scroll down the page to anchor point in Figma
• What are Teams vs Projects vs Files in Figma
• How do you use team libraries in Figma
• The difference between animation & micro interactions
• Animation with custom easing in Figma
• Class Project 18 - My Second Animation
• How to make animated transitions in Figma
• Class Project - Page transition
• Micro interactions using interactive components in Figma
• Micro interaction toggle switch in Figma
• Micro Interaction burger menu turned into cross in Figma
• Class Project 20 - Micro interaction
• How to change the thumbnail for Figma Files
• How to export Images out of Figma
• How to share you document with clients & stakeholders
• Talking to your developer early in the figma design process
• Sharing Figma with developers & engineers handoff
• What are the next level handoffs aka design systems
• Class Project 21 - Finish your design
• What next