figma guide
Designing size guides and size selector UI in Figma: charts, fit hints, and handoff
Design size charts, fit recommendation copy, and size selector components in Figma with validation states, modal layouts, and Dev Mode specs for fashion and footwear PDP.
- Published
- Updated
- Jun 24, 2026
- Read time
- 6 min
- Level
- Beginner
Quick answer
Size selector UI is a variant picker with explicit validation—not a generic dropdown. Model sizes as SizeChip or SizeButton variants with states for default, selected, unavailable, and low_stock; pair every selector with a Size guide link that opens a modal containing measurement tables, fit notes, and optional unit toggle (in/cm). On PDP, block Add to cart until a size is chosen and show inline error copy below the chip row. Reuse the same component on PLP quick views and cart line items as read-only size labels. Start from the Figma guides hub.
Who this is for
- Product designers shipping apparel, footwear, and gear where wrong-size returns dominate support tickets.
- Design system teams aligning size pickers across PDP, bundles, and marketplace seller listings.
- Engineers wiring variant inventory, size-chart CMS content, fit algorithms, and return-policy deep links.
Size selector surfaces
| Surface | Goal | Key components |
|---|---|---|
| PDP buy box | Choose variant before ATC | SizeSelector, SizeGuideLink |
| Size guide modal | Reduce returns with measurements | SizeChartTable, FitNote |
| PLP card | Show available size range | SizeRangeLabel (optional) |
| Cart line | Confirm chosen size | SizeLabel (read-only) |
| Compare table | Cross-product sizing | SizeColumn per product |
| Returns flow | Explain exchange sizing | Link from returns UI |
Verdict: one SizeSelector component set per category (apparel alpha, numeric waist, shoe EU/US/UK)—do not fork a new picker for every product line.
SizeSelector variants
| State | Visual | Interaction |
|---|---|---|
| default | Neutral border | Click selects |
| selected | Filled primary | ATC enabled |
| unavailable | Strikethrough + muted | Disabled; optional notify on click |
| low_stock | Warning dot or badge | Selectable; show “Only 2 left” |
| error | Red border on row | No selection on ATC attempt |
SizeSelector
├── Property: category=apparel_alpha | numeric | shoe | ring
├── Property: layout=chip_row | dropdown | split_chest_waist
├── Variant: hasSelection=true | false
├── Variant: validation=none | error
└── Layers:
├── LabelRow ("Size" + SizeGuideLink)
├── SizeChip[] (component instances)
├── FitHint (optional: "Runs small")
└── InlineError (hidden until validation)Use interactive components for hover on available chips and tooltips on unavailable sizes explaining OOS or notify option.
Size guide modal layout
| Section | Content | Notes |
|---|---|---|
| Header | Product name + “Size guide” | Close button top-right |
| Unit toggle | in / cm segmented control | Persist user preference |
| Measurement diagram | Silhouette with callouts | Optional illustration layer |
| Chart table | Rows = sizes, cols = chest/waist/hip/length | Sticky header on scroll |
| Fit note | ”Runs small—order one size up” | Merchandising-controlled copy |
| How to measure | Accordion steps | Link to video optional |
| Footer CTA | ”Back to product” | Returns focus to PDP |
Build the table with Figma tables and data UI patterns—use column components so merchandising can swap headers per category without redrawing the modal shell.
Fit recommendation patterns
| Pattern | When to use | UI element |
|---|---|---|
| Static fit note | Consistent brand sizing | Text under selector |
| Review-derived hint | ”88% say true to size” | Secondary line + link to reviews |
| Body measurement quiz | High return categories | ”Find my size” link → short form |
| Model info | Fashion PDP | ”Model is 6’1”, wearing M” near gallery |
Do not promise algorithmic fit unless engineering ships it—design the empty and loading states for quiz results anyway.
Category-specific selector layouts
| Category | Control pattern | Size guide columns |
|---|---|---|
| Tops / dresses | Alpha chips XS–XXL | Chest, waist, length |
| Bottoms | Waist × inseam matrix or dual dropdowns | Waist, hip, inseam |
| Shoes | Numeric row + region toggle EU/US/UK | Foot length cm/in |
| Rings | Numeric chips | Inner diameter mm |
| Kids | Age + height range table | Height, chest |
For matrices (waist × length), use a grid of cells rather than two independent dropdowns that can combine into invalid SKUs—gray out non-existent combinations.
Validation and ATC gating
| User action | System response | Figma state to show |
|---|---|---|
| ATC with no size | Inline error | validation=error on selector |
| Select unavailable size | No selection + tooltip | Shake animation optional in prototype |
| Change size after selection | Update price if tiered | Show price delta near pricing |
| Size OOS mid-session | Toast + refresh chips | Pair with back-in-stock |
Recommended copy: “Please select a size”—not “Error” or “Required field” alone.
Handoff checklist
| Item | Dev Mode annotation |
|---|---|
| SKU mapping | Each chip maps to variantId |
| Size chart source | CMS field vs static PDF |
| Unit preference | localStorage key |
| Invalid combinations | Matrix disabled cells |
| Notify on OOS size | Same API as variant notify |
| Analytics | size_selected, size_guide_open, size_guide_unit_toggle |
| Accessibility | aria-pressed on chips, table headers scoped |
| Mobile | Chip wrap vs horizontal scroll |
Use Dev Mode checklist and mobile frame presets for narrow viewports.
Common mistakes
| Mistake | Why it hurts | Fix |
|---|---|---|
| Dropdown-only on mobile | Hard to scan 15 sizes | Horizontal chip scroller |
| Size guide opens new tab | Breaks purchase flow | Modal or drawer |
| Same chart for all products | Wrong measurements | Category templates |
| Hiding OOS sizes entirely | User thinks product discontinued | Show with strikethrough + notify |
| No unit toggle | International returns | in/cm at top of chart |
| Tiny tap targets | Mobile mis-taps | Min 44px chip height |
| Mixing alpha and numeric on one row | Confusing inventory | One scheme per selector instance |
Recommended workflow
- Audit categories — list selector types needed (alpha, numeric, matrix).
- Build
SizeChipwith four states and component properties for size label text. - Compose
SizeSelectorwith label row, guide link, and validation variant. - Design
SizeGuideModalwith table components and unit toggle. - Wire PDP buy box — selector above primary ATC; gate until selected.
- Add fit hint variants — static, review-based, and quiz entry (optional).
- Prototype select → open guide → return → ATC success path.
- Spec analytics and CMS fields for chart rows in Dev Mode.
FAQ
Size guide link vs icon?
Use text link (“Size guide”) next to the label for accessibility; optional ruler icon as decorative prefix. Do not rely on icon-only affordance.
Dropdown for 30+ sizes?
For long numeric runs (shoes), use searchable combobox pattern from combobox UI guide or grouped dropdown sections—not 30 chips in one row.
True to size from reviews?
Display aggregate copy only when product has enough reviews—design empty state when count is below threshold.
International sizing?
Show regional labels on chips (EU 42 / US 9) via component property; chart modal includes conversion row or toggle—not separate pages per region.
Next steps
- Design product detail pages in Figma — buy box and variant pickers
- Design modals and dialogs in Figma — size chart overlay
- Design back-in-stock UI in Figma — notify on OOS sizes
- Design forms in Figma — find-my-size quiz
- Design returns and refunds UI in Figma — exchange size flow
§ Keep reading