One & Only Mobile App UI/UX Design Masterclass with Figma

master the figma canvas navigation by using the spacebar to pan, and control plus mouse wheel to zoom in or out, moving with the hand tool.

Master the move and scale tools in Figma with shortcuts v and k, moving groups, frames, and components, and scaling elements proportionally, including text with the scale tool.

Learn to use the frame tool as a container that organizes and nests elements and frames, employ templates like iPhone and desktop, and adjust size, color, and properties.

Learn how the slice tool marks a specific export area on the canvas, exporting only elements within the slice bounds and previewing the result before exporting as PNG.

Explore Figma shape tools: rectangle, line, ellipse, polygon, and star. Use fills, strokes, rotation, and scaling shortcuts, including flattening shapes for export-ready designs.

Master the pen and pencil tools in Figma to create custom vector shapes with anchor points, handles, and precise paths, and learn practical tips for shaping and editing.

Explore the arc tool inside the ellipse tool to create arc-based shapes, adjusting sweep angle, start angle, and ratio to craft pie charts and progress bars in Figma.

Learn how to use boolean operations in Figma to combine shapes with union, subtract, intersect, and exclude, creating new shapes from overlaps and non-overlaps.

Master the layers panel to manage canvas elements, including nested frames with distinct icons, lock and hide controls, and quick keyboard shortcuts to switch panels and reorder layers.

Measure distances between elements and anchor points in a frame by holding the Alt key and hovering, with options to measure inside nested frames using Ctrl or the layers panel.

Learn to set a custom thumbnail in Figma, see how the thumbnail auto-updates with canvas frames, and restore the default thumbnail when needed.

Explore the image tool in Figma, import PNG, JPEG, WebP, and GIF assets, and apply images as fills on shapes while noting 4096-pixel downsizing.

Learn to use images as fills by toggling between image and solid, applying blend modes, and using fill, fit, crop, tile, and rotation to control the image in shapes.

Discover several methods to add images to Figma, including the place image shortcut, copying and pasting into shapes, and drag-and-drop of image assets.

Learn to apply image effects in Figma using blend modes on shapes and on the image itself, then fine-tune exposure, contrast, saturation, temperature, tint, highlights, and shadows—without needing Photoshop.

Discover a trick to import multiple images at once into circular placeholders on a mobile app UI canvas. Use multi-select shortcuts and be mindful of image order.

Learn to create masks in figma that reveal parts of multiple objects, using circles, text, and images behind layers, with right-click or the top bar button.

Learn to add and style text with the text tool, using typing or drag-to-create approaches, and adjust font, size, line height, tracking, and alignment.

Learn to create and customize formatted lists in Figma, using bullet and numbered lists, auto numbering, and text-to-list conversion, including nesting up to five levels.

Enable the touch keyboard button on Windows, open the emoji menu, and insert emojis into text by selecting categories and clicking emojis.

Convert your text into a vector in Figma, flatten to vector paths, and edit anchor points to customize fonts for logos or watermarks.

Learn to embed Font Awesome icons in text in Figma by copying icons from the cheat sheet and pasting them as solid glyphs, then colorize and convert words into icons.

Create and insert links in text using Figma to navigate between frames and pages, link external URLs, and manage links in prototypes.

Define and reuse text styles in Figma to save font family, size, weight, line height, and spacing, then apply across projects with local and library styles.

Learn how groups in Figma are simple containers for multiple elements, unlike frames with auto layout. Use shortcuts to group, duplicate, and convert between groups and frames.

Learn how the smart selection feature arranges elements with equal spacing on X or Y axis, usable within groups, frames, or without a group, and how tidy up restores spacing.

Enable the ruler with Shift+R, create vertical and horizontal guides in Figma, and snap elements to them to maintain consistent padding and spacing, with guides hidden on export.

Master constraints in Figma to control how layers resize with frames, using top, left, right, center, and scale for a responsive top bar across devices.

Apply layout grids in Figma to align objects and create a visual structure across frames and devices. Use grids, columns, and rows with margins and constraints to ensure consistent UI.

