The Complete Figma Course – Designing Mobile & Web App UI/UX from Udemy

You will learn how to create beautiful mobile & web user interfaces that you can then turn into live prototypes with the help of Figma.

Figma is a leading design software, helping teams and individuals create designs faster and more efficiently. Figma is free and you can use it right on your web browser, on Mac and Windows.

[NEW] This course has been updated for 2022 to include all the latest Figma Features for your convenience and to keep the course fully up to date with Figma.

Is this course for you?

You're in the right place if any of these apply to you:

You’re interested in user interface & user experience design (UI/UX) but not sure where to start.
You’re an entrepreneur with an app idea and want to turn your idea from a sketch to a realistic mockup and prototype.
You want to brush up your design skills to get the job that you want at companies like Airbnb, Google, Apple, etc.
You’re already designing and want to jump into Figma and take your designs to the next level.
You’re interested in earning income as a freelance designer.
You simply want to enter a new career path, and graphic design has interested you.

By the end of this course:

You will have learned the many great tools Figma has to offer and you will be able to design engaging mobile and web mockups, that you can turn into live interactive prototypes, for your own projects or for your clients.

What do I need?

This course is for both beginners & experienced designers looking to expand their skills. All you need is a computer and a web browser.

About your instructor:

This course is taught by entrepreneur & designer Nima Tahami. Nima has more than 10 years of experience designing and developing dozens of mobile apps and web apps for both clients and startups of his own. Nima's current startup, ShiftRide, has been covered in many news outlets, including Forbes, where his app was highlighted for its ease of use.

Nima has created this course to help people become the best designer they can be. Design is part of the foundation of many things from great products & websites to great advertisements and everything in between. Nima has also designed and developed an open-source iPhone development library by the name of FCAlertView, helping 350,000+ app developers use beautiful customizable alert prompts within their applications.

Course Overview:

The course is broken down into 3 main parts: Learning all about Figma, Designing a Full Mobile Mockup, and Designing a Simple Web App Mockup.

Learning All About Figma:

Understanding why Figma is great
Signing Up for Figma
Going over the basics of the software
Importing Files from Sketch
Creating Frames, Shapes, and exploring with Drawing Tools

Designing a Full Mobile Mockup:

Designing the Mobile App UI for a laundry delivery service called Clean Kangaroo
Creating reusable design components
Using constraints to create responsive designs for any size mobile device
Applying easy-to-change styles for colours and typography
Turning our mockup into an interactive prototype
Testing our prototype on a real device
Adding animations, overlays, links, and more to our prototype to make them more usable
Sharing & Exporting our designs
Working live with a team inside Figma

Designing a Simple Web Mockup:

Designing a 3-Page Web App UI for Clean Kangaroo
Using Auto-Layout to create smart dynamic designs
Filling in our designs with sample data using Plugins

So what are you waiting for?

Let’s get started learning how to design real-world projects using Figma and take our design skills to a whole new level together.

What's inside

Learning objectives

How to use figma on web & desktop
Designing full mobile & web mockups (ui design)
Creating great experiences with applications of ux design
Building interactive prototypes to share with co-workers and clients

Seeing your prototypes live on your own mobile phone
Creating easy-to-tweak designs using re-usable components & styles
How to pick colour schemes and unique typography for your designs
Working with your clients/team right within figma

How to use figma on web & desktop
Designing full mobile & web mockups (ui design)
Creating great experiences with applications of ux design
Building interactive prototypes to share with co-workers and clients
Seeing your prototypes live on your own mobile phone
Creating easy-to-tweak designs using re-usable components & styles
How to pick colour schemes and unique typography for your designs
Working with your clients/team right within figma

Syllabus

Introduction

Introduction to Course

In this section, we'll learn about, Figma, which is the free software that will be used for this course. We'll get started with setting up an account and go over the basics of the software.

What's Figma?

Let's Sign Up!

The Basics

Creating New Files

Importing from Sketch

In this section, we'll explore the Figma app and what it has to offer in each of the panels and toolbars.

The Main Toolbar

The Properties Panel

The Layers Panel

Useful Shortcuts

