Figma UI UX Design Advanced

Explore Figma's first draft ai-driven feature to generate a basic app checkout page from prompts, customize visuals, prototype interactions, and compare design options within a real-world music event app workflow.

Explore creating a liquid glass (glass) effect in Figma by styling frames over an image with depth, dispersion, and refraction, adjusting light and frost for a glassy user interface.

Learn to navigate complex auto layouts in Figma by removing auto layouts, dragging elements freely with spacebar, and anchoring a glassy bottom button using constraints and prototyping settings.

Explore how to combine texture and noise in Figma to create glassy, frosted effects, and learn how the order of effects and clipping shape influence the result.

Create a mobile phone frame for the first class project, exploring genre listings with subgenres and progressive blur, using ai features if available.

Learn to create reusable effect styles in Figma, apply them across frames, edit all instances at once, and clean up unused or external libraries for a tidy, efficient project.

Learn practical Figma workflow tips and shortcuts—navigate with quick actions, manage selections and colors, copy styles, and optimize performance for advanced ui/ux design.

Explore advanced copy, paste, and selection tricks in Figma, including duplicate frames with command d or ctrl d, select inverse, paste over selection, and paste to replace across multiple frames.

Explore frame tips and tricks in Figma to work with frames more effectively. Tidy up frames, navigate with n and home end, resize, and view outlines.

Refresh your understanding of auto layouts and components in Figma, then diagnose common problems, fix vector and frame selections, and build responsive, reusable icon bars with components and proper spacing.

Explore how to use Figma's ai features—suggested auto layout, replace content, duplicate and rename layers, and ai image generation—to build responsive cards with nested auto layouts and components.

Create a what's on page with a heading and a repeating band list card, using auto layout and placeholder content, then explore ai features and replace content.

Learn to build a responsive nested auto layout in Figma, mastering hug vs fill container, padding, gaps, and nested frames for flexible designs.

Master auto layout grids in Figma, converting frames to auto layout, adjusting grid rows, columns, gaps, and padding for responsive, scalable designs.

Utilize grid auto layout in Figma to display four or more music-themed images, include a movable colored box, and ensure an item spans columns; deliver screenshots and tag the instructor.

Master how main components and their instances work in Figma, including constraints and parent frames, and how organizing components on a components page supports scalable design.

Master consistent spacing in Figma with an 8-pixel grid (8, 16, 24, 32) and use the design doc (spectral) plugin to measure and copy spacing across documents.

Learn how to choose consistent web and app spacing in Figma by aligning with frameworks like Material Design, Bootstrap, and Tailwind, and communicating with developers to ensure smooth handoffs.

Create a responsive lower navigation in Figma by using components, icons, and auto layout with auto spacing, then apply bottom and side constraints and submit a screen recording or screenshot.

Create a responsive event card in Figma with a corner date badge, image, and expandable text, using constraints and components; deliver a video or screenshot showing responsiveness.

Build a responsive Figma UI by using frames, containers, auto layout, padding, and fill container. Convert to a main component and push changes to instances while testing layouts.

Learn to create a simple Figma variant by turning a button into a component set with two color variants, naming conventions, and quick keyboard shortcuts for managing assets.

Master multidimensional variants in Figma by converting a simple component into a component set with color and fill properties, then add outline and additional dimensions.

Explore the multidimensional variant by combining size and color in a component set, then screenshot and upload results to assignments. Drag the dotted line to arrange variants and streamline reuse.

Learn to create and apply color variables in Figma to support light and dark modes, then use a parent frame and appearance settings to propagate changes automatically.

Learn to create and manage color variables in Figma by applying text and interface variants for light and dark modes, and using auto settings and appearances.

In this advanced Figma session, learn to create a cart total using number variables, bind a total to a text box, and update it with button taps in prototype mode.

Design and implement a shopping cart with a working plus/minus counter and a checkout page, using variables in the prototype, and explore Mobbin and dribble for inspiration.

Design a logo with a small icon and a status bar, choose primary and secondary colors, and build a light/dark mode toggle as a component with variants for the project.

Discover how to create user experience color variants in Figma using a widget, generating primary and secondary color styles automatically, then save and apply them in the styles panel.

Explore how grids, constraints, and auto layouts shape responsive design in Figma, when to use each, and how they interact with layout guides and columns to ensure consistency.

Create and update layout guide styles for columns and rows in Figma. Turn grid changes into reusable styles using the styles panel and apply updates across your design.

Learn to craft custom easing in Figma by duplicating frames, aligning names, and using custom bezier curves with smart animate for prototype transitions, including delays and ease in-out timing.

Create your checkout success animation with three or more frames using custom easing after submitting payment. Share a video or screenshot in class projects to showcase your success.

Copy and paste interactions in Figma across animations using keyboard shortcuts or by selecting the wire or noodle, then adjust targets in prototype mode to preserve custom easing.

Learn to animate between variants in a Figma component set, replacing frame-by-frame methods with smart animation and prototype transitions. Build reusable animations inside components for text and buttons.

Practice building a variant animation by creating an animated button using a component set with variants, switching to prototype mode, and sharing a video or screenshots in class projects.

Learn to create Houdini text mask animations in Figma by using text as masked layers, two text blocks, shapes as masks, and animated variants with easing.

Create a bottom overlay in figma with spring easing, tweaking mass, damping, and stiffness to control the bounce and timing of the transition.

Create your own Houdini text animation using masks and spring motion, then upload video or screenshot to the class projects and comment on two peers with a respectful, constructive critique.

Explore why on tap and on click appear grayed out in Figma prototype mode, how device frames determine their naming, and how to fix duplicates by deleting one interaction.

Learn how ai in Figma automatically adds interactions and links buttons like buy now to the cart and heart to favorites, streamlining prototype creation in prototype mode.

Bulk add and bulk remove wires across frames in Figma using shift-click, prototype mode, and component instances; consolidate navigation, interactions, and quick actions to update multiple elements at once.

Learn to create a sticky search bar at the top in a figma prototype by using vertical scroll, frames with auto layout, padding, and proper layer order.

Build a horizontal scrolling reviews carousel in Figma by placing review cards in a clipped parent frame with auto layout, then set overflow to horizontal and preview.

design a horizontal scroll for a review card on your device, capture a video or partly scrolled screenshot, and upload it to the class projects.

Learn to create buttons that scroll to anchors within a single frame, using prototype scroll to, offset adjustments, and ease in/out animation, plus open link interactions for maps.

In this advanced Figma design course, learn to build interactive components with hover effects, variants, and smart animate, including checkboxes and input buttons through prototypes.

Create an interactive sign-in UI featuring a remember me checkbox and sign-in button with hover state, building working components and sharing screenshots alongside your component set.

Master organizing content in Figma with sections, using the frame tool to create named mobile, tablet, and desktop groups. Learn to share to sections and nest them for clean handoffs.

Design an expanding search bar in Figma as a component with auto layout and rounded corners, then prototype the expansion with smart animate between two variants via assets panel.

Create an expanding search bar with animation, engage by commenting and helping peers in class projects, share your work link, and post a video or screenshot for review.

Balance rapid prototyping with feasibility by avoiding overbuilt animations and complex interactions that are hard to implement; prioritize lean UX, quick wireframes, and user feedback to guide design decisions.