Learn to position elements precisely using small and big nudge values—one pixel and ten pixels—via arrow keys (shift for big nudges), with grids and customizable preferences.

Explore how auto layout in frames and components adapts to content, with horizontal and vertical directions, padding, spacing, and fill container behavior, while managing constraints, absolute positioning, and truncation.

Explore outlines mode in Figma to view an x-ray of your canvas, inspect every layer, font, and spacing, and easily reveal or hide hidden elements using the Shift+O shortcut.

Learn to create and reuse color styles in Figma, manage local and library styles, use the color style picker, name and organize with folders, and publish to a team library.

Create and organize text styles in Figma, establishing header, subtitle, body, and small body with set font sizes, then apply them quickly with one click, while color styles remain separate.

Apply text and color styles across your project and use the design panel to update a single style that instantly reflects on all elements, including box shadow and grid styles.

Create reusable components in figma, define a main component and its instances, and update all instances from the main component to ensure consistent design across your project.

Learn to convert a text layer into a text property on a component, enabling text changes in instances without breaking main component, and manage width with fixed vs high content.

Discover how a boolean property controls the visibility of a layer in a button component, enabling show or hide of an optional icon with a default true value.

Learn to add an instance swap property to a button component to swap between multiple icon components, such as check circle, home, and settings, using a new icon property.

Learn to build and manage component variants in Figma using variance and a naming convention to represent enabled and disabled states, with icon and text properties across button designs.

Learn to use the spotlight feature in Figma to invite collaborators, share links, and let them follow your canvas view as you guide your audience with a cursor and audio.

Explore cursor chat in Figma for quick, temporary messages during collaboration. Use the slash shortcut to send short notes that disappear and aren’t saved, while viewers inspect the file.

Master Figma comments to collaborate effectively, respond to feedback, and iterate faster by leaving position-specific notes on the canvas, using the add comment tool and replies.

Learn to use Google Fonts to select and preview fonts for your project, exploring categories, languages, and properties like thickness, slant, and width, then import the font family into Figma.

Discover essential color resources and palettes for your mobile app design. Explore Color Hunt, The Colors site, material design color, and ui gradient, then save and apply gradients in Figma.

Explore vector graphics resources for icons, illustrations, and stock images across free and premium sites. Identify assets from Free Pick, Flat Icon, Draw, and Unsplash to support Figma design workflow.

Explore ten useful figma plugins that speed up your design workflow, including Rory Splice, Auto Documentation, Pattern Hero, Chart Line, Content Reel, Isometric, Map Cycle, and UI Gradient.

Explore the concept of design systems as reusable components guided by standards, comparing material design and Apple human interface guidelines, and learn to use official documentation while maintaining creative flexibility.

Learn how to access the tic tac toe project in the Figma community, copy it to your Figma profile, and inspect its UI design, prototype styles, and resources.

Design a color styles palette in Figma, organizing neutral, light theme, and dark theme colors for a tic tac toe mobile app.

Create a typography frame and establish a Roboto-based text system with header, subtitle, and body styles using bold, medium, and regular weights, then apply and organize them with consistent sizing.

Create a splash screen in a mobile app using a custom 412 by 870 frame, centered logo, and a shared color palette with light and dark backgrounds, applied globally.

Design a reusable onboarding component in figma for three screens per theme (light and dark) with distinct icons, header and body text, plus navigation dots, aligning margins and spacing.

Learn to build a responsive onboarding navigation component in Figma by creating three light-theme variants and six total variants with dark theme, naming properties, and applying theme colors.

Design and customize an onboarding content component in Figma, enabling light and dark themes, title and subtitle properties, and nested navigation. Build onboarding steps by swapping instances and adjusting frames.

Create a component set from onboarding images, form variants for steps 1–3, and reuse components across six screens in a dark theme using Figma to accelerate onboarding design.

Design sign-in screen and button component in Figma with Google and Facebook sign-in options, including light and dark themes, icon variants, and responsive button behavior.

