Figure

Show a thumbnail that represents an entity.

Component only in Figma pre-release, not yet in code.

Maturity

Alpha

FYQ2 target

Alpha

Figma component

Overview

Figures are the visual representation of an entity, like a person, a team, a project/workspace, a category, a maze, or a question block.

An entity is a distinct and independent existence: Person, item, object, thing, etc.

They have a rounded shape and a decorative background color.

Related content

Product Shape

Meaningfully direct attention differentiating entities from standard components.

How to use

Type

A Figure component encompasses three different types of thumbnails:

Icon to communicate core parts of the product and improve recognition.

Initials to identify an entity that the user hasn't defined a picture for.

Pictures are typically defined by people as their avatars.

Size

Figures come in three sizes:

Small (SM – 24px) for Dense layouts.

Medium (MD – 32px) as the default size.

Large (LG – 48px) when the Figure is the focal point, like a detail page.

Crop border

Crop borders prevent image blending in stacked figure groups. It's False by default.

Badge

Use Badges in Figures to communicate the entity’s status in one of the semantic sentiments. It's False by default.

⛔️ Avoid changing the Badge’s default Size, Crop border, or position.

Badges are applied to Figures proportionally according to their parent’s size.

✅ Keep the Badge's default values.

To keep the visual proportions of the component and its predictability.

Background

Background colors are decorative, have no semantics, and don’t follow any set pattern. Its only function is to help differentiate between entities and provide a touch of color.

We’ll work on providing a more meaningful purpose in the future. Do you have a proposal? Let's talk!

⛔️ Avoid using colors from the Semantic or RAW palettes.

Semantic colors carry meaning, and might get changed in the future. Using RAW colors might lead into accessibility or usability issues.

✅ Leverage the Background's default decoration colors.

We made a selection of our 500 colors, which are accessible pairs with Neutral000, and have enough visual weight.

Icon

Each Figure size includes Icons in predefined sizes to give them enough room to breathe inside their bounding box.

⛔️ Avoid changing the Icon’s default Size.

Sticking icons too close to their container drowns them out and makes the interface look busier.

✅ Keep the Icon's default values.

White space will make the icons shine and make them easier to understand.

Quality checklist

This component passes the following requirements described in our Component lifecycle.

Maturity

Alpha

α · Design tokens

It uses Ariane design tokens.

α · Official assets

It uses the official Ariane assets (e.g., icons and illustrations) in one of the official sizes.

α · Accessible use of color

Its color contrast ratio is at least 4.5:1 for text and interactive areas.

α · Naming agreement

Its name is agreed upon and shared between design and development.

β · Docs L1

It has essential documentation with at least primary usage.

β · Use cases

All the uses are audited and refined.