In this section, we'll start creating frames, drawing shapes, and make more advanced shapes in Figma.

Frames

Grids & Guides

Creating Shapes

Pen & Pencil Tools

Boolean Operations

Boolean Exercise Solution

Alignment Tools

In this section, we'll create our first mobile app mockup while learning about and using styles, components, constraints, and plug-ins.

Mockup Requirements

Mockup Files

The Wireframe

Setting Up Our Frames

Images & Overlays

Adding Icons

Choosing a Color Scheme

Setting Up Color Styles

Tutorial Page

Components

Button Components

Using Pages to Organize

Using Variants to Create Component Groups

Variants Exercise Solution

Exploring Variants Even More

Payment Page

Constraints

Constraints Exercise Solution

Plugins

Completing Our Map Page

In this section, we'll finish designing our mobile mockup that we started in the last section, while learning about UX, Templates, Color Styles, and Text Styles.

User Experience Design (UX)

Using Templates

Using Apple Templates & Fonts

Working on Our Main Pages

Designing a Tab Bar for Navigation

Using Variants for Tab Bars

Request Page

Store Cards

Adding Constraints to the Request Page

Profile Page

Applying Constraints to the Profile Page

Services Page

Adding Sample Data from Google Sheets

Finding Custom Fonts to Use

Creating Text Styles

Applying Text Styles Everywhere

Finishing Touches

In this section, we'll learn how to turn our mobile mockup into a live interactive prototype that we can present in Figma, as well as our own mobile device.

Creating Prototypes

Adding Connections between Frames

Scrolling in Prototypes

Testing on a Real Device

Using Overlays for Tutorial Cards

Openning Links

Adding Animations

Page Transitions

Interactive Maps

Playing GIFs

Smart Animate

Interactive Components

Interactive Components Exercise Solutions

Creating New Flows

In this section, we'll learn how Figma works in teams and how to share our files with colleagues and clients.

Sharing Our Files

Working with Teams

In this section, we'll learn how we can export our mockup pages and icons from Figma in PNG, JPG, PDF, and SVG formats. We will also learn how developers can leverage Figma using the Code panel.

Creating Exports

Code Handoff

In this section, we'll power through a web app for our Clean Kangaroo app using templates, while learning about auto-layout, applying reusable components, and adding some sample data quickly.

Project Outline

Starting with a Template

Image Masks

Dashboard Page

Auto-Layout

Adding Sample Data

Full Web Mockup

Version History

Conclusion

Well Done!

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Streamlines design processes by teaching popular industry tools and techniques

Suitable for beginners in UI/UX design who want to build a solid foundation

Provides hands-on exercises and interactive components to enhance practical skills

Covers essential concepts of mobile and web UI design, including constraints, styles, and prototyping

Emphasizes creating responsive designs for different screen sizes

Includes a section on collaboration and teamwork within the Figma platform

Career center

Learners who complete The Complete Figma Course – Designing Mobile & Web App UI/UX will develop knowledge and skills that may be useful to these careers:

UI Designer

Whether you're creating designs for the first time or touching up your portfolio, the Complete Figma Course can help you succeed as a UI Designer. This course gives you a comprehensive foundation for designing applications for the web or mobile devices. It starts with the basics of Figma, and gradually introduces intermediate and advanced concepts. By the end of this course, you'll be able to design beautiful user interfaces that are also engaging and user-friendly.

See salaries and explore the career path for UI Designer

Web Developer

As a Web Developer, you'll spend much of your day designing and building user interfaces. The Complete Figma Course will help you build a great foundation for this career by teaching you how to create web UIs and prototypes with Figma. With a great command of Figma, you'll be able to collaborate with UI and UX Designers, create responsive designs that work on any screen size, and build interactive prototypes to share with clients or stakeholders.

See salaries and explore the career path for Web Developer

UX Designer

User Experience (UX) Designers focus on the user's experience when interacting with a product or service. The Complete Figma Course can help you get started with a career in UX Design by introducing you to the basics of user-centered design, prototyping, and UI design. This course will help you create engaging and user-friendly interfaces by teaching you how to create wireframes, prototypes, and style guides that designers and developers can use.

