Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Material Design 3 in Figma | Most Practical UI Design Guide

Name: Material Design 3 in Figma | Most Practical UI Design Guide
Rating: 4.5 (9 reviews)

Learn Google’s Material Design 3 in Figma and understand UI basics including colors components and layout.

Created by桑井康行 (Yasuyuki Kuwai)

Last updated 11/2025

English

English [Auto],

What you'll learn

Understand the principles and philosophy behind Material Design 3
Apply color roles, tones, and elevation to create clear visual hierarchy
Build UI screens in Figma using the Material 3 Design Kit
Select and configure components while considering usability and structure
Use Material 3 Expressive to explore flexible and visually rich styles
Design clean modern interfaces with consistency and accessibility in mind
Make informed design decisions rather than relying on intuition alone

Course content

9 sections • 55 lectures • 1h 57m total length

Introduction1:42
Material Design Concepts1:50
Explore the core ideas of material design, the open-source system from Google, and a design tokens based approach that ensures consistency across platforms with Figma plugins and Flutter.
Extremely High Versatility1:24
Weak Points of Material Design1:28
What You'll Learn in This Course0:58
Explore the Material Design Website1:56
Explore the m3.material.io site to learn practical basics in styles and components, including typography, type scales, and the floating action button (fab).

Key Points of Color2:14
Introducing the Material Theme Builder1:47
Basic Colors Primary, Secondary, Tertiary1:20
Learn to choose colors by role, using primary for key components, secondary for subtle UI, and tertiary for balance, with variations such as on primary and primary container.
14 Tones by Adjusting Brightness2:58
How to Find Colors Used in Components2:37
Unique Color Terms3:21
Ensure Color Contrast3:10
Ensure readable interfaces by applying WCAG contrast standards, using a color contrast checker to verify foreground and background ratios, and leveraging material design color pairs to meet readability targets.

Key Points of Elevation2:09
Six Elevation Levels (0–5)1:00
Explore six elevation levels in Material Design, 0–5, and see how z-axis positioning and transient elevation on hover or tap convey hierarchy in Figma.
Details of Elevation Levels1:37
Material Design Website1:22
Three Ways to Show Elevation1:20
Explore how Material Design expresses elevation through tonal difference, shadows, and scrim to create depth for interface elements.
When to Use Shadows — Keep Them Minimal1:05

Key Points of Buttons1:34
Common Buttons — Five Basic Types2:24
Three Types of FAB Floating Action Button2:26
Explore the three fab types—standard, extended, and menu—and see how the floating action button emphasizes the app’s primary action, appears above content, and reveals related actions with icons and labels.
Icon buttons, Split buttons, Button groups1:58
Button Hierarchy1:07
Creating Contrast Between Buttons0:58
Arrange multiple buttons on the same screen with visual priority, placing the most important action on the right. Use horizontal layouts and combinations like filled, text, and outlined.
Six Visual States of a Button2:11
Comfortable Button Size1:18

Key Points of Material 3 Expressive2:07
Material 3 Expressive uses motion, color, and shape to convey emotion and personality. Delightful, unique, and complex guide expressive interfaces with joyful motion, expanded typography, and dynamic components.
Motion Physics System2:02
Explore material 3 expressive motion, contrasting with standard motion, featuring spring-like overshoot and light elastic responses shaped by stiffness, damping, and initial velocity.
Shape in Material 3 Expressive2:12
Explore how shapes in Material 3 Expressive connect emotion, motion, and structure to create a living, responsive interface that communicates activity and state.
New Expressive Component2:45

Overview of Figma Material 3 Design Kit1:33
Opening Material 3 Design Kit2:13
Open Figma, locate the Material 3 Design Kit in the community, and make a copy to explore buttons, cards, typography, and color guidance within the kit.
Basic Usage of Figma5:29
Changing Color and Typography4:50
Adding Example Component and Layout Guide2:15
Adding App Bar1:27
Learn to add the app bar, status bar, and bottom navigation in Figma, then configure trailing icons, bookmark and more vertical, for a Material Design 3 UI.
Creating Header with Auto Layout5:22
Create a top header by arranging a 136 by 136 main image with 28 radius, headline and supporting text in proper typography, plus a download button, all via auto layout.
Adding Text Areas2:37
Creating List Item Component6:00
Adding Navigation Bar1:49
Final Review and Completion0:45

Requirements

Suitable even if you are new to UI design
Basic familiarity with Figma will make learning smoother, but it is not required
A free Figma account is enough to follow the course content

Description

Material Design is Google’s official design guideline for building intuitive and consistent digital experiences.
It provides a clear system for layout, spacing, color, typography, and component behavior, making it easier to create structured and user-friendly interfaces. However, Material Design is extensive, and understanding it can be challenging without prior knowledge or hands-on guidance.

In this course, we explain key concepts such as design structure, component logic, color roles, and visual hierarchy so you can apply them confidently when building UI in Figma.

This course explains Google’s Material Design 3 guideline clearly and practically. You will learn the concepts behind Material Design and how to apply them while building UI in Figma. We also cover Material 3 Expressive, color roles, component behavior, and layout thinking that supports intuitive interface design.

■ What this course offers

This course is designed so you can learn through clear steps and hands-on practice.

Easy-to-understand explanations of Material Design 3
UI design exercises using Figma
Practical workflow with the Material 3 Design Kit
Three key points per topic for efficient progress
Visual reasoning that improves clarity and usability

■ You will learn

These outcomes connect directly to UI creation and design thinking.

Material Design principles and how to apply them
Color systems roles tones and elevation
How to build UI in Figma using Material 3 guidelines
A practical foundation for clean modern interface design
Material 3 Expressive for flexible and diverse visual styles

By the end of this course you will understand how Material Design 3 works and be able to apply its guidelines confidently in your own design workflow.

Please review the curriculum before enrollment.

This course uses AI tools to support part of the written content.

The narration is presented using AI-generated voice.

All content has been reviewed and refined by the instructor to ensure clarity and accuracy.

Who this course is for:

Learners who want to understand UI design fundamentals
Those who tried reading Material Design documentation but found it difficult to follow
Designers who want to apply Material Design 3 more effectively in Figma
Beginners who prefer clear step-by-step explanations rather than dense theory

Material Design 3 in Figma | Most Practical UI Design Guide

What you'll learn

Explore related topics

Course content

Introduction6 lectures • 9min

Basic Knowledge3 lectures • 6min

Components5 lectures • 12min

Color7 lectures • 17min

Elevation6 lectures • 9min

Typography5 lectures • 7min

Buttons8 lectures • 14min

Material 3 Expressive4 lectures • 9min

Figma Material 3 Design Kit11 lectures • 34min

Requirements

Description

Who this course is for: