Shipfaster: UI Components


Avatar (also known as Userpic) is a component through which the user identifies themselves or others people.


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.

Here are the following types of content that can be used for Avatar: Blank (aka empty state), Initials, and User’s photo or image. Depending on the situation, you can use a variety of options for the color and sizes of avatars.

When to use

  • To show a gateway to your own profile and settings in dashboards and web-apps.
  • Use an avatar to help a user in the platform efficiently identify another person or an organization.
  • When an avatar photo is unavailable, fall back to initials or first initials.


Best Practices

  1. The most common practice of showing the status of a user is to place a colored indicator at the bottom right corner of an avatar:
    The green color indicates online status, gray — offline.
    The filled shape is used for online status, empty shape — for offline (alternative choice).
  2. For better recognition, the color palette can be diversified. 40–48dp Avatars are commonly utilised in content blocks or lists. Headers, Appbars, etc. are the main targets for Avatars with 24–40dp width. If you want to use Avatars in templates, such as Profile, Settings, etc., then you should use 56+dp.

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

Outline: Figma’s Ultimate Wireframe Kit

Stay on top of testing ideas and prototypes with a wireframe kit that simplifies your process

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