Figma for Mobile App Design: Ultimate Edition from Udemy

Learn to design outstanding mobile apps. Impressive prototypes that look like the real deal but without any coding. This course is a masterclass – a comprehensive approach to mobile app designing. I’ll teach you everything you need to know, from A to Z. We’ll use Figma. I've taught over 270.000 students on Udemy and I'm a best-selling instructor.

You’ll learn about Material Design, the principles of color, spacing, and typography, tips and tricks, how to get design resources, and much much more. Get a life skill that’s high in demand in today’s job market, all for the price of a fancy coffee. Create beautiful apps and supercharge your career.

You'll learn to:

Design beautiful mobile apps;
Use Figma for mobile app design;
The principles of Material Design;
Learn Figma from scratch;
Prepare all the files for developers through a special program called Zeplin;
How to size elements correctly on ALL phone types and sizes;
Typography best practices;
Where to get design resources like icons, custom graphics, photos, and more;

FAQ:

Will I learn how to code them? Kotlin, Java, Swift, Android Studio, Xcode?
No, that's not covered. However, I do teach you how to talk to developers and prepare everything. You won't have to slice or manually export your assets. I'll show you all my secrets as the CEO of my own Mobile App Design company.
What will we design?
We have a few projects, but there's a flagship app that's as real as they get. Over 40 screens in the final project - beautiful, sleek, modern. All the cutting edge techniques and best practices are used.

Final, personal note: I can honestly say there isn't anything like this anywhere out on the market. Believe me, I've looked long and hard. The course is PACKED full of knowledge I would have loved to have at the beginning of my career as a mobile app designer. I believe it's going to help a lot of people get a fantastic life skill. By far, this is the best course I've ever created. I hope you'll feel the same way.

What's inside

Learning objectives

Create beautiful apps in figma (a free design program) from scratch, with no previous experience, and add it to your portfolio
Learn about google material design and how to use it. practical advice that can get you design jobs fast - either as a freelancer or full time

Discover the principles of app design that you can immediately apply. tips & tricks of professionals for 2023 that will make you look design with confidence
Included: pdf cheat sheets that you can always review, access to my discord server to chat in real time, all the project files, and more!

Create beautiful apps in figma (a free design program) from scratch, with no previous experience, and add it to your portfolio
Learn about google material design and how to use it. practical advice that can get you design jobs fast - either as a freelancer or full time
Discover the principles of app design that you can immediately apply. tips & tricks of professionals for 2023 that will make you look design with confidence
Included: pdf cheat sheets that you can always review, access to my discord server to chat in real time, all the project files, and more!

Syllabus

Introduction

Download all the resources here

Design your first app screen

The most important thing about designing apps

Figma vs Adobe XD vs Sketch vs Photoshop

Two fundamental skills to have in Figma

My honest opinion about animations and no-code

Let’s improve our speed

Here’s how apps work and what you need to provide

Don’t design any mobile app without this!

Fix this mobile app design

How much $ should you charge?

Discover Figma’s interface & why professionals use it

Android vs iOS – should you care?

Flagship App Design Project - Part 1

Introduction to this section

Exploring the brief

Analyze the app’s competitors – Part 1

Analyze the app’s competitors – Part 2

Create the layout for the first screen

Set up the foundation for the home screen

Sketch out the restaurant details screen

How to make great design choices

Design concepts for the location screen (1)

Design concepts for the restaurant listing (2)

Set up the status bar and the action bar

Restaurant listing alternatives (2)

More variations for the card

Final restaurant listing variations (2)

Creating options for the action bar

Design concepts for the restaurant details (3) screen

Variation for the restaurant details

Choosing the best typeface

Define and refine our app’s look with styles

Practice your speed

Finish the first screen

A new style of button to have a great flow

Section overview

What you need to know about Google Material Design 2&3

This is Material Design

Android interface components overview

Here's the best artboard size for your apps

Size in pixels: here’s why people argue

Learn to design the action bar (top bar)

Everything you need to know about tabs

Displaying content in cards

Beautiful and effective buttons on Android

Work with text like a pro

FREE size guide for Android components

Typography for Beautiful Mobile Apps

Typography fundamentals

7 rules for easy-to-read text

Here's what the biggest apps are doing

Guide for perfect font sizing in any app

How to combine fonts correctly

Use colors for beautiful mobile apps

Discover the principles of color use

How to use color appropriately

The principle of color contrast

The best color schemes from top apps

Tools for awesome color schemes

Discover iOS best practices that produce solid results!

