Shipfaster: UI Components

Progress step

Visual representation of a user’s progress through a set of steps, guiding toward the completion of a specified process.


Breadcrumbs are used when you have a large amount of content organised in hierarchical structure with defined categories (multiple sections that can be divided into more sub-sections). An excellent example is e-commerce site, in which a large variety of products is grouped into logical categories. They inform visitors of their current location in relation to the entire site hierarchy. Whereas they also improve the find-ability of site pages. The structure of the site is more easily understood because it is laid out in a breadcrumb.

Use progress indicators to keep the user on track when completing a specific task. By dividing the end goal into smaller, sub-tasks, it increases the percentage of completeness as each task is completed.

When to use

  • When you want to display a large process broken down into smaller steps.
  • When you want to display the entire journey which the user is into.


Anatomy of progress step
  1. Completed step: Indicates a completed step of the journey.
  2. Active step: Indicates the current step the user is on.
  3. Future step: Indicates what steps lie ahed in the journey.
  4. Step Label: Optionally add a progress step label to provide context on what each step is about.

Best Practices

  1. Display the steps in order from left to right (or) top to bottom. Indicate to the user that they are performing a multistep process, and show the direction of movement. Allow the user to return to a previous step to review their data submission.
  2. Keeping the user informed of where they currently are within the process or task at hand will give them a sense of control. Clear labels should accompany the progress indicator to indicate what the user will accomplish within each step. Keep labels between one to two words
  3. Use validation to confirm that a previous step has been completed. If the user cannot proceed onto another step without first completing a task, use an Inline Notification to inform them.

Recommended resources

Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.

All Products

Shipfaster UI: Figma UI Kit & Design System

Access 8,000+ Customizable components to supercharge your design workflow.

Pricing Icon
3,200+ of Downloads
Review Stars
3,200+ downloads
Learn More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.