Designing product image gallery and zoom UI in Figma: thumbnails, lightbox, and handoff

Quick answer

A product image gallery shows every sellable angle of an item and lets shoppers inspect detail before they pick a variant or add to cart. On desktop, use a main image + vertical or horizontal thumbnail rail; on mobile, use a swipeable carousel with dot indicators and optional pinch-to-zoom lightbox. When the shopper selects a color or material variant, swap the gallery to that variant’s image set—never show blue photos while the selected swatch is red. Start from the Figma guides hub and mirror buy box behavior from your product detail page frame.

---

Who this is for

• Product designers building PDP media for fashion, electronics, furniture, or beauty catalogs.
• Design system teams standardizing gallery patterns across PDP, quick view, and compare products overlays.
• Engineers implementing lazy-loaded image URLs, variant-to-media mapping, and accessible zoom/lightbox behavior.

---

Gallery touchpoints

Touchpoint	Component	Purpose
PDP hero	ProductGallery	Primary conversion surface
Quick view	GalleryCompact	One image or 3-thumb strip
Compare tray	GalleryThumb	Single static image per SKU
Cart line item	LineItemThumb	64px thumbnail only
Wishlist row	Same as cart	Visual recall
Recommendations	Card image only	No zoom; link to PDP

Verdict: invest gallery depth on the PDP. Every other surface can reuse a subset—do not rebuild a full lightbox inside quick view unless the category demands color accuracy at scale.

---

ProductGallery anatomy

Part	Spec	Notes
Main stage	1:1 or 4:5 aspect ratio	Match category norm (fashion 4:5, electronics 1:1)
Thumbnail rail	56–72px thumbs, 4–8 visible	Vertical left on desktop; horizontal below on tablet
Active indicator	Border or dot on selected thumb	WCAG contrast on focus
Zoom affordance	Magnifier icon or cursor hint	Opens lightbox or inline lens
Badge overlay	Sale, new, 360°	Position top-left; do not cover product
Video slot	Play icon on thumb	Optional hero slot for demo clips

ProductGallery
├── Variant: layout=desktop_rail | mobile_carousel
├── Variant: mediaType=image | video | model_360
├── Variant: zoom=inline_lens | lightbox | none
├── Property: imageIndex=0..n
├── Property: variantId=sku_color_red
└── Layers:
    ├── MainStage (Image / Video / 360Placeholder)
    ├── ThumbnailRail
    │   └── ThumbItem × n
    ├── NavArrow (desktop optional)
    ├── DotIndicator (mobile)
    └── ZoomTrigger

Use component properties for layout and mediaType. Bind variantId in Dev Mode annotations so engineering maps color swatches to image arrays.

---

Layout comparison

Layout	Best for	Tradeoff
Main + left rail	Desktop fashion, home	Familiar; needs min 1024px width
Main + bottom strip	Tablet, narrow desktop	Saves horizontal space
Full-width swipe carousel	Mobile PDP	Thumb reach; hide rail until tap “All photos”
Sticky gallery on scroll	Long PDP copy	Gallery stays visible while specs scroll
Split 50/50 gallery + buy box	Luxury, high AOV	Less vertical scroll; tight on mobile

On mobile, stack gallery above buy box with safe-area padding. Avoid shrinking the main stage below 320px width—detail matters for conversion.

---

Variant and image sync

Event	Gallery behavior
Color swatch selected	Replace entire image set with that color’s URLs
Size only change	Gallery unchanged unless size-specific media exists
Out-of-stock variant	Dim gallery optional; focus on notify me CTA
Missing image for variant	Fallback to generic packshot + empty state copy
Preselected deep link	Open gallery on variant’s default image index

Document a media manifest in handoff: { variantId, images: [{ url, alt, sort }] }. Same manifest feeds quick view first image.

---

Zoom and lightbox patterns

Pattern	Interaction	When to use
Inline lens	Hover magnifies region on desktop	Apparel fabric detail
Click-to-lightbox	Full-screen overlay, pinch zoom	Jewelry, electronics ports
Double-tap zoom	Mobile native feel	Default for mobile PDP
360° spinner	Drag to rotate	Footwear, furniture (placeholder frame in Figma)
AR preview link	Button below gallery	Out of Figma scope; note as external CTA