iOS apps – Overview

1x, 2x, 3x, PPI, notch?! iOS artboard size guide

PPI - pixels per inch explained

App design comparison: iOS vs Android

Official UI Kit - good or bad?

iOS status bar (with/wo Notch)

iOS Navigation bar

iOS Tab bar

iOS Text Fields

iOS Controls

Running Android apps on Mac OS

The official iOS typeface – should you use it?

iOS conclusions

Flagship App Design Project - Part 2 - Advanced Figma Features

Download the resources for this section

Create the login and register screens

Using components – step by step guide

Use instance swap to quickly change icons

Focus on your speed

Use component properties – like a professional!

This is how you use variants

Gain speed

Using fields the right way

Create the left menu

Create interactive checkboxes

Create toggle switches

Design cards with components

Here’s how you can make a beautiful credit card screen

Design a beautiful reviews page

How to style a review card

My take on going the extra mile

Create the checkout screen – step 1

Create the checkout screen – step 2

Using variants in the checkout screen

Think ahead for the prototype

Final thoughts about the project

Live session: Experimenting with different looks

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Teaches mobile app design, which is a valuable skill for UI/UX designers and web developers

Suitable for beginners with no prior design experience, making it accessible to a broader audience

Covers principles of color, spacing, and typography, providing a solid foundation for design aesthetics

Provides access to design resources and tips, such as where to find icons and custom graphics, empowering learners to create more visually appealing designs

Uses Figma, a free and widely used design tool, making it cost-effective and accessible for learners

Offers opportunities to apply design principles through hands-on projects, fostering practical skills

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 for Mobile App Design: Ultimate Edition with these activities:

Read Don't Make Me Think by Steve Krug

Show steps

Gain insights into usability and user experience principles to improve the effectiveness of your app designs.

View Don't Make Me Think, Revisited: A Common Sense... on Amazon

Show steps

Read through the book and take notes on key concepts.
Identify areas in your own app designs that could benefit from improved usability.

Color theory exercises

Show steps

Practice applying color theory principles to your app designs to enhance their visual appeal.

Browse courses on Color Theory

Show steps

Study the basics of color theory, including color schemes and contrast.
Create color palettes for different scenarios and evaluate their effectiveness.
Apply your knowledge to your own app designs.

Figma design exercise

Show steps

Reinforce your understanding of Figma's features and tools by creating your own simple interface design.

Browse courses on Figma

Show steps

Choose a simple app or interface you want to design.
Create a new Figma document and experiment with different layout options.
Add basic elements like buttons, text fields, and images.
Use Figma's prototyping tools to create a simple interactive prototype.

One other activity

Expand to see all activities and additional details

Show all four activities

Design a prototype for a mobile app

Show steps

Solidify your understanding of mobile app design by creating a prototype of your own.

Browse courses on Responsive Design

Show steps

Create a concept for your app, including its purpose and target audience.
Sketch out the user flow and create wireframes.
Design the app interface using Figma.
Create an interactive prototype using Figma's prototyping tools.

Career center

Learners who complete Figma for Mobile App Design: Ultimate Edition will develop knowledge and skills that may be useful to these careers:

UI Designer

UI Designers create the visual interface of a product. They work with UX Designers to create the overall user experience, and they design the buttons, icons, and other visual elements that users interact with. This course in Figma for Mobile App Design can help build a foundation in UI design, which is a key skill for UI Designers. The course covers the principles of Material Design, typography, and color theory, all of which are important for creating visually appealing and functional user interfaces.

See salaries and explore the career path for UI Designer

Mobile App Developer

Mobile App Developers design, develop, and maintain mobile applications. They work with designers to create the user interface and functionality of the app, and they write the code that makes the app work. This course in Figma for Mobile App Design can help build a foundation in mobile app design, which is a key skill for Mobile App Developers. The course covers the principles of Material Design, typography, and color theory, all of which are important for creating visually appealing and functional mobile apps.

See salaries and explore the career path for Mobile App Developer

UX Designer

UX Designers create and improve digital user experiences. They research, design, and test user interfaces to make sure they are easy to use and visually appealing. This course in Figma for Mobile App Design can help build a foundation in user interface design, which is a key skill for UX Designers. The course covers the principles of Material Design, typography, and color theory, all of which are important for creating effective and engaging mobile app experiences.

See salaries and explore the career path for UX Designer

Product Designer

