Design a food delivery app through a hands-on, real-world project that teaches standard mobile layouts and cost-aware design decisions to keep projects within budget.

Explore a food delivery app brief by integrating wireframes and documentation to define audience, value, and core screens. Design listing, rating, and multi-flow interactions, including skip registration and location choices.

Analyze the app’s competitors in the food delivery space to understand requirements and inspire design. Compare live, takeaway, and menu apps for layout and interactions to inform your Figma workflow.

Analyze mobile app competition by comparing typography, color, hierarchy, and card-based listings; assess delivery-time emphasis, icons, and branding across Deliveroo and Foodpanda to inform your design, using one beautiful color.

Discover how to set up a new Figma project, create the first screen with a logo, a location field, and a submit button using frames and auto layout.

Set up the home screen foundation in Figma by duplicating screens, rendering a 720 by 48 status bar, building action bar with city filter and search, and arranging restaurant cards.

Design the restaurant details screen with fixed breakfast, lunch, and dinner tabs, replacing the title with Maggiore pizza delivery, and present product cards with image, title, description, price, and add-to-cart.

Create and compare multiple design ideas side by side to establish a cohesive app with a deliberate color scheme, iterating until you identify the best version.

Design the location screen in Figma using a full-bleed background photo with a 50% overlay. Test top-view food images and logo/CTA styling for a bold, modern look.

Design the restaurant listing screen in Figma, comparing white and light gray backgrounds, and establish a clear hierarchy of title, rating, delivery time, and tags.

Set up the status bar and action bar in context, apply a drop shadow and 15% opacity, then center San Francisco text and 40-pixel icons with proper alignment.

Explore multiple card variants in a Figma mobile app design course by duplicating screens, adjusting background, fills, corner radii, and text placement using essential design principles.

Explore variations of a mobile app card with tags, delivery label, auto layout, 20px padding, rounded corners, and orange accents for white text.

Refine the final restaurant listing variations in Figma by removing auto layout, adjusting spacing and placement of delivery time, icons, and tags for a polished, responsive design.

Explore action bar design options in a mobile app, testing photo-backed and solid header strategies, weighing white text legibility and keeping focus beneath the header.

Update the restaurant details screen with white rectangles, a drop shadow for the tabs, black text, and SVG icons, preparing two designs—replica and original—and a scrollable tab option.

Explore variations for the restaurant details screen in a Figma for mobile app design course, adjusting the cover photo, action bar, rating, and implementing scrollable tabs per material design.

Compare sans serif typefaces in Figma across three screens using Google Fonts to judge weight variety, including at least two weights, file size, and personality for a sharp mobile design.

Define and refine your app’s look by establishing a color scheme and text styles in Figma, then apply them across screens and test changes in real time.

Learn practical speed in Figma by replacing dummy content with real assets, adjusting images, typography, colors, and spacing, and applying character styles to build realistic mobile app screens.

Finish first screen by designing the location screen in Figma, placing a 180 by 180 pure white icon 80 pixels from the top, and using orange for the main action.

Design a ghost button with no fill and a white 3px border, then apply a black fill at 30% opacity to boost contrast and ensure alignment with the orange button.

Refine a real-world food delivery app by advancing wireframes, layout, typography, color schemes, and assets while solving screen real estate for restaurants and dishes.

Explore material design as Google's practical design language that makes apps beautiful, usable, and meaningful. Learn to apply guidelines while deviating when needed to achieve real results.

Explore the building blocks of Android apps through an overview of status bars, app bars, tabs, navigation drawers, cards, dialogs, snack bars, buttons, FABs, and text fields.

Choose a scalable artboard approach for Android apps by using a 720 artboard as a standard, with proportional scaling from 360 origins to keep vector-based elements sharp.

Apply material design specs to set component sizes quickly. Use examples like top bar 112 px and 96 px tabs to build a solid design foundation.

