TL;DR: Figma Auto Layout lets you build responsive porcelain home decor interfaces—like vases, dinnerware, and candle holders—where spacing and alignment adjust automatically as content changes. Follow these steps to apply Auto Layout to product cards, galleries, and detail panels for a polished, scalable design system.
Step 1: Select Your Porcelain Components
Start by designing a single porcelain product card: a vase image placeholder, a product name (e.g., “Celadon Bud Vase”), a price, and a “Add to Cart” button. Select all these layers, then press Shift + A (or click “Add Auto Layout” in the right panel). Figma wraps them in a frame with automatic spacing.
If you want to dig deeper, check out our guide on Elevate Your Home: 10 Beautiful Porcelain Decor Ideas.
Step 2: Set Direction and Spacing
In the Auto Layout panel, choose vertical direction for a stacked card. Set gap to 12px between the image and text, and 8px between text lines. For a horizontal row—like a “You May Also Like” porcelain collection—switch to horizontal direction and set padding to 16px on all sides.
Step 3: Make It Responsive with Resizing
Select the vase image and set its width to “Fill container” so it stretches across the card. Set the text block to “Hug contents” so it only takes needed space. Now duplicate the card three times—Auto Layout keeps all spacing consistent for your porcelain dinnerware set.
Step 4: Nest Auto Layouts for Complex Layouts
Create a product detail page: wrap a horizontal row of three porcelain teacups in Auto Layout, then place that row inside a vertical Auto Layout that also contains a description and a “View Collection” button. Nesting keeps everything aligned when you swap a teacup for a taller coffee pot.
Tips for Porcelain Designers
Use “Space between” for header rows (logo left, cart right). Test with real product names like “Hand-Glazed Porcelain Dinner Plate” to ensure text wrapping works. Always set min-width on buttons so “Add to Cart” never shrinks below 120px.
FAQ
Q: Can Auto Layout handle different porcelain product image sizes?
A: Yes—set each image to “Fill container” and give the frame a fixed aspect ratio (e.g., 1:1), so tall vases and short bowls align neatly.
Q: How do I keep spacing consistent across a porcelain gallery?
A: Apply Auto Layout to the gallery frame with a uniform gap (e.g., 24px) and padding (e.g., 32px), then duplicate cards inside—spacing stays locked.
Q: Does Auto Layout work for mobile porcelain store designs?
A: Absolutely. Use vertical direction for mobile cards and switch to horizontal for tablet or desktop views, adjusting gap and padding per breakpoint.
Leave a Reply