Figma Auto Layout for E-Commerce

Figma Auto Layout is a set of resizing rules you attach to a frame so its width, height, and internal spacing adjust automatically as content changes, instead of you dragging every element by hand. For ecommerce design specifically, it is the difference between a product card that looks right for one demo product and a component that still looks right when a real catalog loads in with mismatched title lengths, missing sale badges, and prices of very different widths. This tutorial walks through setting up Auto Layout on the product-page elements that break most often — cards, price rows, option pickers, and buy boxes — using the patterns we build into our own Figma ecommerce templates.

Why Auto Layout Matters More for Ecommerce Than Most Other Design Work

Ecommerce interfaces are built almost entirely out of repeating components fed by variable, real-world data: product titles of unpredictable length, prices that sometimes carry a strikethrough compare-at value and sometimes do not, review counts that range from none to thousands, and option lists that might hold two colors or twelve. A mockup designed against one clean, on-brand sample product will always look better than the design does once it meets an actual catalog. Auto Layout is Figma's answer to that gap — it lets a component describe its own resizing behavior (grow, shrink, wrap, hug content) so the design keeps working as the data behind it changes, which is exactly the situation every product grid, collection page, and buy box is in from day one.

The payoff shows up twice. First, during design: you stop manually nudging spacing every time you swap in a longer product name or add a badge. Second, during handoff: a well-built Auto Layout component tells a developer far more about intended behavior than a static frame does, because the resizing rules are visible in the layer itself rather than left to guesswork.

Step 1: Build the Product Card as a Set of Nested Auto Layout Frames

Do not apply Auto Layout to the whole card in one pass. The most common mistake is treating a product card as a single frame with Auto Layout turned on, which forces every child to stack in one direction with one spacing value. Instead, nest smaller Auto Layout frames inside the card: one for the image, one for the title and price block, and one for the badge row. Each inner frame gets its own direction (vertical for the text stack, horizontal for the badge row) and its own resizing behavior, and the outer card frame simply arranges those pieces vertically with a fixed gap between them.

1. Select the image, apply Auto Layout (Shift+A), and set both width and height to Fixed so product photos keep a consistent aspect ratio regardless of the source image.
2. Select the title and price text layers together, apply Auto Layout, set direction to vertical, and set width to Fill container so long titles wrap instead of overflowing the card.
3. Build the badge row (sale, new, low-stock) as its own horizontal Auto Layout frame with Hug contents on width, so it only takes up as much space as the badges present, and disappears cleanly when there are none.
4. Wrap all three pieces in an outer vertical Auto Layout frame with consistent padding and item spacing — this becomes the reusable product card component.

Step 2: Set Resizing per Layer, Not Just per Frame

Auto Layout only works well when each individual layer inside the frame also has its resizing behavior set correctly — this is the part most tutorials skip. Every layer in Figma has a horizontal and vertical resizing setting (Fixed, Fill container, or Hug contents), and it interacts with the Auto Layout frame around it.

• Text layers that should wrap (titles, descriptions) need width set to Fill container, not Fixed — Fixed width text will either clip or overflow its frame when the string is longer than your sample text.
• Text layers that should never wrap (prices, SKU codes) work best with width set to Hug contents, so the frame around them shrinks to fit instead of leaving awkward empty space.
• Icon and image layers almost always want Fixed dimensions, since scaling an icon to Fill container usually produces distorted or oversized results.
• Buttons typically want Hug contents on width and Fixed on height, so a short label like Add and a longer one like Add to Cart both produce a well-proportioned button rather than one stretched edge to edge.

Getting this per-layer setting right is what makes a component resilient. A card with the outer frame set to Auto Layout but the inner text left on Fixed width will still break the moment real product data replaces your placeholder text — the Auto Layout frame is only as forgiving as the layers inside it.

Step 3: Handle Variable Price Formats With Conditional Spacing

