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

CreativeLive

Figma UI UX Design Essentials

via CreativeLive

Overview

AFTER THIS CLASS YOU’LL BE ABLE TO:

  • Begin working as a UX Designer using Figma.

  • Use Figma for Essential UX Design & UI Design

  • Make fully interactive prototypes.

  • Work with a UX personas.

  • Add UX designer to your CV.

  • Build a UX project from beginning to end.

  • Understand what the client expects of you as a UX designer.

  • Create simple wireframes.

  • Implement colours & images properly in your designs.

  • Know the dos & don’ts around choosing fonts for web & mobile apps.

  • Create your own icons, buttons & other UI components.

  • Understand terms such as Components, Constraints & Multi Dimensional Variants.

  • Use free UI kits & plugins for Figma which will speed up our workflow dramatically!

  • Build a simple style guide, ready for client handoff.

  • Make both simple & advanced micro interactions, page transitions & animations.

  • Design websites & mobile phone apps.

  • Work with fonts & colors.

  • Test on mobile phones.

  • Export production ready assets.

  • Create your first UX brief & persona.

  • Use professional workflow tricks & shortcuts.

  • Understand all the techniques used by UX professionals


ABOUT DANIELS’S CLASS:

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.


WHO THIS CLASS IS FOR:

  • 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.


SOFTWARE USED:  

Try Figma for free by clicking here.

Syllabus

  • Introduction to Figma Essentials
  • Getting Started with Figma Training
  • What Is Figma For & Does It Do The Coding?
  • 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
  • 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 a Figma File with Stakeholders
  • Sharing & 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 & Grids 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 07 - Colors & Columns
  • Fonts on Desktop vs in Browser in 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 To 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 and Exclude with Pathfinder in Figma
  • What Is The Difference? Union vs Flatten In 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 Images & Plugins For Figma
  • Do You Need Photoshop For Ux Design In Figma?
  • Class Project 10 - 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 13 - 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 14 - Components
  • How To Make Component Variants In Figma
  • Another Way To Make Variables 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 A 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 17 - Prototyping
  • How To Pin Navigation To The Top In Figma
  • How To Make A 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 19 - Page Transition
  • Micro Interactions Using Interactive Components In Figma
  • Micro Interaction Toggle Switch In Figma
  • Micro Interaction Burger Menu Turned Into A 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 Your 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?

Taught by

Daniel Walter Scott

Reviews

Start your review of Figma UI UX Design Essentials

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.