The Complete Figma Course – Designing Mobile & Web App UI/UX

Discover Figma, a free web-based design tool that enables real-time team collaboration, comments, and live prototypes on mobile and web. Visit figma.com to sign up in the next lesson.

Sign up for Figma at figma.com, log in or create an account, enter your name and work, and start a team if desired. Preview the app tour and basics.

Navigate the Figma main page, explore started files, and learn to import Sketch, PNG, and JPEG assets into new Figma files while exploring drafts, teams, and help resources.

Learn to create a new file in Figma from the drafts folder, name it, and use autosave, version history, and key menus to manage layers, views, and exports.

Drag your Sketch file into the Figma app to import, review converted elements, and fix missing fonts by reassigning or downloading them, then verify artboards for a successful migration.

Explore the main toolbar in Figma and master move, scale, frames, shapes, and text tools. Learn to share, present, and zoom, navigating the canvas for collaborative design.

Open the properties panel to customize the selected canvas element, adjusting position, size, rotation, border radius, fill, stroke, drop shadow, and export as png, jpeg, svg, or pdf.

Explore the layers panel to organize text and shapes, duplicate with Alt, and master view hierarchy by stacking order; access assets and multi-page Figma files.

Create and organize frames in Figma to represent each page of your app. Choose device sizes like iPhone 11 Pro Max or Google Pixel and use alignment tools for spacing.

Set up and customize layout grids, including column grids (12 columns) and margins, to organize frames for UI. Use rulers and guides to place, measure, and adjust spacing precisely.

Create and customize shapes in Figma using rectangles and ellipses, control proportions with shift, apply fills and gradients, adjust corner radii, strokes, and outline strokes for independence.

Master the pen and pencil tools in Figma to create and edit shapes, snap points, close shapes, fill with color, add points, and refine strokes with rounded joins and corners.

Master boolean operations in Figma to combine, subtract, intersect, and exclude shapes, creating complex forms and holes for precise UI design.

Use boolean groups and exclude selection to create a hole by removing a circle from a shape, resize the stroke to 5, center a 28 by 28 circle, preserving styling.

Master alignment tools in Figma to align multiple shapes within a bounding box, using left, center, right, top, and bottom, plus tidy up and distribute spacing.

Design a first full Figma mockup for a client, Clean Kangaroo, outlining signup, login, tutorial, map, payment, and profile pages with current and past orders and pricing.

Discover design inspiration with Mobbin, filtering by device and category to gather travel app screenshots for wireframing. Copy flows into Figma via the Mobbin plugin to inform wireframes and mockups.

Explore how to craft a mobile app wireframe for a laundry service, detailing sign up, address, map, and tab bar navigation across services, past requests, and profile.

Set up a new Figma project, prepare seven mobile frames for an iPhone 11 Pro, rename pages, and build the login UI with email, password, and signup options.

Learn to add a background image and logo to a login page in Figma. Crop and fit images, apply overlays, and perform basic image edits.

Learn to add three icons to a login page in Figma by importing SVG icons from Flaticon, resizing without pixelation, and aligning them with the input fields.

Craft a color scheme for your app by choosing a color palette, ensuring contrast for legibility, and applying hex codes for primary, secondary, and text colors.

Learn to create and apply color styles in Figma, enabling reusable primary, secondary, and accent colors across your user interface, with global color changes.

Design a tutorial page in figma with a blurred background, a white rounded card, and a pop-up title and body text, duplicating three steps with icons.

Create and manage components in Figma to reuse cards across steps, convert groups to master components, create instances, and edit in one place to propagate changes, including detaching when needed.

Create a master button component and populate it with instances across your design, then customize text, color, and typography via overrides, while using reset options to restore the original look.

Master organizing with pages in Figma by creating separate color schemes, component pages, and styles; reuse and rename components across mockups and tutorial cards with enabled and disabled states.

Learn to create button variants in Figma using variance and states like enabled, disabled, and pressed. Explore size variations like large and small and swap instances for developers.

Create button variations by adding an icon option and testing icon placement and sizes in Sigma. Configure variants with a with-icon property, duplicate states, and ensure text aligns left.

Design a payment page in Figma featuring credit card input fields—card number, expiry date, and cvv—along with a bold call-to-action button and a polished layout.

Apply constraints in Figma to create responsive mobile designs that adapt to different frames, constraining elements to left, right, top, bottom, and center.

Apply top, left, right, and bottom constraints to login and tutorial pages to create responsive design; replace background groups with images and center cards, then copy constraints to remaining pages.

Discover how Figma plugins streamline UI design, from inserting maps with mapmaker to syncing text with Google Sheets, and learn to install, manage, and explore popular community plugins.

Complete the map page design by adding a search bar with icons, a save button, and a current location indicator, with refined stroke, shadows, and alignment.

Explore human-first user experience design by applying typography, contrast, spacing, alignment, and consistency to create accessible mobile and web interfaces.

Access premade templates and pre-built components from Apple UI kits and material design to speed your design work; drag into your design and import the sketch version.

Import sketch files in Figma, install Apple fonts for consistent rendering, and build main pages with navigation bars, tab bars, and status bars using reusable UI components.

