figma guide
Designing product detail pages in Figma: gallery, variants, and handoff
Design PDP galleries, variant pickers, sticky buy boxes, and trust modules in Figma with component variants, responsive layouts, and Dev Mode specs for ecommerce.
- Published
- Updated
- Jun 18, 2026
- Read time
- 8 min
- Level
- Beginner
Quick answer
A product detail page (PDP) pairs a media gallery on the left with a sticky buy box on the right—title, price, rating, variant pickers, quantity, and primary CTA—then stacks reviews, specs, and recommendations below. Build ProductGallery, VariantPicker, and BuyBox as separate components; bind variant state to gallery image and price. Document out-of-stock, pre-order, and low-stock copy explicitly. Pair with listing grids and cart UI. Start from the Figma guides hub.
Who this is for
- Product designers shipping storefront PDPs for DTC, marketplace, and B2B catalogs.
- Design system teams standardizing galleries, variant controls, and buy modules across categories.
- Engineers implementing SKU selection, inventory gating, gallery sync, and structured data slots.
PDP layout zones
| Zone | Purpose | Key components |
|---|---|---|
| Breadcrumb | Navigation context | Breadcrumb |
| Gallery | Product media | ProductGallery, thumbnails, zoom |
| Buy box | Purchase decision | BuyBox, VariantPicker, CTA |
| Trust row | Shipping, returns, secure pay | Icon + text chips |
| Tabs / accordion | Details, specs, care | Accordion |
| Reviews | Social proof | Review UI |
| Recommendations | Cross-sell | ProductCard row from PLP |
Verdict: on mobile, gallery stacks above buy box; sticky Add to cart bar at bottom replaces desktop sticky buy column—design both, not just a scaled-down desktop frame.
ProductGallery anatomy
| Part | Purpose | Spec tip |
|---|---|---|
| Main image | Hero product shot | 1:1 or 4:5; max-width on desktop |
| Thumbnail strip | Navigate media | Vertical (desktop) or horizontal (mobile) |
| Video badge | Motion media | Play icon overlay |
| Zoom affordance | Lightbox hint | Icon or pinch note for mobile |
| AR / 3D (optional) | Immersive preview | Separate CTA—not mixed into thumbnails |
ProductGallery
├── Variant: layout=thumbnails-left | thumbnails-bottom
├── Property: activeIndex (number)
├── Property: mediaCount (number)
└── Layers:
├── MainStage
├── ThumbnailRail
└── Badges (sale, 360, video)Sync gallery to variant selection: choosing “Blue” swaps activeIndex to the blue SKU image. Prototype with interactive components and component properties—not 40 duplicate frames.
Use masks and clipping for consistent image crops; export hero at 2x for retina.
BuyBox structure
BuyBox
├── Layer: Title (H1)
├── Layer: RatingSummary
├── Layer: PriceBlock (lg PriceDisplay)
├── Layer: VariantPickers
├── Layer: QuantityStepper
├── Layer: PrimaryCTA
├── Layer: SecondaryActions (wishlist, share)
└── Layer: TrustRow| Element | States to design | Notes |
|---|---|---|
| Title | default | Single H1; include brand line if marketplace |
| Price | regular, sale, member | lg price display |
| Rating | with/without count | Links to #reviews anchor |
| Variant pickers | default, selected, disabled, error | See below |
| Quantity | min 1, max stock | Same stepper as cart |
| Primary CTA | default, hover, loading, disabled | Label changes: Add to cart / Out of stock / Pre-order |
| Secondary | wishlist, notify me | Icon + label on desktop |
Sticky buy box on desktop: right column position: sticky; top: 24px—note in Dev Mode. Mobile uses fixed bottom bar with price + CTA only.
Variant pickers
| Variant type | Control | Best for |
|---|---|---|
| Color | Swatches (circles) | Apparel, cosmetics |
| Size | Segmented control or button row | Clothing, shoes |
| Material / finish | Chips or thumbnails | Furniture, devices |
| Capacity | Radio group | Electronics, plans |
| Dropdown | Combobox | 10+ options |
VariantPicker
├── Variant: type=color | size | dropdown
├── Variant: state=default | selected | disabled | error
├── Property: label (text)
├── Property: required (boolean)
└── Layer: Options row| State | Visual | Copy |
|---|---|---|
| Available | Full opacity | — |
| Selected | Ring or fill highlight | — |
| Unavailable | Diagonal strike or muted | ”Unavailable” on hover |
| Error | Red border on group | ”Select a size” |
| Low stock | Badge on option | ”Only 2 left” |
Common mistake: showing all size buttons as equal when some SKUs are out of stock—disable unavailable combinations based on inventory matrix; document rules in a table in Dev Mode.
Primary CTA and inventory states
| Inventory | CTA label | CTA state | Secondary action |
|---|---|---|---|
| In stock | Add to cart | Enabled | Buy now (optional) |
| Low stock | Add to cart | Enabled + urgency copy | — |
| Out of stock | Out of stock | Disabled | Notify me when available |
| Pre-order | Pre-order | Enabled | Ships MM/DD |
| Digital / SaaS | Subscribe / Get started | Enabled | Free trial link |
Prototype loading after click: CTA shows spinner, then success toast (toast pattern) or mini-cart drawer opens.
Trust, shipping, and policy modules
| Module | Content | Component |
|---|---|---|
| Delivery estimate | ”Arrives Tue, Jun 24” | Icon + text row |
| Free shipping threshold | ”Free shipping over $50” | Inline banner |
| Returns | ”30-day returns” | Link to policy |
| Secure checkout | Lock icon | Footer of buy box |
| Authenticity | Marketplace badge | Vendor card if third-party |
Keep trust rows scannable—three items max above the fold. Long policy text belongs in tabs below.
Tabs, specs, and long content
Use accordions on mobile and tabs on desktop for:
| Section | Content |
|---|---|
| Description | Marketing copy, bullets |
| Specifications | Key-value table |
| Size guide | Modal or linked page |
| Shipping & returns | Policy summary |
| Ingredients / materials | Compliance text |
PDPContentTabs
├── Variant: layout=tabs | accordion
├── Layer: TabList
└── Layer: PanelsSpec tables reuse table UI patterns with two columns (label / value). Align keys left, values right for scannability.
Reviews block
Place the review summary (average + histogram) beside or above the review list:
| Element | Placement |
|---|---|
| Aggregate rating | Buy box + reviews header |
| Histogram | Left column of review section |
| Review cards | Paginated list |
| Write review CTA | Logged-in only; link to form |
Filter reviews by star rating with chip filters—mirrors PLP filter behavior for consistency.
Recommendations row
| Type | Label | Card source |
|---|---|---|
| Related products | ”You may also like” | Same category |
| Frequently bought together | ”Complete the look” | Bundle layout |
| Recently viewed | ”Recently viewed” | Personalization slot |
Use horizontal scroll of product cards with consistent image ratio. Do not shrink cards below readable price size—show 2.2 cards on mobile to hint scroll.
Responsive behavior
| Breakpoint | Gallery | Buy box | Sticky CTA |
|---|---|---|---|
| Mobile | Full-width carousel | Below gallery | Fixed bottom bar |
| Tablet | 55% width | 45% side-by-side | Optional bottom bar |
| Desktop | 50–58% left | 42–50% sticky right | Inside buy box |
Document image zoom: lightbox on click (desktop) vs pinch (mobile). Link to mobile frame presets for in-app WebView PDPs.
Handoff checklist
| Item | Dev Mode annotation |
|---|---|
| SKU ↔ gallery mapping | Property table per variant |
| Unavailable variant rules | Cross-option matrix |
| CTA labels per inventory state | Enum list |
| Price updates on variant change | Sale vs member precedence |
| Quantity min/max | Stock API binding |
| Sticky offsets | Header height + safe area |
| SEO / structured data slots | Product name, price, availability fields |
| Analytics events | view_item, add_to_cart trigger points |
Use Dev Mode checklist and color tokens for sale price emphasis.
Common mistakes
| Mistake | Why it hurts | Fix |
|---|---|---|
| One frame per colorway | 30 SKUs = unmaintainable | Component properties + gallery index |
| Missing out-of-stock state | Engineers ship broken CTA | Design disabled + notify flow |
| Tiny swatches on mobile | Touch targets fail WCAG | Min 44×44px hit area |
| Price without variant context | Wrong price shown | Bind price to selected SKU |
| Reviews buried below fold | Low conversion on high-consideration items | Summary in buy box |
| No loading state on Add to cart | Double-submit bugs | Loading + success feedback |
Recommended workflow
- Audit PLP
ProductCard— PDP should feel like the expanded version of the same system. - Build
ProductGallerywith thumbnail sync and 4–6 media slots. - Compose
BuyBoxwith price, rating, variants, quantity, CTA. - Map variant matrix in a spreadsheet layer or Dev Mode table.
- Add trust row + tabs for long content.
- Design review block + recommendations using existing components.
- Prototype variant change → image + price update → add to cart.
- Mobile pass with sticky bottom CTA and accordion specs.
FAQ
How many gallery images should I design?
Show 5–8 thumbnails in the component; document that production may have 1–20. Include video and lifestyle shot slots in the template.
Color swatches or dropdown for 15 colors?
Swatches up to ~8 visible; beyond that use dropdown with swatch + label in each option (combobox pattern).
Should “Buy now” skip the cart?
Design both Add to cart (primary) and Buy now (secondary) if checkout supports it—Buy now routes to checkout with single line item.
Marketplace vs first-party PDP?
Add SellerCard (avatar, name, rating) below title for third-party listings; keep buy box structure identical for engineering reuse.
Next steps
- Design product listing grids in Figma — PLP cards and filters
- Design shopping cart UI in Figma — post-PDP flow
- Design rating and review UI in Figma — social proof block
- Interactive components in Figma — variant prototyping
§ Keep reading