LightboxOverlay
├── Variant: open=true | false
├── Layers:
    ├── Scrim
    ├── CloseButton
    ├── ZoomableImage (max 200% scale annotation)
    ├── PrevNextArrows
    └── Counter "3 / 8"

Prototype open/close with Smart Animate. Spec Escape closes lightbox and focus returns to zoom trigger—same rules as modals.

---

Loading and error states

State	UI
Initial load	Skeleton on main stage + gray thumb pills
Thumb lazy load	Blur-up placeholder per image
Broken image	Icon + “Image unavailable” on stage
Slow CDN	Progressive JPEG; keep layout stable (fixed aspect ratio)
Single image product	Hide rail; no arrows

Fixed aspect ratio prevents layout shift when high-res images load—annotate aspect-ratio: 4/5 in Dev Mode.

---

Overlays on gallery media

Overlay	Placement	Pairs with
Sale badge	Top-left on stage	Flash sale timer
New arrival	Top-left	Badges
Low stock	Bottom banner on image	Inventory messaging
Play video	Center on video thumb	Demo or unboxing
View in room	Secondary button below stage	AR; link only

Do not stack more than two overlays on the hero image—sale badge + one secondary label is enough.

---

Handoff checklist

Item	Dev Mode annotation
Image URLs	CDN path pattern + width params (?w=800)
Alt text	Per image from PIM; color in alt when variant-specific
Variant map	variantId → image[] JSON shape
Swipe	Touch threshold; loop at ends or hard stop
Keyboard	Arrow keys change main image when rail focused
Zoom max	200% or fit-width; document pinch limits
Analytics	gallery_thumb_click, gallery_zoom_open, gallery_video_play
LCP	First hero image preload hint
a11y	Live region announces “Image 3 of 8” on change

Use Dev Mode checklist and export guide for @2x marketing assets vs WebP production paths.

---

Common mistakes

Mistake	Why it hurts	Fix
Gallery not tied to variant	Wrong color ordered	Swap images on swatch change
Tiny thumbnails on mobile	Hard to tap	Min 44px touch target
Infinite carousel confusion	Users lose first image	Show counter or dots
Zoom without lightbox on mobile	Pinch fights page scroll	Dedicated full-screen zoom layer
Different hero in PLP card vs PDP	Expectation mismatch	Use same default packshot
Video autoplay with sound	Accessibility and bounce	Tap to play; muted optional
No alt text on decorative angles	Screen reader noise	Mark duplicate angles alt="" or merge

---

Recommended workflow

1. Define aspect ratio tokens per category in layout grids.
2. Build ThumbItem + MainStage as nested components with shared corner radius.
3. Create desktop rail and mobile carousel variants of ProductGallery.
4. Add variant sync property tied to segmented color swatches.
5. Design LightboxOverlay with zoom and keyboard nav.
6. Add loading skeleton and broken-image fallback frames.
7. Place gallery in PDP next to buy box; link to sticky bar scroll behavior if gallery sticks.
8. Prototype swatch change → gallery swap → zoom open on one flow.

---

FAQ

How many images should the rail show?

6–8 is typical for fashion; electronics may need 3–4. Hide overflow with scroll in rail rather than shrinking thumbs below 48px.

Inline zoom or lightbox only?

Use inline lens on desktop where hover exists; lightbox on mobile and tablet where hover does not. Many teams ship lightbox-only for simpler engineering.

360° in Figma?

Design a placeholder frame with drag hint and loading state; actual 360 viewer is implemented in code. Link vendor spec in Dev Mode.

Same gallery in compare mode?

Show one static image per compare column—no zoom rail. Link “View product” opens full PDP gallery.

---

Next steps

• Design product detail pages in Figma — gallery + buy box layout
• Design product quick view UI in Figma — compact gallery subset
• Design modals and dialogs in Figma — lightbox overlay patterns
• Design loading states and skeleton screens in Figma — gallery placeholders
• Fix blurry exports and wrong dimensions in Figma — sharp assets for retina displays