Figma UI UX Design Essentials from Udemy

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

Before the end of this course you will have made fully interactive prototypes

You will take a project all the way through - collaborating with other team members and exporting the right files ready to hand off to your developer or software engineer.

We’ll be focusing on the software Figma but I’ll make sure to explain the techniques & terms used in the UX and how real world projects are run. You will develop a great understanding of the industry and will be able to manage your own UX projects.

I will be setting assignments through the course which will help develop your skills and enable you to create something special and unique for your own portfolio.

Alright - it's time to upgrade yourself & go from Figma Zero to Figma Hero.

What's inside

Learning objectives

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.
Show more
Show less

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.
Show more
Show less

Syllabus

Getting Started

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

Wireframing - Low Fidelity

What is Lo Fi Wireframe vs High Fidelity in Figma

Creating our design file & introducing frames in Figma

Type, Color & Icon Introduction

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

Pages

How to use Pages in Figma

Prototyping - Level 1

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

Animation Level 1

What is Smart Animation & delays in Figma

Class project 05 - My first animation

Commenting

Sharing & Commenting on Figma file with Stakeholders

Share editing with other UX designers in Figma

Moodboard - High Fidelity

How I get inspiration for UX projects

How to create a mood board in Figma

Class Project 06 - Moodboard

Columns

How to work with Columns & Grid in Figma

Tips & Tricks

Tips Tricks Preferences and Weirdness in Figma

Colors

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

Text & Fonts Advanced

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

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

Working with Illustrator

Do I need to know Illustrator with Figma

Images

Tips & tricks for using images in Figma

Masking Cropping images in Figma

Free image & plugin for Figma

Learn how to use Photoshop in conjunction with Figma

Do you need Photoshop for UX Design in Figma?

Class Project 10 - Images

Autolayout's & Constraints

Autolayout & Constraints

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

Effects

Blur Layer & Background Blur & Image Blur in Figma

How to make Neumorphic ui buttons in Figma

Class project 13 - Effects

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Uses Figma, which is a leading tool for UX design

Well-structured with detailed video content and practical assignments

Introduces essential UX design concepts and principles

Covers advanced topics like micro-interactions and animation

Provides guidance on creating professional UX deliverables

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Figma UI UX Design Essentials with these activities:

Follow Figma Tutorials and Courses

Show steps

Supplement your learning with Figma tutorials and courses to expand your knowledge and develop new skills.

Browse courses on Online Courses

Show steps

Search for Figma tutorials and courses online.
Choose tutorials and courses that cover specific topics you want to learn.
Follow the tutorials and complete the exercises.
Apply what you learn to your own design projects.

Read Design of Everyday Things by Don Norman

Show steps

Read this foundational book on user experience design by Don Norman to enhance your understanding of the principles and best practices of UX design.

View Things That Make Us Smart: Defending Human... on Amazon

Show steps

Purchase the book and set aside time for reading.
Read the book thoroughly, taking notes on key concepts.
Summarize the main ideas and principles presented in the book.
Reflect on how these principles apply to your own design work.

Create a UX Design Portfolio

Show steps

Start working on building your UX design portfolio to showcase your skills and demonstrate your ability to solve real-world design problems.

Browse courses on UX Portfolio

Show steps

Gather your best UX design work and case studies.
Create a website or online portfolio to showcase your work.
Describe the design process and outcomes for each project.
Get feedback on your portfolio from other designers.

Two other activities

Expand to see all activities and additional details

Show all five activities

Create a Figma Design System

Show steps

Create a Figma design system to establish a consistent and reusable set of design elements, components, and styles for your UX design projects.

Browse courses on Design System

Show steps

Define the scope and goals of your design system.
Establish design principles and guidelines.
Create a library of reusable components and styles.
Document your design system for easy reference.

Design a Mobile App Prototype

Show steps

Design a fully interactive mobile app prototype in Figma to demonstrate your ability to create user-friendly and engaging mobile experiences.

Show steps

Define the user persona and app requirements.
Create wireframes and design mockups.
Build an interactive prototype using Figma.
Test and iterate on your prototype.

Career center

Learners who complete Figma UI UX Design Essentials will develop knowledge and skills that may be useful to these careers:

UX Designer

UX Designers focus on the user experience of digital products. This course will help build a foundation for this career by teaching you the basics of UX design, including how to create user personas, conduct user research, and design user interfaces. You will also learn how to use Figma to create prototypes and other UX deliverables.