Product Designers are responsible for the overall design and development of a product. They work with engineers, marketers, and other stakeholders to create products that are useful, usable, and desirable. This course in Figma for Mobile App Design can help build a foundation in product design, which is a key skill for Product Designers. The course covers the principles of user interface design, typography, and color theory, all of which are important for creating effective and engaging products.

See salaries and explore the career path for Product Designer

Art Director

Art Directors oversee the visual aspects of a project, such as a magazine, website, or advertising campaign. They work with designers, photographers, and other artists to create a cohesive visual identity for the project. This course in Figma for Mobile App Design can help build a foundation in art direction, which is a key skill for Art Directors. The course covers the principles of typography, color theory, and layout design, all of which are important for creating visually appealing and effective marketing materials.

See salaries and explore the career path for Art Director

Graphic designer

Graphic Designers create visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers. This course in Figma for Mobile App Design can help build a foundation in graphic design, which is a key skill for Graphic Designers. The course covers the principles of typography, color theory, and layout design, all of which are important for creating visually appealing and effective designs.

See salaries and explore the career path for Graphic designer

Web Designer

Web Designers create and maintain websites. They work with clients to determine the goals of the website, and they design the layout, content, and overall visual appearance of the site. This course in Figma for Mobile App Design can help build a foundation in web design, which is a key skill for Web Designers. The course covers the principles of typography, color theory, and layout design, all of which are important for creating effective and engaging websites.

See salaries and explore the career path for Web Designer

Creative Director

Creative Directors lead teams of designers and other creative professionals to develop and execute marketing campaigns. They work with clients to determine the goals of the campaign, and they develop the creative concepts that will be used to achieve those goals. This course in Figma for Mobile App Design can help build a foundation in creative direction, which is a key skill for Creative Directors. The course covers the principles of typography, color theory, and layout design, all of which are important for creating visually appealing and effective marketing campaigns.

See salaries and explore the career path for Creative Director

Marketing Manager

Marketing Managers are responsible for the development and execution of marketing campaigns. They work with creative teams to develop creative concepts, and they manage the budget and timeline for the campaign. This course in Figma for Mobile App Design may be useful for Marketing Managers, as it can help them to understand the principles of user interface design and mobile app development. This knowledge can be helpful when working with creative teams to develop marketing campaigns that are both effective and engaging.

See salaries and explore the career path for Marketing Manager

Product Manager

Product Managers are responsible for the development and launch of a product. They work with engineers, designers, and marketers to create a product that meets the needs of customers. This course in Figma for Mobile App Design may be useful for Product Managers, as it can help them to understand the principles of user interface design and mobile app development. This knowledge can be helpful when working with designers and engineers to create a product that is both useful and user-friendly.

See salaries and explore the career path for Product Manager

Data Analyst

Data Analysts collect, analyze, and interpret data to help businesses make informed decisions. They use statistical methods and data visualization to identify trends and patterns in data. This course in Figma for Mobile App Design may be useful for Data Analysts, as it can help them to understand the principles of user interface design and mobile app development. This knowledge can be helpful when analyzing data on how users interact with mobile apps.

See salaries and explore the career path for Data Analyst

User Researcher

User Researchers study the behavior and needs of users to improve the design and usability of products. They conduct interviews, surveys, and other research methods to gather data about how users interact with products. This course in Figma for Mobile App Design may be useful for User Researchers, as it can help them to understand the principles of user interface design and mobile app development. This knowledge can be helpful when conducting research on how users interact with mobile apps.

See salaries and explore the career path for User Researcher

Technical Writer

Technical Writers create documentation for software and other technical products. They work with engineers and product managers to create documentation that is clear and easy to understand. This course in Figma for Mobile App Design may be useful for Technical Writers, as it can help them to understand the principles of user interface design and mobile app development. This knowledge can be helpful when creating documentation for mobile apps.

See salaries and explore the career path for Technical Writer

Instructional Designer

Instructional Designers create and develop educational materials. They work with subject matter experts to create materials that are engaging and effective. This course in Figma for Mobile App Design may be useful for Instructional Designers, as it can help them to understand the principles of user interface design and mobile app development. This knowledge can be helpful when creating educational materials that are both engaging and effective.

See salaries and explore the career path for Instructional Designer

Software Engineer

Software Engineers design, develop, and maintain software applications. They work with product managers and designers to create software that meets the needs of users. This course in Figma for Mobile App Design may be useful for Software Engineers, as it can help them to understand the principles of user interface design and mobile app development. This knowledge can be helpful when developing software that is both useful and user-friendly.

See salaries and explore the career path for Software Engineer