Type

Figma’s typography is Modern – aligning with universal ideals and erring towards simplicity. For instance, we avoid serif type within the main brand, and overly ornate typesetting. Practically, we skew towards the minimum number of typographic devices to communicate our message – condensing as many styles as we can within a graphic into a few meaningful gestures.

Font

Apercu's Modern style helps us to strive for simplicity and clarity.

Apercu Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@£$%^&*()_+

Apercu Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@£$%^&*()_+

Apercu Mono

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@£$%^&*()_+

Font Sizes

There aren’t hard lined rules around font-sizes. However, a good rule of thumb is to use the fibonacci sequence to make sure there is appropriate contrast between type sizes.

96

Apercu Regular

64

Apercu Regular

45

Apercu Regular

30

Apercu Regular

15

Apercu Regular

10

Apercu Regular

Text Setting

When setting text, try and maintain a type size/leading ratio of about 1/1.3-1.5. In Figma we automatically default to % for leading – use between 110%-120% leading based on font size.

24/32

Every design begins with same basic elements  –  points, lines, and shapes. Similarly, even the most complex designs can be reduced to these indispensable pieces. It’s our belief that a great design is one where these pieces are used efficiently together.

For instance, early on when designing Figma we often talked about what tools you need to create modern design for screens. We realized that the tool set does not have to be large if the tools are carefully selected and work together well. With a small set of functions (like the vector-network tool or a frame), designers can create a lot of different things to form complex means of expression.

The same is true for communications design. You can create much of our designed world by using a small set of elemental shapes to build things of great complexity. Although the use of primary shapes and colors was famously promoted at the Bauhaus school as fundamental to design, these forms have been part of the language of design for hundreds of years

Type Hierarchy

In all typesetting strive to use as few elements as possible to communicate your message. Minimize the number of font sizes, weights, cuts, etc. whenever possible.

Minimize styles

Outlined Type

Try to avoid outlined type as much as possible.

Don't use outlined type! (except in very specific cases)

Arrows

For using arrows stick with a ratio of 2:1 and a 45º angle to create a balanced look.

Figma's arrow style

Figma Brand Assets

Logo files for print and web, and color specifications: Download Brand Assets