Design a preparing screen after sign-in with a centered message and a progress bar showing server connection, secure connection establishment, and creating an account before the home screen.

Design a scalable loading progress component in Figma using a component set with auto layout and constraints. Include four progress states (25/50/75/100%), a text property, and light/dark theme variants.

Design a new preparing screen to handle internet connection losses during sign-in, displaying an informative message and a retry button with a refresh icon for both light and dark themes.

Design the home screen by adding a welcome message and user name, then build a reusable score component showing wins, losses, and draws with responsive dark and light themes.

Design a responsive game history component on the home screen that shows up to five matches with opponent name, date, and result, plus an empty state and light/dark themes.

Design a scoreboard component for the home screen showing five top players by wins. Include numbered entries, a star icon, yellow accents, light and dark variants, and an empty state.

Design a bottom bar navigation with three icons for home, game, and friend list, in light and dark themes, using auto layout in Figma.

Adjust the bottom bar colors for light and dark themes by creating a bottom bar color group, and design a reusable top bar for the game history screen.

Build a game history screen that lists previous tic tac toe matches and add a date input field with a date icon to filter history, supporting light and dark themes.

Import a date picker from the Figma community and tailor it to your design. Adjust variants, fonts, colors, and dark theme for a cohesive mobile UI.

Design the scoreboard screen to display multiple players, with a searchable input field using data and search icons, back navigation, and light/dark theme options for a dynamic user interface.

Create the online players screen with an empty state, featuring a search field and a list of players with online or offline status, plus an invite button.

Design an online players screen with a search for offline players, an invite button, a bottom sheet showing wins, losses, draws, and a friend option, in light and dark themes.

Design an online players screen variant for searching offline players, switch statuses to offline and inactive, enable inviting online players, and integrate a keyboard UI and active input field cues.

Design a small invite button with multiple states on the online player screen in Figma, including pending, accepted, denied, and inactive, while disabling other invites and timing out.

Design a bottom sheet with a dim overlay for online players, showing the selected player's name, status, score, wins, losses, draws, and a blue add‑friend button.

Design the friends screen in the bottom bar with active/inactive states, a search field, and a bottom sheet dialog to remove a friend in light and dark themes.

Design a confirmed dialog component that appears when the user taps remove a friend, offering remove and cancel actions, with light and dark theme variants and configurable title and subtitle.

Design a tic tac toe game board component, featuring nine fields in a centered grid with padding and variants for empty, disabled, and x or o states.

Design a dark theme for the game board by applying colors and strokes to fields, removing inner rectangles, and creating reusable field color styles for enabled and disabled states.

Finish the game screen by managing loading, your turn, please wait, and win/lose/draw states, with play again invites and back button cancel dialogs across dark and light themes.

Explore prototyping in Figma by creating multiple flows on one page to map a user journey, link onboarding, cart, and checkout flows, and organize components, styles, and prototypes.

Design and prototype the onboarding flow for a mobile app, connecting splash to onboarding screens. Use after-delay triggers and various animations to navigate from splash to sign-in with smooth transitions.

Create the second flow by skipping onboarding, linking the splash screen to the sign-in screen after a 1.1 second delay, with optional instant or push animations.

Create two flows for the preparing screen using identical component names to enable smart animation with after-delay transitions; add a network error flow where try again returns to preparing flow.

Implement flow five for the home and game history screens, adjusting button typography, configuring sign-in triggers, integrating a date picker overlay, and enabling drag, smart animate, and back navigation.

Add and connect the scoreboard screen to the home and game history flow, enabling on-click navigation, right-to-left transitions, and a disappearing top bar during scroll with a draggable list.

Design and prototype an online players flow with click triggers, instant navigation, smart animations, online and offline players, bottom sheets with overlays, and invite states like pending, accepted, and denied.

Explore flow seven for the friends screen, including an empty state, bottom sheet with an overlay dialog, and remove a friend action across home, friends, and online players.

Master prototyping a multiplayer game flow in a mobile app using Figma, connecting invite screens, delays, smart animate transitions, and handling game cancellation and replay paths.