Introduction
In our last lesson, we analyzed the core philosophy of Google's Material Design, contrasting its expressive, metaphor-driven approach with Apple's Human Interface Guidelines. You learned about the foundational principles of Material Design 3 (M3), including tonal elevation, dynamic color, and its unique systems for typography and shape.
Today, we move from theory to practice. You will apply those M3 principles directly in Figma to design a complete Android app screen. This hands-on exercise is designed to build your practical skills and confidence in tackling Android projects, a massive segment of the freelance market. Your analytical mindset from finance will be a great asset here, as you'll be working within the structured, component-based framework of the Material 3 Design Kit.
Part 1: Setting Up Your Android Design Environment
Before we start building, let's get our tools and resources in order. For any professional Android project, you'll start with the official Material 3 Design Kit.
How I built a design system in Figma using MUI components - Anima
This article from the Anima blog explains the value of using an open-source library like Material UI (which is based on Material Design) and shows how to get the free version for Figma.
Read the first two sections, "Select an open source library" and "Install the UI kit in Figma." The key takeaway is to duplicate the free Material 3 Design Kit from the Figma Community. This kit contains all the pre-built components (buttons, app bars, cards, etc.) you'll need, saving you countless hours and ensuring your design adheres to Google's guidelines.
Once you have the Material 3 Design Kit duplicated into your Figma files, create a new design file for today's project. Inside this new file, create a new frame by pressing F and selecting Android Large from the preset options in the right-hand panel. This will give you the standard canvas for a typical Android phone.
Part 2: Walkthrough: Designing a Travel App Screen
We will now build a travel app's "details" screen step-by-step. This project will give you practical experience using M3 components, applying styles, and structuring a layout according to Material Design conventions.
The following video from DesignCode provides a comprehensive walkthrough. We'll watch it in segments, and I'll ask you to build along in your own Figma file.
UI Design a Travel app for Android in Figma
This video, "UI Design a Travel app for Android in Figma," will be our guide. We'll start by reviewing the key principles and resources needed.
First, watch this introductory segment to refresh your memory on M3 and see the resources the designer uses. M3 Principles Recap: The instructor gives a quick overview of Material Design's philosophy. Essential Resources: Pay attention to the tools mentioned: the Roboto font (Android's default), the Material 3 Design Kit, and the Material Design Icons library. You should already have the design kit, and you can find the icon set in the Figma Community as well. The Unsplash plugin is also a great tool for adding placeholder images quickly.
Now that you have your frame and resources ready, let's start building the screen.
Step 1: Base Structure & Top App Bar
Every screen needs its basic scaffolding. For Android, this includes the system's status bar at the top and the navigation indicator at the bottom. We'll pull these directly from the M3 Design Kit.
UI Design a Travel app for Android in Figma
Let's build the screen's foundation and the top app bar.
Follow along with the video to build the initial structure. System Bars: Watch from here to see how to copy the Status Bar and Home Indicator from the M3 kit into your frame. These components provide context and should be part of any full-screen design. Top App Bar: Continue from this point to build the Top App Bar. Notice how the designer uses a pre-built component and customizes it. This is a standard M3 component used for navigation and actions at the top of the screen. You'll detach the instance to replace the default icons with new ones from the Material Design Icons library.
Step 2: Creating Visual Hierarchy with an Image, Title, and Rating
With the navigation in place, we'll add the main content. This section demonstrates how Material Design uses size, spacing, and containment to create a clear hierarchy.
UI Design a Travel app for Android in Figma
Now, let's add the primary content elements.
Follow along to create the hero image and the title block. Main Image: Watch from this section to add a large image using a rectangle and the Unsplash plugin. Title & Rating: Continue from here. Pay close attention to how Auto Layout is used to group the star icon and text, add padding, and create a contained "pill" shape. This is a perfect example of applying the M3 principles of shape (corner radius) and layout (using Auto Layout for grouping and spacing). The text styles used reflect the M3 typography scale we discussed in the last lesson (e.g., a Title style for "BALI" and a Label style for the rating).
Step 3: Building a Component-driven Menu and Image List
Next, we'll create a set of filter buttons and a list of interactive cards. This part highlights two core M3 concepts: components for consistency and elevation for depth.
UI Design a Travel app for Android in Figma
Let's create the menu buttons and the image list.
Follow the video to build these sections. Menu Buttons: Watch from here. The designer starts with a standard M3 button component and customizes it. By creating one styled button and duplicating it, you ensure consistency. The different visual styles for the selected ("Hotel") and unselected states ("Food," "Activities") are a key part of interaction design. Image List & Elevation: Continue from this segment. Here, the designer creates image cards. Notice the use of a drop shadow under the main card. This is an application of elevation, making the component appear to float above the background. While M3 also uses tonal elevation (adding a color tint), drop shadows are still a common and clear way to show depth. The dimmed, smaller card demonstrates creating a "disabled" or secondary state.
Step 4: Adding Supporting Text and a Final Call-to-Action
To finish the screen, we'll add a description and a prominent "Continue" button. This reinforces the layout principles and shows how to guide the user toward an action.
UI Design a Travel app for Android in Figma
Finally, let's add the description and the main action button.
Watch from this section to complete the screen layout. Supporting Text: The designer adds a title and description, using Auto Layout to manage the spacing within the text block and padding relative to the screen edges. This systematic approach to spacing is fundamental to creating clean, organized layouts. Action Button: A final button with an icon is added. This is a Call-to-Action (CTA). Its prominent placement and color draw the user's eye and guide them to the next step. Again, this starts from a base M3 component.
By completing this walkthrough, you have successfully designed a realistic Android app screen, applying core Material Design 3 principles in a practical, hands-on way.
Part 3: A Glimpse into Adaptive Design
The screen you just designed is for a compact (phone-sized) display. A key strength of Material Design is its guidance on how to adapt layouts for larger screens like tablets and desktops. You don't need to master this today, but it's important to be aware of the concepts.
Design an Adaptive Layout with Material Design - Android Developers
This codelab from Google's Android Developers team introduces the core concepts of adaptive design.
Read the following sections to get a high-level overview: "What is Adaptive Design and why should I use it?": Understand the goal of creating coherent experiences across screen sizes. "Understanding Layout": Familiarize yourself with the three window size classes (compact, medium, expanded). This is how Material Design categorizes screen sizes. "Canonical layouts": Skim through the three examples: Feed, List-Detail, and Supporting Pane. These are common, reusable layout patterns for larger screens.
This idea of adapting your design to different breakpoints is a crucial skill for a versatile freelance designer and something we will revisit later in the course.
Conclusion
Congratulations! You've successfully moved from analyzing Material Design principles to applying them. You've set up a professional design file, used the official Material 3 Design Kit to build a screen, and practiced applying M3's rules for layout, typography, and components.
Key Takeaways:
- Start with the Kit: The Material 3 Design Kit for Figma is the essential starting point for any Android design project.
- Components are Building Blocks: You can build complex screens quickly and consistently by using and customizing pre-built M3 components like App Bars, Buttons, and Cards.
- Auto Layout is Your Best Friend: Use Auto Layout extensively in Figma to manage spacing, padding, and alignment according to Material Design's structured layout principles.
- Elevation Creates Depth: Use shadows or tonal color to lift components off the page and create a clear visual hierarchy.
- Design for the System: Always include standard system elements like the Status Bar and Home Indicator for a realistic and developer-ready mockup.
Preview of the Next Lesson:
You've now designed a screen for both iOS and Android. But what happens when you need to design a feature for both platforms? In the next lesson, we will directly compare iOS and Android conventions for key patterns like navigation, dialogs, and controls. This will equip you to make platform-appropriate design decisions and create truly native-feeling experiences for your users.