Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Skillshare

Figma UI UX Design Essentials

via Skillshare

Write review

Overview

Build a Learning Habit
Download Class Central's free printable study calendar
Download for Free

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.

Syllabus

  • Introduction to Figma Essentials training course
  • Getting started with Figma Training
  • What is Figma for?
  • What’s 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 and 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
  • 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
  • How To Add the iOS Status Bar 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 a Figma file with Stakeholders
  • What are Teams Projects drafts in Figma
  • How I Get Inspiration for UX Projects
  • How To Create a Moodboard in Figma
  • Class Project 06 - Moodboard
  • How To Work With Columns & Grids in Figma
  • Tips, Tricks & Preferences 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 07 - Colors & Columns
  • Missing Fonts in the Browser of 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
  • Using AI To Create Text in Figma
  • Useful Things To Know About Text in Figma
  • Class Project 08 - Text
  • Text on a Path Curved Text in Figma
  • Text Around a Circle Badge in Figma
  • How To Use the Pencil & Brush Tools in Figma
  • How To Use the Pen Tool in Figma
  • Class Project 09 - Pen Tool
  • How To Use the Shapebuilder in Figma
  • Squircle Buttons With iOS Rounded Courses in Figma
  • Class Project 10 - Icons
  • Smart Selection & Tidy Up in Figma
  • Tips & Tricks for Using Images in Figma
  • Masking & Cropping Images in Figma
  • Free Images & Plugins for Figma
  • Making AI Images in Figma
  • Class Project 11 - Images
  • What is Autolayout & Expanding Buttons in Figma?
  • Class Project 12 - Buttons
  • Auto Layout for Spacing Navigation in Figma
  • How To Use Constraints in Figma
  • Combining Nested Frames & Auto Layout Constraints in Figma
  • Class Project 13 - Responsive Design
  • Nice Drop Shadow & Inner Drop Shadow Effects in Figma
  • Blur Layer, Background Blur & Image Blur in Figma
  • Class Project 14 - Effects
  • What Are Components & Instances in Figma
  • Where Should You Keep Your Main Components in Figma?
  • Class Project 15 - Components
  • How To Make Component Variants in Figma
  • Another Way To Make Variants in Figma
  • Class Project 16 - Variants
  • 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 17 - Prototyping
  • How To Pin Navigation to the Top in Figma
  • What Are Teams vs Projects vs Files in Figma?
  • Interactive Component Variant for Hover Checkbox in Figma
  • Micro Interaction Toggle Switch in Figma
  • Class Project 18 - Micro interaction
  • How To Change the Thumbnail for Figma Files
  • Quick Overview of Figma Sites
  • How To Export Images out of Figma
  • How To Share Your Document With Clients & Stakeholders
  • Talking to Your Developer Early in the Figma Design Process
  • Dev Mode and Handing Off to a Developer
  • Class Project 19 - Finish Your Design
  • What's Next?

Taught by

Daniel Scott

Reviews

4.5 rating, based on 2 Class Central reviews

4.7 rating at Skillshare based on 362 ratings

Start your review of Figma UI UX Design Essentials

  • I would like to start the review by saying that I had experience with Figma and learnt it from random youtube tutorials here and there so I was not going into the course completely blank so I knew some of the things he was teaching already (but ther…
  • Anonymous
    this course is really great. It has enhanced my portfolio. If you want to start a journey of UI-UX design, this can be your first step. It has lots of interactive projects, also Facebook, and LinkedIn communities are also good. You get reviews of your project

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.