See salaries and explore the career path for UX Designer

Mobile App Developer

Mobile App Developers design, build, and maintain mobile applications. The Complete Figma Course can help you build a foundation for this career by teaching you how to design and prototype mobile applications with Figma. This course will teach you how to create user interfaces, prototypes, and style guides that you can use to build engaging and user-friendly mobile apps.

See salaries and explore the career path for Mobile App Developer

Freelance Designer

Freelance Designers work on a project-by-project basis, providing their services to clients in a variety of industries. The Complete Figma Course can help you succeed as a Freelance Designer by teaching you how to create stunning user interfaces, prototypes, and style guides. With a strong command of Figma, you'll be able to attract more clients, deliver high-quality work, and establish yourself as a top-tier designer.

See salaries and explore the career path for Freelance Designer

Product Manager

Product Managers are responsible for the overall success of a product, from its conception to its launch and beyond. The Complete Figma Course may be helpful for aspiring Product Managers who want to learn more about UI and UX design. This course will teach you how to create wireframes, prototypes, and style guides, which are essential for communicating your vision to designers and developers.

See salaries and explore the career path for Product Manager

Graphic designer

Graphic Designers use visual concepts to communicate ideas. The Complete Figma Course may be helpful for Graphic Designers who want to expand their skillset to include UI and UX design. This course teaches you how to use Figma to create digital designs and prototypes, which can be useful for creating marketing materials, social media graphics, and web pages.

See salaries and explore the career path for Graphic designer

Quality Assurance Analyst

Quality Assurance Analysts ensure that software products meet the required standards for quality. The Complete Figma Course may be helpful for aspiring Quality Assurance Analysts who want to learn more about UI and UX design. This course will teach you how to create wireframes, prototypes, and style guides, which are essential for understanding the requirements of a software product.

See salaries and explore the career path for Quality Assurance Analyst

Business Analyst

Business Analysts work with stakeholders to understand their needs and translate them into technical requirements. The Complete Figma Course may be helpful for aspiring Business Analysts who want to learn more about UI and UX design. This course will teach you how to create wireframes, prototypes, and style guides, which are essential for understanding the requirements of a software product.

See salaries and explore the career path for Business Analyst

Project Manager

Project Managers are responsible for planning, executing, and closing projects. The Complete Figma Course may be helpful for aspiring Project Managers who want to learn more about UI and UX design. This course will teach you how to create wireframes, prototypes, and style guides, which are essential for understanding the requirements of a software product.

See salaries and explore the career path for Project Manager

Technical Writer

Technical Writers create documentation for software products. The Complete Figma Course may be helpful for aspiring Technical Writers who want to learn more about UI and UX design. This course will teach you how to create wireframes, prototypes, and style guides, which are essential for creating clear and concise documentation.

See salaries and explore the career path for Technical Writer

Information Architect

Information Architects design and organize the information on websites and other digital platforms. The Complete Figma Course may be helpful for aspiring Information Architects who want to learn more about UI and UX design. This course will teach you how to create wireframes, prototypes, and style guides, which are essential for organizing and structuring information.

See salaries and explore the career path for Information Architect

DevOps Engineer

DevOps Engineers work to bridge the gap between development and operations teams. The Complete Figma Course may be helpful for aspiring DevOps Engineers who want to learn more about UI and UX design. This course will teach you how to create wireframes, prototypes, and style guides, which are essential for understanding the requirements of a software product.

See salaries and explore the career path for DevOps Engineer

Scrum Master

Scrum Masters are responsible for facilitating Scrum teams and ensuring that they are following the Scrum framework. The Complete Figma Course may be helpful for aspiring Scrum Masters who want to learn more about UI and UX design. This course will teach you how to create wireframes, prototypes, and style guides, which are essential for understanding the requirements of a software product.

See salaries and explore the career path for Scrum Master

Data Scientist

Data Scientists use data to solve problems and make predictions. The Complete Figma Course may be helpful for aspiring Data Scientists who want to learn more about UI and UX design. This course will teach you how to create wireframes, prototypes, and style guides, which are essential for communicating your findings to stakeholders.

See salaries and explore the career path for Data Scientist