Figma UI UX Design Essentials

About Course

Want to become a UX Designer? This comprehensive **Figma course for beginners** is your complete guide to mastering this industry-standard UI/UX design tool. Learn how to create stunning user interfaces and engaging prototypes. Explore essential design principles like **wireframing, color and image implementation, typography, and icon creation**. Discover advanced techniques like **Components, Constraints, and Multi-Dimensional Variants** that simplify complex concepts for beginners.

This **free Figma course** takes you step-by-step from the basics of UX to building fully interactive prototypes. You’ll develop a strong understanding of industry practices and gain the skills needed to create a professional portfolio. This course is available completely free on platforms like **Udemy, Udacity, Coursera, MasterClass, NearPeer, and more!**

Master the fundamentals of UX Design using Figma.
Learn to create stunning wireframes, user interfaces, and prototypes.
Develop a strong understanding of design principles and best practices.
Explore advanced techniques like Components, Constraints, and Multi-Dimensional Variants.
Optimize your workflow with free UI kits and Figma plugins.
Create interactive prototypes and animations for web and mobile applications.
Build a professional portfolio showcasing your skills.
Gain confidence in managing your own UX projects.

How to begin working as a UX Designer using Figma.
How to use Figma for Essential UX Design & UI Design
How to make fully interactive prototypes.
How to work with a UX personas.
You will be able to add UX designer to your CV.
Build a UX project from beginning to end.
What the client expects of you as a UX designer.
How to create simple wireframes.
How to implement colours & images properly in your designs.
The dos & don'ts around choosing fonts for web & mobile apps.
How to create your own icons, buttons & other UI components.
Terms such as Components, Constraints & Multi Dimensional Variants.
Free UI kits & plugins for Figma which will speed up our workflow dramatically!
How to build a simple style guide, ready for client handoff.
How to make both simple & advanced micro interactions, page transitions & animations.
Learn to design websites & mobile phone apps.
Work with fonts & colors.
Test on mobile phones.
Export production ready assets.
Create your first UX brief & persona.
Learn professional workflow tricks & shortcuts.
Forum support from me and the rest of the BYOL crew.
All the techniques used by UX professionals
111 videos of detailed Figma & UX & UI Design content.

Course Content

01 – Getting Started

A Message from the Professor
001 – Introduction to Figma Essentials training course.mp4

00:00
002 – Getting started with Figma training.mp4

00:00
003 – What is Figma for & does it do the coding.mp4

00:00
004 – Whats the difference between UI and UX in Figma.mp4

00:00
005 – What we are making in this Figma course.mp4

00:00
006 – Class project 01 Create your own brief.mp4

00:00
Section Quiz

02 – Wireframing Low Fidelity

03 – Type Color & Icon Introduction

009 – The basics of type & fonts in Figma.mp4

00:00
010 – Rectangles Circles Buttons Rounded corners in Figma.mp4

00:00
011 – How to use color in Figma.mp4

00:00
012 – Strokes plus updating color defaults in Figma.mp4

00:00
013 – Object editing and how to escape in Figma.mp4

00:00
014 – Scale vs Selection Tool in Figma.mp4

00:00
015 – Frames vs Groups in Figma.mp4

00:00
016 – Class project 02 Wireframe.mp4

00:00
017 – Where to get Free icons for Figma.mp4

00:00
018 – Matching the stroke of our icons.mp4

00:00
019 – How to use Plugins in Figma for icons.mp4

00:00
020 – Class project 03 Icons.mp4

00:00
Section Quiz

04 – Pages

05 – Prototyping Level 1

06 – Animation Level 1

07 – Commenting

08 – Moodboard High Fidelity

09 – Columns

10 – Tips & Tricks

11 – Colors

12 – Text & Fonts Advanced

040 – Font on Desktop vs Browser Figma.mp4

00:00
041 – What fonts can I use plus font pairing in Figma.mp4

00:00
042 – What common font sizes should I choose in web design.mp4

00:00
043 – How to make Character Styles in Figma.mp4

00:00
044 – Lorem ipsum & Placeholder text in Figma.mp4

00:00
045 – Useful things to know about text in Figma.mp4

00:00
046 – How fix missing fonts in Figma.mp4

00:00
047 – Class project 08 Text.mp4

00:00
Section Quiz

13 – Drawing

14 – Working with Illustrator

15 – Images

055 – Tips & tricks for using images in Figma.mp4

00:00
056 – Masking Cropping images in Figma.mp4

00:00
057 – Free image & plugin for Figma.mp4

00:00
058 – Working with Photoshop.mp4

00:00
059 – Class Project 10 Images.mp4

00:00
060 – Autolayout & Constraints.mp4

00:00
061 – Class project 11 Buttons.mp4

00:00
062 – Auto Layout for spacing.mp4

00:00
063 – How to use constraints in figma.mp4

00:00
064 – Combining Nested frames Auto Layout & Constraints in Figma.mp4

00:00
065 – Adding Text Box Autoheight to Autolayout in Figma.mp4

00:00
066 – Class Project 12 Responsive Design.mp4

00:00
067 – Nice drop shadow & Inner drop shadow effects in Figma.mp4

00:00
Section Quiz

16 – Effects

17 – Saving & History