Learn to design the action bar for mobile apps, choosing center or left-aligned layouts, using a hamburger menu, back arrow, and up to three right icons, with material design guidelines.

Master how to organize app content with tabs by preserving hierarchy and choosing fixed or scrollable layouts. Select text, icon, or text plus icon options with clear sizing.

Design versatile, independent content cards for mobile apps, from video and text layouts to icons and media variants. Apply typography, spacing, and aspect ratios to keep cards legible and uncluttered.

Design Android buttons with a single floating action button or extended FAB for key actions, and a hierarchy of regular buttons—filled, outline, and text—using clear size, labels, and placement.

Design text fields like a pro by detailing label, input area, activation indicator, and icons; explore active and inactive states, error cues, and styling for expressive Android app forms.

Master mobile app typography by clarifying typeface and font concepts, line height, letter spacing, and weights, across Android and iOS, using Google Fonts and H1–H4 hierarchy.

discover seven typography rules to boost legibility in mobile apps, including typeface selection, contrast, sizing, left alignment, paragraph structure, and consistent line height.

Learn how top apps use typography to balance neutral global appeal. See Netflix, Duolingo, Momondo examples, and learn when to license or create a custom typeface.

Identify and match fonts from apps using Photoshop, then set ideal font sizes for action bars, headlines, and body text with recommended line heights to ensure readable mobile typography.

Master font pairing for mobile app design by focusing on contrast, context, and size; pair serif with sans serif and choose distinct typefaces for your audience.

Explore color in mobile app design, from hex codes and gradients to primary and secondary colors, and learn practical, code-friendly guidelines for scalable, consistent styling.

Learn how to choose color schemes based on your target audience, considering cultural meanings and context to avoid misinterpretations; explore red, blue, orange, pink, and purple meanings for apps.

Master color contrast fundamentals for mobile app design by applying inverted and regular contrast to action bars, text, and UI elements, and using contrast ratio dot com to verify readability.

Analyze how top apps use color, from monochromatic branding to two-color palettes and inverted contrast. Apply practical guidelines on hierarchy, white space, and avoiding three-color clutter with real app examples.

Explore tools for creating great color schemes, including Google's color tool, Adobe color, and brand color references with presets, custom hex inputs, and primary/secondary color ideas for branding.

Apply universal design principles—symmetry, typography, spacing, contrast, and hierarchy—to iOS apps, guided by material design, while balancing platform conventions and realistic development budgets.

Design iOS apps using a 1x baseline of 375 by 667, treat the notch as inconsequential, and rely on vector assets; share resources via a link rather than sliced files.

Explore how pixels per inch (PPI) and points shape design across devices from 1x to 3x, explaining retina displays, resource scaling, and diminishing returns of ultra-high PPI.

Compare iOS and Android app design through WhatsApp and Netflix examples, highlighting platform-specific components, icon styles, and navigation patterns while following the design principles and material design guidelines.

Explore why the official iOS UI kit is recommended for reliable colors, typography, and sizing, while avoiding costly third-party kits and customization that conflicts with user expectations.

Learn how to size and color the iOS status bar, with or without the notch, using points and code-driven techniques aligned with the navigation bar.

Explore how iOS top areas vary in height from 64 to 140 points with titles. Follow rules: never mix icons with text, limit to three icons, and use 17-point typography.

Explore the iOS tab bar design, its 49-point height and visible home indicator. Use active color and icon fill, keep labels minimal, and align with Android differences for clarity.

Explore iOS text fields across designs, labels, placeholders, icons, and contrast to create clear, consistent, and usable forms. Learn practical patterns for spacing, emphasis, dividers, and keyboard types.

Explore essential iOS controls: segmented controls, steppers, switches, and pickers, and learn sizing, placement, and UI kit usage, while avoiding Android-style dropdowns.

Learn to run Android apps on Mac OS using an emulator, such as Gennie Motion, with VirtualBox setup, APK installation, and device simulation for design inspiration.