Design a three-icon tab bar in figma, convert icons to master components and create selected-state variants for profile, requests, and services, then apply primary color to active labels and icons.

Design a mobile request page in Figma with a map area, laundry request tab, and store card, then refine with shadows, blue selection, and a request service button.

Design and implement a reusable store card component in Figma, including an image area, store name, dollar per item, turnaround time, and a rating with star states.

Apply and test responsive constraints in Figma by grouping the status bar, map, and text elements, and setting left, right, top, and center constraints to ensure consistent layout.

Design a profile page in Figma by arranging a photo with avatars plugin, name and email with an edit button, a map widget for address, payment controls, and log out.

Apply constraints to the profile page in Figma, align text with 25px from the right, group elements, and set left, right, top, and center constraints for navigation, icons, and buttons.

Design a services page by building a reusable list component that shows services or orders with store name, date and time, status, price, and a carrot icon for details.

Use the Google Sheets sync plugin to auto populate a Figma page by renaming fields with hash tags (store name, total price, date, status) and using fetch and sync.

Explore typography improvements by selecting and applying custom fonts from sources like Google Fonts and Adobe Fonts, and pair fonts with Font Peridot Co. to enhance your design.

Learn to set up typography styles in Figma by applying a heading font (Rubik) and a body font (Kalila), and create reusable text styles to apply across components.

Learn to apply and unify text styles across all components in a Figma project, choosing fonts, sizes, and color styles for buttons, headers, and navigation to achieve consistent user interface.

Polish your Figma mockup by finalizing the status bars across pages, refining layout, organizing layers, and adding descriptive prompts and icon credits, then implement feedback for completed requests.

Master prototyping in Figma by building interactive page connections, previewing on device sizes, and customizing transitions and triggers for buttons to navigate between tutorial steps and pages.

Create an interactive prototype by connecting buttons to corresponding screens, linking login, request, profile, services, map, and payments pages, then test navigation and verify all connections.

Learn how to implement scrollable content in prototypes by applying fixed positions, horizontal scrolling, and responsive constraints, and discover how to set the first frame for presentation mode.

Test prototypes on a real device by using present mode to share a link and preview it on your mobile browser or the Figma Mirror app.

Discover overlays in prototyping by presenting tutorial cards as overlays on the current page, using open overlay, close overlay, and dark background options.

Demonstrate prototyping with open links by connecting text or buttons to a web page, such as terms of service or privacy policy, and test across devices and background colors.

Explore adding animations in figma by using move in overlays, choosing directions, and adjusting ease in and out duration.

Create realistic page transitions in Figma by linking login, sign up with email, and payment pages with push and slide animations. Experiment with move in from top or bottom.

Turn a map image into a realistic interactive prototype in Figma by prototype mode, resizing with Shift+alt, and enabling horizontal and vertical scrolling.

Discover how to add animated gifs to your Figma prototype using the Lotti plugin by Airbnb, install the plugin, and place and resize animations to create more interactive prototypes.

Explore how smart animate in the Figma prototype tool creates smooth transitions between card states, expanding to show more detail or read more, while preserving layer hierarchy.

Learn how to design interactive components in Figma and prototyping tools by creating button variants and state-based interactions, including tap feedback and cross-page component behavior.

Learn how to implement tap feedback for interactive components in a mobile app list using Figma, by adding a tap variant with a darker background and instant prototype transition.

Learn to use Figma's prototyping flows to create multiple user journeys, such as new user and signed-in flows, set starting points, and share annotated prototypes with descriptions.

Learn to share Figma files, invite others by email, and set view or edit permissions. Copy a share link for the whole project or a frame, then collaborate with feedback.

Collaborate in real time by inviting teammates via email, creating teams and projects, configuring permissions, and tracking edits with avatars and comments.

Export frames and assets directly from Figma by selecting the frames, choosing export formats such as png, jpeg, svg, or pdf, and saving multiple resolutions like 1x, 2x, and 3x.

Utilize the code panel in Figma to extract styling code from selected objects or full frames, enabling developers to copy and paste exact values and turn designs into live apps.

Design a responsive web app dashboard for laundry stores to browse and manage service requests, view earnings graphs, and apply color scheme, fonts, and logo with sign-up/login.

Start a web app mockup quickly by importing figma templates and charts, setting up styles and fonts, and using a team library to publish components for reuse.

Design a split login page in Figma with a right image and left login panel, featuring email and password fields, Google sign-in, and terms of service and privacy policy links.

Explore image masks in Figma by placing images inside circles and combining shapes to create multi-circle masks, then apply the mask to reveal only the image inside the shapes.

Design a dashboard page for a laundry store, showcasing monthly revenue, recent customers, item counts, and ratings with a bar chart, navigation, and reusable containers.

Design a request page using auto layout and orderly out in Figma, creating a responsive list of requests with avatars, padding, and adjustable spacing for an efficient laundry store UI.

Populate Figma mockups with realistic sample data using Content Reel, adding names, avatars, images, and order numbers; learn layout tips, auto layout versus constraints, and preparing a mobile version.

Figma auto-saves your work and creates a version history timeline you can view, name, restore, or share via links. The free plan provides 30 days of history and manual versioning.