Learn Figma UI UX Design Essentials in 2024
- Description
- Curriculum
- FAQ
- Reviews
Hi there, I’m Pier, and I want to welcome you to my Figma Essentials course.
This course will teach you Figma from A to Z, in an engaging and practical way.
Together, we will learn everything you need to know to start working as a UI and 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 how to successfully work with clients as a new UX designer.
This course is for those who are new to design and User Experience design and Web Design. Even if you’re not entirely sure what terms like UI or UX means, don’t worry. We’ll start from the beginning and progress step by step.
First, we’ll go over the brief and how to work with a UX persona. Then, you’ll learn how to create simple UX wireframes. From there, we’ll explore how to properly implement colors and images in your designs. You’ll also learn the dos and don’ts of choosing fonts for web and mobile apps, and how to create your own icons, buttons, and other UI components.
We’ll cover some seemingly complex terms like Components, Constraints, and Multi-Dimensional Variants, but don’t worry—they’re easy to understand once you know how.
We’ll make our workflow more efficient by using free UI kits and plugins for Figma, and we’ll also leverage the Figma Community files. On top of that, we’ll build a simple style guide for client handoff, and you’ll learn how to create both simple and advanced micro-interactions, page transitions, and animations.
We have two main projects within this course:
-
Landing page project: you will build an entire landing page from scratch for a SaaS company, which will teach you best practices around web design and Figma’s collaboration features.
-
Web App: in this scenario, you were hired by a client to design a new dashboard for their web app. This workshop will teach you principles that will be essential in your UX design journey.
By the end of this Figma course, you will have created fully functioning website, apps and interactive prototypes. You will take a project from start to finish, collaborating with team members and exporting the necessary files for handoff to your developer or software engineer.
While we’ll focus on the design software Figma, I’ll also explain the techniques and terminology used in UX design, as well as how real-world projects are managed. You’ll gain a solid understanding of the industry and be able to handle your own UX projects.
Throughout the course, I will assign tasks to help you develop your skills and create unique pieces for your portfolio.
Alright, it’s time to upgrade and become a Figma Hero.
-
3The Starter ScreenVideo lesson
-
4How to Install Project FilesVideo lesson
-
5How to Move in FigmaVideo lesson
-
6Lines & ArrowsVideo lesson
-
7Move & Scale ToolsVideo lesson
-
8Rectangle ToolVideo lesson
-
9Polygon ToolVideo lesson
-
10Ellipse ToolVideo lesson
-
11Star ToolVideo lesson
-
12Groups vs FramesVideo lesson
-
13Typography BasicsVideo lesson
-
14Image EditingVideo lesson
-
15Colors & Blend ModesVideo lesson
-
16Mask ToolVideo lesson
-
17Drop ShadowVideo lesson
-
18Pen ToolVideo lesson
-
19Frames, Positioning & AlignmentVideo lesson
-
20Resize Frames without Resizing ContentVideo lesson
-
21StrokesVideo lesson
-
22Background BlurVideo lesson
-
23Copying Style PropertiesVideo lesson
-
24Overlay Text EffectVideo lesson
-
25Outline StrokeVideo lesson
-
26AutolayoutVideo lesson
-
27Layout GridsVideo lesson
-
28Intro to ComponentsVideo lesson
-
29When to Use ComponentsVideo lesson
-
30Intro to VariantsVideo lesson
-
31Responsive WorkflowsVideo lesson
-
32ShortcutsVideo lesson
-
33Slice ToolVideo lesson
-
34Brush StrokeVideo lesson
-
35Figma to PDFVideo lesson
-
36Smart Animate & DelaysVideo lesson
-
49What is a Design SystemVideo lesson
-
50How to Structure a Design System like a ProVideo lesson
-
51Color StylesVideo lesson
-
52Typography StylesVideo lesson
-
53IconographyVideo lesson
-
54Shadows, Grids, Spacing and moreVideo lesson
-
55Fortune 500 Design Systems - Analysis & FreebiesVideo lesson
-
56Atomic Design Principles 101Video lesson
-
57Discovery Call and User PersonasVideo lesson
-
58Content ArchitectureVideo lesson
-
59Wireframe FoundationsVideo lesson
-
60Wireframe ProgressVideo lesson
-
61UI Design FoundationsVideo lesson
-
62Social Proof and FeaturesVideo lesson
-
63Content FeaturesVideo lesson
-
64Pricing UIVideo lesson
-
65Contact UsVideo lesson
-
66FooterVideo lesson
-
73Pitch Decks: Design & Export to Slides or PowerpointVideo lesson
-
74Text around a PathVideo lesson
-
75Lorem IpsumVideo lesson
-
76Variable Width StrokesVideo lesson
-
77Mesh GradientsVideo lesson
-
78Content ReelVideo lesson
-
79Editing Images with PhotoPeaVideo lesson
-
80Html to FigmaVideo lesson
-
81UnsplashVideo lesson
-
82Remove Backgrounds FastVideo lesson
-
83Image to SVGVideo lesson
External Links May Contain Affiliate Links read more