FIGR / UI TEMPLATE

Compare Items

Compare shortlisted products or plans side by side using the attributes that matter for a purchase decision. The screen connects Comparison and Saved so product teams can find the “Add item” action while checking compared and attributes.

Use this reference when you need to design this workflow inside an existing product. The example includes practical records such as Northstar Pro plan and Atlas Business plan, rather than an empty visual shell.

Compare Items

BUILD ON THIS

Make it yours in Figr.

Explore this screen, then bring in your own product and design system to shape the next version.

Use this template ↗

At a glance

Screen

Detail

Primary action

Add item

Pattern

Detail

State

Default, loading, empty, error, permission, success

Design system

Adaptable product UI theme

What this screen helps with

Product teams need a clear “Add item” action without losing sight of compared, attributes and the affected records. Keep the decision and its outcome clear before moving to the next task.

What to look for

  • Primary action: Add item is clearly available where the task happens.
  • Main view: Comparison keeps the starting point obvious.
  • Connected view: Saved supplies nearby context.
  • Metric: Compared is visible with a meaningful value.
  • Another signal: Attributes helps people judge what to do next.
  • Representative record: Northstar Pro plan makes the example specific.
  • Second record: Atlas Business plan shows the pattern works beyond one item.

States to consider

  • Record unavailable; show what people can do instead of leaving a blank panel.
  • Loading comparison without changing the layout unexpectedly.
  • Restricted detail or stale status; explain the problem and preserve work.
  • Permission denied for saved; clarify who can continue.
  • Success after choosing Add item; confirm the result and the next step.
  • Network or data refresh failure; offer a retry without losing context.

Where it fits

Comparison → Saved → Add item → Review outcome

Patterns in this screen

Detail, Comparison, Saved, Specs, accessible states, contextual actions

UX choices to review

Prioritize the record status and next action. Put supporting history nearby without competing with the main task.

In this design, people should be able to compare Northstar Pro plan with Atlas Business plan. Make compared clear, then use attributes to explain whether the next step needs attention.

Before handing this to a designer or engineer, check keyboard focus, error copy, permissions and what happens after they choose the “Add item” action. The happy path alone is not enough.

Related UI examples: Favorites & Collections, Discovery Empty State, Recent Items.

Try a similar screen in Figr

Design a compare items screen for our existing software product. Use our real design-system tokens, components and product language. Show Comparison and Saved, include believable records such as Northstar Pro plan, and make add item easy to find. Map loading, empty, failure, permission and success states before you create editable high-fidelity screens.

Open Figr

KEEP EXPLORING

More ways to approach your next screen.

Browse other product UI examples, compare patterns, and pick the direction that suits your product.

Explore all 500 templates ↗