Price rows are one of the trickiest Auto Layout cases in ecommerce because the same slot needs to handle at least three states: a single price, a sale price next to a struck-through compare price, and occasionally a price range for products with variants. Build the price row as its own horizontal Auto Layout frame with a small, fixed item spacing (4–8px is typical), and use component variants or boolean layer visibility to toggle the compare-at price on and off. Because the frame is set to Hug contents on width, hiding the compare-at price automatically collapses the extra spacing instead of leaving a visible gap — you do not need a second, separately-spaced version of the price component for the no-discount case.

Step 4: Apply the Same Logic to the Buy Box and Option Pickers

The product-page buy box (title, price, options, add-to-cart) is where Auto Layout earns its keep the most, because it is also the area most affected by variant complexity. A store selling a single simple product needs far less vertical space in the buy box than one with size, color, and material options stacked underneath the price. Build the buy box as a vertical Auto Layout frame with Hug contents on height, and build each option group (size selector, color swatches) as its own horizontal Auto Layout frame that wraps when needed. With this structure, a product with two option groups and a product with five naturally produce buy boxes of different, correctly-proportioned heights from the exact same component — instead of you manually resizing a static frame for every product type in your mockups.

Swatches deserve a specific note: set the swatch row to wrap (Figma's Auto Layout supports a wrap setting on horizontal frames) so a color option with 20 variants drops to a second row instead of overflowing the buy box horizontally on a narrow viewport frame.

Step 5: Test the Component Against Real Content Extremes, Not Just Your Sample Product

Once the card and buy box components are built, the actual test of whether Auto Layout is set up correctly is swapping in deliberately awkward content: the longest product title in your catalog, a product with no reviews, one with every badge active at once, and one with a very long option value like Extra Large or a long color name. If the component holds its proportions and spacing through all of those cases without manual adjustment, the Auto Layout setup is solid. If any of them break the layout, it is almost always a per-layer resizing setting (Step 2) rather than the outer frame that needs fixing.

How This Applies if You Are Starting From a Figma Ecommerce Template

If you would rather start from product cards, price rows, and buy boxes that are already structured this way instead of building the Auto Layout hierarchy from scratch, our Figma ecommerce theme library is organized around exactly these repeating components — product grids, variant pickers, and buy boxes designed to hold up once you drop in a real catalog rather than just the sample content shown in the preview. If you design across more than one store niche, the multi-niche Figma bundle gives you several of these template sets in one package, which is useful for agencies and freelancers who want a consistent Auto Layout structure to reuse across client projects rather than rebuilding the same card and buy-box logic every time.

Whichever starting point you use — a blank file or a template — the underlying discipline is the same: build small, purposeful Auto Layout frames rather than one large frame with Auto Layout bolted on, and set the per-layer resizing behavior deliberately instead of leaving it at whatever Figma defaults to when you first draw the shape.

Frequently Asked Questions

Do I need Auto Layout if I am only designing a mockup, not building the real component?

You do not strictly need it for a single static screenshot, but the moment you design more than one product card, collection grid, or buy box variant, Auto Layout saves enough manual repositioning that it is worth the setup time — and it communicates intended resizing behavior to developers far better than a static frame does.

What is the most common Auto Layout mistake in ecommerce designs?

Applying Auto Layout only to the outer card or buy box frame while leaving inner text layers set to Fixed width. The outer frame will resize, but the text inside it will still clip or overflow once real product data replaces the placeholder copy — the fix is setting per-layer resizing (Fill container or Hug contents) as described in Step 2 above.

Does Auto Layout in Figma map directly to how a real storefront will render the component?

Not one-to-one, but conceptually yes — Auto Layout's grow, shrink, hug, and wrap behaviors mirror the same resizing concepts used in CSS flexbox, which is what most storefronts are actually built with. A component designed with correct Auto Layout behavior is much easier for a developer to translate into working, responsive markup than one where every spacing decision was made by eye on a single static frame.

Should I use Auto Layout for the whole page or just individual components?

Start at the component level — cards, price rows, buy boxes, option groups — and only apply Auto Layout to the full page once those components are solid. Full-page Auto Layout is useful for things like a collection grid wrapping cards, but it works best when it is arranging already-reliable components rather than raw text and image layers.