Figma UI UX Design Essentials

Learn the difference between wireframes (low fidelity) and high fidelity designs in Figma, test navigation and buttons quickly, then evolve with ready-made templates while keeping visuals simple and functional.

Create your first design file in Figma, add frames for pages, and build a mobile-first layout with four white boxes, using iPhone 16 sizing and basic navigation.

Learn the basics of type in Figma, including auto width vs fixed size text boxes, font sizing, and quick keyboard shortcuts to build simple, test-ready layouts.

Learn to create rectangles and circles in Figma, apply rounded corners with corner radius controls, and manage layer order using back and front commands and shortcuts.

Explore color in Figma using the color picker, hue, saturation, and brightness, and hex or rgb inputs to craft a teal wireframe, while mastering eyedropper shortcuts and layer color management.

Learn to work with strokes in Figma, set default color and line properties for shapes, adjust weights and caps, and copy paste stroke settings for consistency.

Learn object editing mode in Figma: enter by double-clicking an object, edit its edges and lines, and escape to the move tool by double-clicking the background.

Demonstrates the difference between the move and scale tools in figma, showing how scale resizes stroke, font, and the rectangle together, with shortcuts V for move and K for scale.

Compare frames and groups in Figma, noting frames' clipping, non-squishing resizing, and constraint options. Frames are widely used in templates for consistent layouts.

Create a complete wireframe for the home, features, checkout, and confirmation pages in Figma, using a simple color and font. Follow the task flow and export your frames as screenshots.

Explore free icons from icon finder and the Figma community, compare png and svg, and use scalable, transparent, color-changeable svgs for clean, efficient designs.

Explore how Figma plugins extend the app with mini programs for fonts and images, and learn to find, run, and drag icon vectors from the community or design dock.

In class project 03, learn to select and place three icons: a cart on all pages, an image placeholder, and a success icon, using frames and Iconify in Figma.

Organize a Figma project by adding and naming pages for mobile wireframes, desktop views, and persona and task-flow content, using frames and imports to keep content tidy.

Master prototyping in figma by linking frames to simulate navigation on virtual and physical phones, drag wires to connect pages, and preview live updates of sizing, font, and color.

Explore prototype animation and easing in Figma by adding button interactions, frame transitions, and diverse effects like dissolve, move in, and slide, with timing and curve controls for realistic navigation.

Learn how to add the iOS status bar in a Figma template, choose dark or light mode, adjust spacing for iPhone 16, and detach an instance to avoid linking issues.

Test your Figma prototypes on a real device using Figma Mirror for live, interactive updates. Adjust font sizes and button sizes on mobile to improve usability.

Prototype a mobile website in Figma, test on your phone by wiring buttons to the right pages, adjust tap targets and legibility, and upload a proof to the project section.

Explore Smart Animate in Figma to transition between two frames. Apply delays and easing in prototypes, and keep layer names consistent for predictable motion.

Animate the confirmation page in Figma, following the last video, or experiment with ball, square, or tick icon; capture screenshots of both confirmation pages or record a short preview.

Share your Figma files with stakeholders early using a copyable link to enable comments and view prototypes. Experience live collaboration, see activity, and iterate with comments and prototype links.

Learn how to share a Figma document for editing with teammates, using teams, projects, drafts, files, and pages, and understand draft-to-project workflows and free plan limits.

Move from wireframes to high-fidelity mockups by gathering UI kit ideas from Dribbble, Behance, and stock sites, then pick fonts, colors, and styles to craft a mood board.

Create mood boards in Figma to translate inspiration into visuals for clients and use. Import images, frames, and templates to build a shareable mood board for stakeholder sign-off before wireframes.

Create a mood board for the assigned company by gathering screenshots from inspiration sites like Pinterest, Instagram, and Mobin, assemble them in a Figma file, then upload to class projects.

Learn how to apply a 12-column grid in Figma, set layout guides, margins, and gutters. Design for desktop, tablet, and mobile with breakpoints and an eight point grid.

Learn practical Figma shortcuts and preferences to speed your workflow, including deep select, select with same fill, quick actions with command K, right-click tips, and eight-point nudging.