Product Quick View UI in Figma

Quick answer

Product quick view is a focused overlay on listing pages that shows image, price, variant pickers, and add-to-cart without a full navigation to the PDP. Keep it lighter than a product detail page—one hero image, essential variant controls, and a link to “View full details.” Match ATC behavior, price logic, and stock states to the PDP so shoppers never get different prices in quick view vs full page. Use a modal on desktop and a bottom sheet on mobile for thumb reach. Start from the Figma guides hub.

Who this is for

Product designers building product listing grids where shoppers expect fast add-to-cart.
Design system teams reusing buy box subcomponents between PDP and quick view.
Engineers implementing lazy-loaded product JSON, focus traps, and cart drawer handoff from PLP.

Quick view surfaces

Surface	Pattern	When to use
Category PLP	Center modal (desktop) / bottom sheet (mobile)	Fashion, home goods with variant SKUs
Search results	Same modal component	Consistent ATC from any listing
Recommendations row	Optional quick view on hover CTA	Only if PDP navigation hurts conversion
Cart cross-sell	Usually skip quick view	Link to PDP instead
B2B catalog	Quick view with qty stepper	Bulk ordering from grid

Verdict: quick view is a shortcut to the buy box, not a second product page. If your catalog needs specs, reviews, and size guides inline, send users to the PDP.

QuickViewModal anatomy

Zone	Content	Notes
Header	Product title + close button	Title links to PDP
Media	Single image or 3-thumb carousel	No full gallery unless category requires it
Price block	Sale, compare-at, currency	Same tokens as pricing UI
Variant pickers	Size, color, or segmented control	Required before ATC
Primary CTA	Add to cart / Notify me	Mirrors PDP states
Secondary	View full details, Wishlist	Text link below CTA

QuickViewModal
├── Variant: breakpoint=desktop_modal | mobile_sheet
├── Variant: stock=in_stock | out_of_stock | low_stock | preorder
├── Variant: variantSelected=true | false
├── Property: loading=true | false
└── Layers:
    ├── OverlayScrim
    ├── Panel (modal or sheet)
    │   ├── CloseButton
    │   ├── ProductImage
    │   ├── TitleLink
    │   ├── PriceBlock
    │   ├── VariantPickers
    │   ├── PrimaryCTA
    │   └── SecondaryLinks
    └── FocusTrapSentinel

Build pickers from the same component variants as the PDP buy box. Use Auto Layout with max width 480px on desktop modal.

Layout comparison

Layout	Best for	Tradeoff
Center modal	Desktop PLP, 2-column grid	Blocks page context; good focus
Bottom sheet	Mobile PLP	Natural thumb zone; partial page visible
Side drawer	Wide monitors, B2B	More room for qty + SKU; higher dev cost
Inline expand	Minimal catalogs	No overlay; limited variant space

On mobile, prefer bottom sheet over full-screen modal so users still sense the listing behind it. Add safe-area padding on sheet handle and CTA row.

Entry and exit states

State	Trigger	UI
Closed	Default PLP	Quick view trigger on card hover or “Quick shop” button
Opening	Click quick view on product card	Scrim fade + panel slide up
Open / loading	Fetch product data	Skeleton for image + price
Open / ready	Data loaded	Full pickers + ATC enabled
Variant error	ATC without size	Inline error on picker; shake optional
Adding	ATC clicked	Spinner on button; disable pickers
Success	Item in cart	Close modal or show toast
Closing	Close, scrim tap, Escape	Return focus to triggering card

Prototype open → select variant → add → toast with Smart Animate between loading and ready variants.

Sync with PDP and PLP card

Property	PLP card	Quick view	Full PDP
Thumbnail image	Swatch or flat lay	First gallery image	Full gallery
Price	From listing API	Live product API	Live product API
Variant summary	Often hidden	Full pickers	Full pickers + size guide
Reviews	Star count only	Optional mini rating	Full review UI
Stock badge	On card	On CTA label	Inline + notify me

Rule: price and SKU in quick view must match PDP for the same variant selection. Document shared product ID and variant ID in Dev Mode.

Action	Expected behavior
Add to cart	Open cart drawer or toast; keep PLP scroll position
View full details	Navigate to PDP with variant query param pre-selected
Wishlist	Same handler as PDP; modal can stay open
Compare	Add to compare tray; optional close modal
Second quick view	Close first before opening second (single overlay stack)

Do not stack quick view above another modal unless your platform supports nested overlays—usually one overlay at a time.

Accessibility and focus

Requirement	Design spec
Focus trap	Tab cycles inside panel until close
Return focus	On close, focus returns to triggering “Quick shop” button
Escape	Closes modal
Scrim	`aria-modal="true"` on panel
Live region	Announce “Added to cart” for screen readers
Reduced motion	Instant open without slide

Link to accessibility plugins for contrast checks on scrim and CTA. Size pickers need visible focus rings matching forms guide.

Handoff checklist

Item	Dev Mode annotation
Trigger	`data-product-id` on PLP card quick view button
Lazy load	Fetch `/products/{id}.json` on open
Deep link	PDP URL with `?variant={id}`
Cart handler	Same as PDP ATC endpoint
Analytics	`quick_view_open`, `quick_view_atc`, `quick_view_to_pdp`
z-index	Above PLP filters, below global header mega menu
Mobile breakpoint	Sheet below 768px; modal above
Error states	Network fail → retry + close

Use Dev Mode checklist and responsive frames for breakpoint-specific layouts.

Common mistakes

Mistake	Why it hurts	Fix
Different price in quick view	Trust loss	Single product API source
Full PDP crammed in modal	Scroll fatigue	Limit to buy box essentials
No “View details” link	SEO and spec discovery suffer	Always offer PDP escape hatch
Quick view on every card tap	Accidental opens	Separate quick shop from card navigation
Missing variant validation	Wrong SKU in cart	Disable ATC until required pickers set
Opening over sticky filters	z-index bugs	Document overlay stack
Desktop-only modal on mobile	Poor thumb UX	Bottom sheet on small breakpoints

Recommended workflow

Finalize PDP BuyBox subcomponents (price, pickers, CTA).
Create QuickViewModal desktop and mobile sheet variants.
Add PLP card trigger — “Quick shop” button or eye icon, not whole card click.
Design loading skeleton matching loading states patterns.
Map all stock states including notify-me CTA.
Prototype open → variant → ATC → cart drawer on PLP frame.
Spec focus trap and analytics in Dev Mode.
Test with size guide link opening nested modal behavior.

FAQ

Quick view or go straight to PDP?

Use quick view when variant selection is simple (size/color under ~6 options) and PLP browsing is the primary journey. Send complex products (configurable, heavy specs) straight to PDP.

Show multiple images in quick view?

One image is enough for most fashion SKPUs. Add a 3-dot carousel only when color accuracy matters and PDP gallery is large.

Quick view on hover?

Desktop-only hover quick view is rare today—click or explicit “Quick shop” button avoids accidental triggers and mobile parity gaps.

Same component as sticky buy bar?

No—sticky bar is PDP scroll behavior. Reuse buy box subcomponents (price, CTA, pickers), not the sticky wrapper.

Next steps

Design product listing grids in Figma — where quick view triggers live
Design modals and dialogs in Figma — overlay and focus patterns
Design product detail pages in Figma — full buy box source of truth
Design shopping cart UI in Figma — post-ATC drawer flow
Design cards in Figma — PLP card quick shop trigger

Designing product quick view UI in Figma: modal patterns, variants, and handoff