Avoid relying on the official iOS typeface and instead choose a distinctive font that matches your app's vibe and stands out.

Master iOS components such as steppers, switches, segmented controls, and action sheets. Design at 1x and use the official UI kit to size elements and apply solid design principles.

In Figma for mobile app design, create login and register screens with a tabbed layout, lines, and headings, and use master components and instances to manage reusable fields and styles.

Explore building a registration form in Figma using auto layout, components, and instances; add labels and asterisk indicators, and use boolean properties to toggle label visibility.

Utilize instance swap in Figma to swap icons in a form field, enable show icon and label, and adjust auto layout with packed and space between for clean alignment.

Increase speed in Figma by duplicating fields, resizing to 656, and maintaining 40-pixel spacing while using components and text properties to streamline label and hint edits.

Learn to build a reusable action bar by turning icons into components, using instance swaps, and applying boolean properties like show title and show icon right.

Create and manage component variants in Figma, switching between light and dark, using assets panel and resources frame, and applying active or disabled states.

Learn to speed up Figma workflows for mobile apps by turning icons into components with auto layout and variants, testing color and label states, and streamlining login and register interface.

Apply consistent spacing, clarity, contrast, and symmetry in mobile form design in figma, building add address and my information screens with fields, hints, dropdowns, and a create address button.

Design a modern left menu in figma, with an orange header, logo, and user details, and a centered icon list for orders, addresses, and payment methods, and logout.

Create interactive checkboxes in a filter panel using Figma, defining checked and unchecked variants, spacing, and colors for cuisine type and food type filters, with clear and show only actions.

Learn to design and configure toggle switches in Figma, including creating rounded rectangles and circles, applying colors and drop shadows, using auto layout for aligned rows, and building on/off variants.

Design reusable payment methods cards as a Figma component, featuring a primary default card, an orange edit action, and a bottom add card button, with clear typography and spacing.

Design a credit card screen in Figma with four fields (card number, name, expiration, CVV), a live card preview, and concise copy for diverse audiences.

Design a beautiful reviews page in Figma by adapting the login screen, splitting the wireframe for address, and building a polished review module with positive and negative vote visuals.

Style a review card in Figma with a small blue title, gray date and author, and blue body text, plus a thumbs-up visual built as reusable components.

Go the extra mile by prioritizing client value over endless variants, and leverage clear communication and design decisions that improve hierarchy, conversion rates, and revenue through data-driven changes.

design the checkout screen for a mobile app in a non-logged-in state, featuring a top login prompt, a disabled bottom button, and cart list with quantity, dish name, and price.

Design the checkout screen in Figma — step two — using auto layout, color styles, and text adjustments to present subtotal, delivery fee, voucher, and grand total.

Master variants in the checkout screen to adjust right text color and icons while maintaining a frictionless flow that reveals delivery time, address, contact, and payment fields.

Think ahead for the prototype by building step-by-step screen variants and interactive flows, revealing gaps and protecting against client changes, while planning for portfolio worth and time.

Reflect on the end-to-end Figma project, finalize fonts, colors, and components, fine-tune field sizes and spacing, then share your live contact us page prototype via a link.

In this live session, the instructor freestyles in Figma to experiment with different looks for a mobile app, adjusting buttons, auto layout, colors, borders, and icons via the assets panel.

Master popups and modals in Figma prototypes by using open overlay, avoiding fills, and manually positioning overlays for faster, user-friendly flows with outside-click closure.

Prototype an interactive drop-down in Figma by building hover and selected states with variants and auto layout, then link overlays to illustrate flow for clients and developers.

Learners practice creating an interactive prototype to reveal missing screens and logical flow issues for a client and coding team, linking gaps to overlays and seeking real-world feedback.

Choose to invest in your education or build a design-driven business; discover unlimited designs at a fixed price that boost trust, conversions, and your brand.