figma guide
Designing order history and order tracking UI in Figma: status, timeline, and handoff
Design order history lists, detail pages, shipment timelines, and reorder flows in Figma with status badges, tracking links, and Dev Mode specs for post-purchase UX.
- Published
- Updated
- Jun 19, 2026
- Read time
- 7 min
- Level
- Beginner
Quick answer
Order history UI is an account list of past orders—each row shows order ID, date, status badge, item preview, and total—drilling into an order detail page with line items (reuse cart LineItem), shipping address, payment summary, and a shipment timeline (ordered → shipped → out for delivery → delivered). Build OrderRow, OrderStatusBadge, and TrackingTimeline as components; model partial shipments, cancellations, and returns as first-class states. Pair with checkout confirmation, progress steppers, and tables. Start from the Figma guides hub.
Who this is for
- Product designers shipping post-purchase account areas for DTC, marketplace, and subscription brands.
- Design system teams standardizing order states across web, email, and mobile app shells.
- Engineers implementing status webhooks, carrier tracking deep links, reorder APIs, and return flows.
Order account surfaces
| Surface | Goal | Key components |
|---|---|---|
| Order history list | Scan past purchases | OrderRow, filters |
| Order detail | Full receipt + actions | OrderDetail, read-only LineItem |
| Tracking view | Shipment progress | TrackingTimeline, carrier link |
| Confirmation (post-checkout) | Immediate receipt | ConfirmationCard — same data model |
| Email receipt | Async confirmation | Static mock aligned to detail page |
Verdict: design confirmation and order detail from one OrderSummary component set—confirmation is “detail without account chrome,” not a separate visual language.
OrderRow anatomy
| Part | Purpose | Spec tip |
|---|---|---|
| Order ID | Reference | #10482 monospace optional |
| Date placed | Context | Relative on mobile (“Jun 12”) |
| Status badge | Current state | OrderStatusBadge |
| Item preview | 1–3 thumbnails + “+2” | Reuse product thumbs from cart |
| Total | Order total | Price display md |
| Primary action | Contextual | Track / Reorder / View details |
OrderRow
├── Variant: density=compact | comfortable
├── Property: status (enum)
├── Property: itemCount (number)
└── Layers:
├── MetaRow (ID + date + badge)
├── ItemPreviewStrip
├── TotalColumn
└── ActionButtonList layout: table on desktop; stacked cards on mobile with chevron affordance for drill-down.
Order status system
| Status | Badge color token | User-facing copy | Actions shown |
|---|---|---|---|
| Processing | neutral | Processing | Cancel (if allowed) |
| Confirmed | info | Confirmed | — |
| Shipped | info | Shipped | Track package |
| Out for delivery | info | Out for delivery | Track |
| Delivered | success | Delivered | Reorder, Return |
| Cancelled | neutral | Cancelled | Reorder |
| Returned | warning | Returned | — |
| Partially shipped | warning | Partially shipped | View details |
Use semantic color tokens—never hard-code green/red hex per row. Document enum in Dev Mode so backend status maps 1:1 to badge + copy.
Order detail page zones
| Zone | Content | Component |
|---|---|---|
| Header | Order ID, date, status, actions | OrderDetailHeader |
| Timeline | Shipment progress | TrackingTimeline |
| Line items | Read-only products | LineItem variant mode=readonly |
| Shipping | Address, method | AddressBlock |
| Payment | Last4, method icon | PaymentSummary |
| Totals | Subtotal, ship, tax, total | OrderSummary from checkout |
| Help | Contact support, FAQ link | Inline links |
OrderDetailPage
├── Breadcrumb: Account > Orders > #10482
├── OrderDetailHeader
├── TrackingTimeline (if physical)
├── LineItemsSection
├── TwoColumn: Shipping | Payment
├── OrderSummary
└── HelpFooterLink breadcrumb to account navigation patterns if orders live under a tabbed account shell.
TrackingTimeline component
| Step | Icon | Copy | Optional detail |
|---|---|---|---|
| Order placed | Check | Jun 10, 2:14 PM | — |
| Processing | Check | Jun 10, 4:00 PM | Warehouse name |
| Shipped | Check | Jun 11, 9:22 AM | Carrier + tracking # |
| Out for delivery | Current | Jun 12, 7:00 AM | Map pin (link out) |
| Delivered | Pending | Estimated Jun 12 | Signature note |
TrackingTimeline
├── Variant: orientation=vertical | horizontal
├── Property: currentStep (number)
├── Property: steps (number)
└── Layers:
├── StepRow × n (icon + label + timestamp)
└── CarrierLink (external)Horizontal timeline suits desktop hero; vertical stack for mobile. Reuse patterns from progress steppers but read-only—no clickable future steps unless carrier API supports reroute.
Carrier tracking: primary button “Track on UPS” opens external URL; secondary “Copy tracking number” with toast confirmation.
Partial shipments and split orders
Marketplaces often ship items separately—design explicitly:
| Pattern | UI | Notes |
|---|---|---|
| Split shipment | Group line items under Shipment 1 / 2 | Each group has own timeline |
| Backordered item | Row badge “Ships later” | Separate ETA line |
| Digital + physical | Tabs or sections | Download link on digital rows |
Do not show a single “Delivered” badge on the order row when only one of three shipments arrived—use Partially delivered or show worst-case status with detail on drill-down.
Reorder, cancel, and return actions
| Action | Placement | States |
|---|---|---|
| Reorder all | Detail header | default, loading, partial OOS modal |
| Reorder item | Per line (optional) | Disabled if discontinued |
| Cancel order | Header when processing | Modal confirm |
| Start return | Post-delivery | Links to return wizard (separate flow) |
| Download invoice | Secondary | PDF icon |
Reorder flow: success → navigate to cart with items added; partial OOS → modal listing unavailable SKUs with option to add available items only.
Filters and search on order history
| Control | Options |
|---|---|
| Date range | Last 30 days, 6 months, custom |
| Status | All, In progress, Delivered, Cancelled |
| Search | Order ID, product name |
Use search UI patterns compact variant in toolbar. Empty results state: “No orders match” + clear filters.
Pagination for accounts with long histories—default 10 orders per page.
Subscription and repeat orders
If the store sells subscriptions, extend the row model:
| Field | Subscription order | One-time order |
|---|---|---|
| Status | Active / Paused / Next ship date | Standard shipment enum |
| Actions | Manage subscription | Reorder |
| Badge | ”Subscription” chip | — |
Keep one OrderRow with type=standard | subscription property rather than forked components.
Responsive behavior
| Breakpoint | List | Detail timeline |
|---|---|---|
| Mobile | Card stack; swipe optional | Vertical steps |
| Tablet | Two-column meta + preview | Vertical |
| Desktop | Full table | Horizontal above line items |
Sticky Track package CTA on mobile when status is in-transit—mirror PDP sticky buy box pattern with safe-area padding from mobile frames.
Handoff checklist
| Item | Dev Mode annotation |
|---|---|
| Status enum → badge mapping | Table in spec page |
| Tracking URL template | {carrier}/{trackingId} |
| Partial shipment rules | Which status surfaces on list row |
| Reorder API | Full vs line-level |
| Cancel window | Time limit copy |
| Invoice PDF | Endpoint + filename |
| Email parity | Field list must match detail page |
| Analytics | view_order, track_shipment, reorder |
Use Dev Mode checklist and link to checkout handoff for shared OrderSummary props.
Common mistakes
| Mistake | Why it hurts | Fix |
|---|---|---|
| List row shows “Delivered” too early | Trust loss | Aggregate status rules documented |
| No partial shipment UI | Support overload | Shipment groups + per-group timeline |
| Tracking number not copyable | Mobile UX friction | Copy button + toast |
| Reorder ignores variant OOS | Cart errors | OOS modal before add |
| Different totals on email vs account | Finance disputes | Single source field list |
| Timeline without timestamps | ”Where is my order?” tickets | Always show date/time per step |
Recommended workflow
- Extract read-only
LineItemfrom checkout/cart components. - Define status enum → badge + copy table with design tokens.
- Build
OrderRowand list page with filters and pagination. - Compose order detail with timeline, items, shipping, payment, totals.
- Align confirmation page to detail—remove account chrome only.
- Add split-shipment and subscription variants if in scope.
- Prototype list → detail → track external link flow.
- Spec email receipt frame using same components for parity.
FAQ
Show all items or collapse on the list row?
Show up to 3 thumbnails + “+N” overflow—full line list only on detail. Keeps scan speed on mobile.
Guest order lookup without account?
Design Track order page: order ID + email → detail view (read-only). Same OrderDetail component without reorder until sign-in.
Real-time map in Figma?
Use static map placeholder + note “Live map from carrier SDK.” Link out to carrier for MVP.
Returns in scope?
Add Start return CTA on delivered orders; return wizard is a separate post-checkout flow—link placeholder section in Dev Mode if not designed yet.
Next steps
- Design shopping cart and checkout UI in Figma — shared OrderSummary and confirmation
- Design progress indicators in Figma — timeline step patterns
- Design badges and chips in Figma — order status chips
- Design tables and data UI in Figma — desktop order list
§ Keep reading