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.

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.

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.

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.

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.

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

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

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 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.

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 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.

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.

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.

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 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.

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 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 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.

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.

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.

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.

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.