Creating Avatars

In today’s Zoom session, I streamed the design and creation process for creating a new Avatar component for G2. This Avatar goes beyond air-bending an image in a circle. Earlier on in the session (but also throughout), we detailed some flexible, intelligent, and DX (designer/developer experience) features, including:

  • Name to initial rendering (e.g. Eileen V. to EV)
  • A range of default (preferred) sizes, which can be customized
  • A set of shape variations (e.g. Circle or Rounded Square)
  • The ability to render a “status dot” in the top corner
  • Tooltip that appears to display the full user name
  • An AvatarGroup that will stack and layer Avatars within
A screenshot with a collection of Avatar components from Storybook.

Thanks to G2’s core systems and the existing component set, in a short amount of time, we were able to prototype an Avatar component that could accommodate a wide range of use-cases (noted above):

The next step is to refactor the prototype code to create the Avatar component for real!

Zoom Session

Here is an upload of today’s Zoom session. A huge thanks to Eileen for collaborating and pairing the entire time!


The Avatar component has been recoded and released! Here are the docs for the new Avatar component.

By Q

I specialize in Design Systems, Interaction, and UI.
I'm a Principal Designer at Automattic.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s