See salaries and explore the career path for UX Designer

UI Designer

UI Designers create the look and feel of digital products. This course will help build a foundation for this career by teaching you how to use Figma, a popular UI design tool. You will learn how to create wireframes, prototypes, and other UX deliverables.

See salaries and explore the career path for UI Designer

Product Designer

Product Designers are responsible for the overall design of digital products. This course will help build a foundation for this career by teaching you the basics of product design, including how to define product requirements, conduct user research, and design user interfaces. You will also learn how to use Figma to create prototypes and other product design deliverables.

See salaries and explore the career path for Product Designer

User Researcher

User Researchers are responsible for conducting research on users to inform the design of digital products. This course will help build a foundation for this career by teaching you the basics of user research, including how to conduct user interviews, surveys, and usability tests. You will also learn how to use Figma to create prototypes and other user research deliverables.

See salaries and explore the career path for User Researcher

Interaction Designer

Interaction Designers are responsible for the design of the interactions between users and digital products. This course will help build a foundation for this career by teaching you the basics of interaction design, including how to create prototypes, conduct user testing, and design user interfaces. You will also learn how to use Figma to create prototypes and other interaction design deliverables.

See salaries and explore the career path for Interaction Designer

Web Designer

Web Designers are responsible for the design of websites. This course will help build a foundation for this career by teaching you the basics of web design, including HTML, CSS, and JavaScript. You will also learn how to use Figma to create prototypes and other web design deliverables.

See salaries and explore the career path for Web Designer

Front-End Developer

Front-End Developers are responsible for the implementation of the user interface of digital products. This course will help build a foundation for this career by teaching you the basics of front-end development, including HTML, CSS, and JavaScript. You will also learn how to use Figma to create prototypes and other front-end development deliverables.

See salaries and explore the career path for Front-End Developer

Information Architect

Information Architects are responsible for the organization and structure of information on digital products. This course will help build a foundation for this career by teaching you the basics of information architecture, including how to create sitemaps, wireframes, and user flows. You will also learn how to use Figma to create prototypes and other information architecture deliverables.

See salaries and explore the career path for Information Architect

Motion Designer

Motion Designers are responsible for the creation of animated content for digital products. This course will help build a foundation for this career by teaching you the basics of motion design, including how to create storyboards, animatics, and prototypes. You will also learn how to use Figma to create prototypes and other motion design deliverables.

See salaries and explore the career path for Motion Designer

Graphic designer

Graphic Designers are responsible for the creation of visual content, such as logos, brochures, and websites. This course will help build a foundation for this career by teaching you the basics of graphic design, including typography, color theory, and image editing. You will also learn how to use Figma to create prototypes and other graphic design deliverables.

See salaries and explore the career path for Graphic designer

Content Strategist

Content Strategists are responsible for the planning, creation, and management of content for digital products. This course will help build a foundation for this career by teaching you the basics of content strategy, including how to define content goals, conduct user research, and create content calendars. You will also learn how to use Figma to create prototypes and other content strategy deliverables.

See salaries and explore the career path for Content Strategist

Project Manager

Project Managers are responsible for the planning, execution, and delivery of digital products. This course may be helpful in building a foundation for this career by teaching you the basics of project management, including how to create project plans, manage budgets, and track progress. You will also learn how to use Figma to create prototypes and other project management deliverables.

See salaries and explore the career path for Project Manager

Business Analyst

Business Analysts are responsible for the analysis of business processes and requirements. This course may be helpful in building a foundation for this career by teaching you the basics of business analysis, including how to conduct interviews, document requirements, and create use cases. You will also learn how to use Figma to create prototypes and other business analysis deliverables.

See salaries and explore the career path for Business Analyst

Technical Writer

Technical Writers are responsible for the creation of documentation for digital products. This course may be helpful in building a foundation for this career by teaching you the basics of technical writing, including how to write user guides, technical manuals, and release notes. You will also learn how to use Figma to create prototypes and other technical writing deliverables.

See salaries and explore the career path for Technical Writer

Sound Designer

Sound Designers are responsible for the creation of sound effects and music for digital products. This course may be helpful in building a foundation for this career by teaching you the basics of sound design, including how to create sound effects, record audio, and mix audio. You will also learn how to use Figma to create prototypes and other sound design deliverables.

See salaries and explore the career path for Sound Designer