Responsive UX/UI Design in Figma 1.5h deep dive 2024 UPDATE!

Discover how auto layout in Figma adapts designs to size changes, from a button to a full page, by mastering its three pillars: layout and positioning, resizing behavior, and nesting.

Learn to set up an auto layout frame in Figma, so elements adapt to content with adjustable padding and gaps, and align items while switching between vertical and horizontal layouts.

Explore the auto layout menu in Figma, understand its three pillars—general layout and positioning, resize behavior, and nesting—and master direction, alignment, gap, and padding for responsive layouts.

Explore the auto setting in Figma, formerly space between, which evenly distributes space between child elements as you resize, and toggle between packed and auto.

Explore advanced layout settings in figma, including strokes and include in layout, padding usage, negative stacking, and baseline alignment to precisely align text and icons within auto layout frames.

Explore how auto layout resizing in Figma uses resize settings to make content respond to container changes, with fill container, fixed height, and hug behavior.

Master vertical resizing in Figma by setting the parent to hug and children to fill, so card heights stay content-driven.

Learn how to use ignore auto layout to freely position elements inside an auto layout frame, including the ctrl-drag shortcut, resizing behavior, and showing overflow with show content.

Master using spacing variables in Figma autolayout to ensure design consistency across components and instances. Learn to apply, swap, and detach variables for padding, spacing, and colors, with component-based workflows.

Set minimum and maximum values for resizing in figma’s auto layout frames, using min width and max width to keep the design readable.

Master auto layout wrap in figma to flow cards and a newsletter across lines as space runs out. Set min and max sizes and alignment to ensure fluid, responsive resizing.

Explore nesting and parent-child relationships to control auto layout in frames, using nested frames, margins, spacing, and the three pillars of auto layout.

Apply suggest auto layout in Figma to create nested vertical and horizontal layouts, rename layers for clarity, and resize components, while balancing manual nesting for flexibility.

Build a responsive table in Figma using auto layout, filling columns with content via Figma AI, and quickly duplicate rows to scale your design.

Practice advanced nesting and resizing in figma auto layout, comparing manual nesting with auto layout suggestions, and master resize behavior, hugging content, and fill container constraints.

Learn how to build an auto layout page in Figma by nesting components, setting up a parent frame, applying auto layout, and using variables for padding and responsive behavior.

Explore auto layout in Figma and its relation to CSS flexbox, highlighting one-dimensional flex behavior versus two-dimensional CSS grid, and guide designers to collaborate with developers.

Build slot components with auto layout in Figma, enabling instance swapping to slot in different content while preserving container fill and content hugging.

Discover how constraints in figma govern resizing by pinning elements to edges or center, noting that constraints apply to standard frames but not auto layout frames.

Explore using left and right constraints and bottom-right bubbles in Figma to build responsive layouts, and test quickly with grids while noting autolayout remains the preferred approach.

Set up and reuse Figma grids across frames by switching to column grids, adjusting columns, margins, and gutters, and applying layout grid styles for consistency.

Explore how CSS breakpoints deploy media queries to adapt layouts for different screen sizes, using a 768px minimum width and progressive changes to headings, paragraph text, images, and background colors.

Explore manually handling breakpoints in Figma by designing master mobile and desktop frames with grids and auto layout, using constraints and min/max widths to test responsive layouts with variants.

Learn how to use modes in Figma to adapt designs for light and dark themes and different screen sizes by binding colors and sizes to variables.

Master binding variants to modes in Figma to create responsive mobile and desktop layouts by binding instances to variables and switching variants automatically.

Use booleans to hide and show the burger and links menus across mobile and desktop in a Figma component, binding visibility to a variable with responsive variants.

Automate responsive typography in Figma using modes and variables tied to text styles. Build a typography collection, connect variables with a plugin, and apply S, M, L for different screens.

Explore responsive typography in Figma by learning how to set up and adapt a type scale, with bonus typography videos and downloadable files from the typography class.

Explore Ram as a root-relative font size unit, its relation to the 16-pixel root font size, and how user presets influence typography, with pixels and M units offering accessible design.

Set a base font size of 16 pixels (1 ram), define headlines from h1 to h6, and apply mobile-first, responsive typography with adjustable weight, line height, and spacing across breakpoints.

Learn how to create responsive typography using breakpoints and media queries, expand type scales via fixed breakpoints and modular systems, and coordinate typography with design systems for scalable, accessible layouts.

Master fluid typography using CSS clamp with viewport width, min 1.5rem and max 3rem, and a 5% growth rate, plus container queries and accessibility considerations.

Celebrate finishing the course and explore more about ux ui design, figma, and code basics with MU learning, plus leave feedback and sign up for the newsletter.