18 – Components & Instances

19 – Variants & Variables

20 – Making a form

21 – Prototyping Level 2

085 – How to add a popup overlay modal in Figma.mp4

00:00
086 – How to make & prototype a tool tip in Figma.mp4

00:00
087 – What are Flows in Figma.mp4

00:00
088 – Slide in mobile nav menu overlay in Figma.mp4

00:00
089 – Class project 17 Prototyping.mp4

00:00
090 – How to pin navigation to top in Figma.mp4

00:00
091 – How to make horizontal scrolling swipe in Figma.mp4

00:00
092 – Automatic scroll down the page to anchor point in Figma.mp4

00:00
Section Quiz

22 – Teams & Projects

23 – Libraries

24 – Animation & Micro Interactions

095 – The difference between animation & micro interactions.mp4

00:00
096 – Animation with custom easing in Figma.mp4

00:00
097 – Class Project 18 My Second Animation.mp4

00:00
098 – How to make animated transitions in Figma.mp4

00:00
099 – Class Project 19 Page transition.mp4

00:00
100 – Micro interactions using interactive components in Figma.mp4

00:00
101 – Micro interaction toggle switch in Figma.mp4

00:00
102 – Micro Interaction burger menu turned into cross in Figma.mp4

00:00
103 – Class Project 20 Micro interaction.mp4

00:00
Section Quiz

25 – Thumbnail update

26 – Exporting

27 – What next

Add this certificate to your resume to demonstrate your skills & increase your chances of getting noticed.

Student Ratings & Reviews

5.0

Total 2 Ratings

2 Ratings

0 Rating

Isha Naheed

2 months ago

Best course on figma online.

Khansa Waheed

3 months ago

It was an amazing course, i learnt alot and really enjoyed it.

About Course

What Will You Learn?

Course Content

01 – Getting Started

A Message from the Professor

001 – Introduction to Figma Essentials training course.mp4

002 – Getting started with Figma training.mp4

003 – What is Figma for & does it do the coding.mp4

004 – Whats the difference between UI and UX in Figma.mp4

005 – What we are making in this Figma course.mp4

006 – Class project 01 Create your own brief.mp4

Section Quiz

02 – Wireframing Low Fidelity

007 – What is Lo Fi Wireframe vs High Fidelity in Figma.mp4

008 – Creating our design file & introducing frames in Figma.mp4

Section Quiz

03 – Type Color & Icon Introduction

009 – The basics of type & fonts in Figma.mp4

010 – Rectangles Circles Buttons Rounded corners in Figma.mp4

011 – How to use color in Figma.mp4

012 – Strokes plus updating color defaults in Figma.mp4

013 – Object editing and how to escape in Figma.mp4

014 – Scale vs Selection Tool in Figma.mp4

015 – Frames vs Groups in Figma.mp4

016 – Class project 02 Wireframe.mp4

017 – Where to get Free icons for Figma.mp4

018 – Matching the stroke of our icons.mp4

019 – How to use Plugins in Figma for icons.mp4

020 – Class project 03 Icons.mp4

Section Quiz

04 – Pages

021 – How to use Pages in Figma.mp4

Section Quiz

05 – Prototyping Level 1

022 – How to prototype in Figma.mp4

023 – Prototype animation and easing in Figma.mp4

024 – Testing on your phone with Figma Mirror.mp4

025 – Class project 04 Testing on your phone.mp4

Section Quiz

06 – Animation Level 1

026 – What is Smart Animation & delays in Figma.mp4

027 – Class project 05 My first animation.mp4

Section Quiz

07 – Commenting

028 – Sharing & Commenting on Figma file with Stakeholders.mp4

029 – Share editing with other UX designers in Figma.mp4

Section Quiz

08 – Moodboard High Fidelity

030 – How I get inspiration for UX projects.mp4

031 – How to create a mood board in Figma.mp4

032 – Class Project 06 Moodboard.mp4

Section Quiz

09 – Columns

033 – How to work with Columns & Grid in Figma.mp4

Section Quiz

10 – Tips & Tricks

034 – Tips Tricks Preferences and Weirdness in Figma.mp4

Section Quiz

11 – Colors

035 – Color Inspiration & the eyedropper in Figma.mp4

036 – How to create a color palette in Figma.mp4

037 – How to make gradients in Figma.mp4

038 – How to create & use Color Styles in Figma.mp4

039 – Class Project 07 Colors & Columns.mp4

Section Quiz

12 – Text & Fonts Advanced

040 – Font on Desktop vs Browser Figma.mp4

041 – What fonts can I use plus font pairing in Figma.mp4

042 – What common font sizes should I choose in web design.mp4

043 – How to make Character Styles in Figma.mp4

044 – Lorem ipsum & Placeholder text in Figma.mp4

045 – Useful things to know about text in Figma.mp4

046 – How fix missing fonts in Figma.mp4

047 – Class project 08 Text.mp4

Section Quiz

13 – Drawing

048 – Drawing tips and tricks in Figma.mp4

049 – Squircle buttons with ios rounded courses in Figma.mp4

050 – Boolean Union Subtract Intersect Exclude Pathfinder in Figma.mp4

051 – What is the difference Union vs Flatten Figma.mp4