figma guide
Designing saved addresses and address book UI in Figma: checkout, defaults, and handoff
Design address book, saved shipping addresses, and checkout address pickers in Figma with default badges, validation states, and Dev Mode specs for ecommerce delivery flows.
- Published
- Updated
- Jun 21, 2026
- Read time
- 8 min
- Level
- Beginner
Quick answer
Address UI spans checkout pickers (select saved vs add new), full address forms with validation, and an account address book with default shipping/billing badges. Build AddressCard (selectable radio variant), AddressForm with country-aware fields, and AddressBookList for account management. Model default address logic, billing-same-as-shipping toggle, address verification warnings, and international field visibility per country. Pair with checkout, forms, and modals. Start from the Figma guides hub.
Who this is for
- Product designers shipping DTC checkout, marketplace delivery, and B2B ordering with multiple ship-to locations.
- Design system teams standardizing address display across checkout, account settings, and order history.
- Engineers implementing address APIs, geocoding autocomplete, carrier validation, and default-address persistence.
Address surfaces
| Surface | Goal | Key components |
|---|---|---|
| Checkout shipping picker | Choose delivery address | AddressCard radio list + Add new |
| Checkout billing picker | Payment address | Same AddressCard; billing label |
| Inline address form | New / edit address | AddressForm |
| Account address book | CRUD + defaults | AddressBookList, AddressBookCard |
| Order detail | Read-only ship-to | AddressSummary compact |
| Modal add address | Quick add from checkout | AddressForm in modal |
Verdict: one AddressCard and one AddressForm reused everywhere—checkout picker, account book, and order detail summary should share the same field order and line-break rules.
AddressCard anatomy
| Part | Purpose | Spec tip |
|---|---|---|
| Radio / checkbox | Selection in checkout | Radio for single-select shipping |
| Name line | Recipient | ”Jane Doe” |
| Street lines | Address body | 1–2 lines; no truncation in picker |
| City/state/ZIP | Localized format | US: “City, ST 12345” |
| Country | International | Show when ≠ store default |
| Phone | Delivery contact | Optional line |
| Default badge | Saved default | Badge “Default shipping” |
| Edit link | Account context | Hidden during checkout radio list optional |
AddressCard
├── Variant: context=checkout | account | readonly
├── Variant: state=default | selected | unselected | disabled
├── Property: addressType (shipping | billing)
├── Property: isDefault (boolean)
└── Layers:
├── SelectIndicator (radio)
├── AddressBlock (name + lines)
├── DefaultBadge (optional)
└── ActionRow (Edit | Delete)Disabled state when address fails carrier validation—show inline alert on card: “We can’t ship to this address.”
Checkout address picker
| Pattern | When to use | UX note |
|---|---|---|
| Saved list + Add new | Returning users with ≥1 address | Default pre-selected |
| Form only | Guest checkout | No picker—full AddressForm |
| Collapsed summary | Single saved address | ”Ship to Jane Doe, 123 Main…” + Change link |
| Map preview | High-trust delivery | Static map placeholder |
Flow for returning users:
- Show saved
AddressCardlist with default pre-selected. - Add new address opens inline form or modal—not a separate route mid-checkout.
- On save, new address auto-selects and returns to picker.
- Continue validates selection before payment step.
Use progress stepper on checkout—address is typically step 2 after cart.
AddressForm fields
| Field | Required | Validation UI |
|---|---|---|
| Full name | Yes | Min length |
| Country | Yes | Drives field visibility |
| Address line 1 | Yes | Autocomplete dropdown |
| Address line 2 | Optional | ”Apt, suite, unit” |
| City | Yes | — |
| State / province | Country-dependent | Dropdown or text |
| Postal code | Yes | Format per country |
| Phone | Often required | E.164 note in Dev Mode |
AddressForm
├── Variant: mode=create | edit
├── Property: country (string)
├── Property: showCompany (boolean)
└── Layers:
├── FieldGrid (responsive 1–2 col)
├── AutocompleteDropdown
├── ValidationMessages
└── SaveButton + CancelLinkApply form input states on every field. Show field-level errors on blur; block submit until resolved.
Autocomplete and verification
| State | Trigger | UI |
|---|---|---|
| Typing | User enters street | Suggestion dropdown below line 1 |
| Suggestion selected | Pick from list | Auto-fill city/state/ZIP |
| Manual entry | User skips suggestions | ”Enter address manually” link |
| Ambiguous | Provider warning | Amber alert: “Confirm apartment number” |
| Undeliverable | Carrier reject | Red alert on save |
| Verified | Success | Optional green check on card |
Prototype autocomplete with 3 static suggestions—note “Powered by Google / Smarty” in Dev Mode for licensing. Do not design custom autocomplete styling that fights provider dropdown z-index.
Billing same as shipping
| Control | Placement | States |
|---|---|---|
BillingSameAsShippingToggle | Below shipping picker | On (default) / Off |
| Billing picker | When toggle off | Same AddressCard list |
| Billing form | When off + no saved | AddressForm with billing label |
BillingSameAsShippingToggle
├── Variant: state=on | off
└── Layers:
├── Checkbox or Switch
└── Label ("Billing address same as shipping")When toggle turns off, scroll billing section into view—users often miss it below the fold. On mobile, consider accordion expand animation.
Account address book
| Element | Purpose | Spec |
|---|---|---|
AddressBookCard | Saved address tile | Edit + Delete actions |
| Default shipping | One per user | Badge + “Set as default” link |
| Default billing | Independent | Separate badge |
| Empty state | No addresses | Empty state + Add CTA |
| Delete confirm | Prevent accidents | Modal if default |
AddressBookCard
├── Variant: layout=list | grid
├── Property: isDefaultShipping (boolean)
├── Property: isDefaultBilling (boolean)
└── Layers:
├── AddressBlock
├── BadgeRow
└── ActionMenu (Edit | Set default | Delete)Place address book under Account → Addresses in sidebar nav. Limit list with pagination if B2B accounts exceed ~10 addresses.
International field rules
| Country pattern | Show state? | Postal format | Notes |
|---|---|---|---|
| US | Yes (dropdown) | ZIP 5 or 9 | State required |
| Canada | Yes (province) | A1A 1A1 | Bilingual labels optional |
| UK | No county required | Postcode | Single line city |
| EU mixed | Varies | Varies | Country picker first |
Document per-country visibility in a field matrix table on the Figma page—engineers map to config, not screenshots alone.
Hide irrelevant fields rather than showing disabled inputs—cleaner mobile forms and fewer validation errors.
Order detail AddressSummary
Read-only compact block on order history detail:
| Line | Content |
|---|---|
| Label | ”Shipped to” or “Delivery address” |
| Body | Same line order as AddressCard |
| Map link | Optional “View on map” external |
Do not redesign address formatting on order detail—support teams compare screen to packing slip.
Responsive behavior
| Breakpoint | Checkout picker | Address form |
|---|---|---|
| Mobile | Full-width cards; sticky Continue | Single column all fields |
| Tablet | 2-column card grid in account | 2-column city/state |
| Desktop | List left, map preview right optional | 2-column field grid |
On mobile checkout, cap visible saved addresses at 3 with Show all addresses expand—long lists push payment below fold.
Handoff checklist
| Item | Dev Mode annotation |
|---|---|
| Default address API | Single default per type |
| Guest vs logged-in | Save address checkbox on guest form |
| Autocomplete provider | Google / Mapbox / Smarty |
| Field visibility config | Per-country JSON |
| Phone format | Required for carrier SMS |
| PO box restrictions | Error copy for carriers that block |
| Military / APPO addresses | Separate validation rules |
| Delete default address | Promote another or force pick |
| Analytics | select_address, add_address, edit_address |
| Accessibility | Radio group label; field autocomplete attrs |
Use Dev Mode checklist and link AddressForm field names to backend schema.
Common mistakes
| Mistake | Why it hurts | Fix |
|---|---|---|
| Different address layout per screen | Support confusion | One AddressBlock component |
| State field for all countries | Invalid submissions | Country-first field rules |
| No default badge | Wrong repeat shipments | Default shipping + billing badges |
| Edit opens new page mid-checkout | Abandonment | Modal or inline expand |
| Truncated street in picker | Wrong address selected | 2-line street minimum |
| Billing hidden without toggle | Card AVS failures | Explicit billing section |
Recommended workflow
- Define country support list and required fields per region with PM/ops.
- Build
AddressFormwith country-driven visibility variants. - Create
AddressCardfor checkout radio picker and account book. - Add checkout flow saved list + Add new + billing toggle.
- Design account address book with default badges and delete confirm.
- Add
AddressSummaryto order detail read-only. - Prototype autocomplete, validation errors, and billing toggle off.
- Spec carrier undeliverable and PO box error copy with ops.
FAQ
Address book vs checkout-only save?
Both—guest checkout offers “Save for next time” after account creation; logged-in users manage full book in account.
Company / B2B address fields?
Add optional Company name and Department on AddressForm with showCompany=true variant—common for B2B checkout.
Pickup point / locker delivery?
Separate DeliveryMethodCard before address picker—when pickup selected, hide AddressForm and show location search UI.
Address used on active subscription?
Block delete with modal: “This address is used for your subscription—update subscription first.”
Next steps
- Design shopping cart and checkout UI in Figma — checkout steps and OrderSummary
- Design forms in Figma — input states and validation
- Design order history UI in Figma — shipped-to summary
- Design modals and dialogs in Figma — add-address modal pattern
§ Keep reading