Complete Figma App Design Course – UX and UI Design [2024]

Course Curriculum

Chapter 1: Warm welcome

Lecture 1: How much do you earn as a UI designer?

Lecture 2: What are my chances of getting a job after this course?

Lecture 3: The problem with other courses

Lecture 4: Different working models explained

Lecture 5: What do you get in this course?

Lecture 6: What is UX and what is UI design?

Lecture 7: The History of UI and UX Design

Lecture 8: Neuromorphis vs. Flat Design

Lecture 9: Why is mobile app design more relevant than web design?

Lecture 10: What is native app development?

Lecture 11: Why we need to evolve as designers

Lecture 12: Which devices can you do UI design for?

Chapter 2: App Basics

Lecture 1: What makes app design special?

Lecture 2: Microinteractions

Lecture 3: Current app trends

Lecture 4: Heatmaps

Lecture 5: What is Atomic Design and why should you use it?

Lecture 6: System Typography

Lecture 7: What is eye tracking?

Lecture 8: Book recommendations

Lecture 9: What is accessibility?

Lecture 10: Which areas of a smartphone are particularly important?

Lecture 11: Typical iOS icons, Android icons and custom icons

Lecture 12: Touch ID and Face ID

Lecture 13: What is a MVP?

Chapter 3: All about components

Lecture 1: What is a Toggle?

Lecture 2: What is a Button?

Lecture 3: What is a Icon-Button?

Lecture 4: What is a Top-Navigation?

Lecture 5: What is a Message?

Lecture 6: What is a Menu?

Lecture 7: What is a Avatar?

Lecture 8: What is a Notification?

Lecture 9: What is a Input-Field?

Lecture 10: What is a Bottom-Navigation?

Lecture 11: What is a Page-Indicator?

Lecture 12: What is a Line-Item?

Lecture 13: What is a Badge?

Lecture 14: What is a Chip?

Lecture 15: What is a Segmented-Control?

Lecture 16: What is a Tab-Control?

Lecture 17: What is a Coach-Mark?

Lecture 18: What is a Tooltip?

Lecture 19: What is a Card?

Lecture 20: What is a Loading-State?

Lecture 21: What is a Keyboard?

Lecture 22: What is the Status-Bar?

Lecture 23: What is a Home Indicator?

Lecture 24: What is a Alert?

Chapter 4: Design Basics

Lecture 1: What programs do you use?

Lecture 2: What is mobbin.com?

Lecture 3: What is the 4 Pixel Grid System?

Lecture 4: What is Radius?

Lecture 5: What is Typography?

Lecture 6: How do you create accessible colors?

Lecture 7: What is a Shadow?

Lecture 8: What is a Illustration?

Lecture 9: What is a App-Icon?

Chapter 5: Make Apps in Figma

Lecture 1: Create a new Project in Figma

Lecture 2: Basic Tools – top

Lecture 3: Basic Tools – left side

Lecture 4: Basic Tools – right side

Lecture 5: Position, Size, Rotation and Corner Radius

Lecture 6: Define colors

Lecture 7: Define border

Lecture 8: Blur Effect

Lecture 9: Export

Lecture 10: Constraints and Sticky Nav

Lecture 11: Defining Drop/Inner Shadow

Lecture 12: Gradient Styles

Lecture 13: Color Styles

Lecture 14: Creating Image Backgrounds

Lecture 15: Masks / Subtract Selection

Lecture 16: Booleans

Lecture 17: Vector Mode

Lecture 18: Creating a layout grid

Lecture 19: Auto Layout

Lecture 20: Advance auto layout

Lecture 21: Fonts and Styles

Lecture 22: Set Text Styles

Lecture 23: Components

Lecture 24: Variants

Lecture 25: Nested instances

Lecture 26: Text property

Lecture 27: Boolean property

Lecture 28: Instance property

Lecture 29: Tokens Numbers

Lecture 30: Tokens Color

Lecture 31: Dark Mode with Selection Colors

Lecture 32: Set Team Library

Lecture 33: Ellipse Arc Circle

Lecture 34: hug content and resizing

Lecture 35: figma sections

Lecture 36: resize layers

Lecture 37: view layer outlines