When you enroll through our links, we may earn a small commission—at no extra cost to you. This helps keep our platform free and inspires us to add more value.
Figma UI UX Design Essentials
Unlock creativity with Skillshare! Learn acrylic painting, AI writing, graphic design, and photography.
This Course Includes
skillshare
0 (0 reviews )
11 hours 36 mintues 
english
Online - Self Paced
course
SkillShare
About Figma UI UX Design Essentials
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
What You Will Learn?
- 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..