Color

Figma uses a vibrant color palette. While quite open ended in its use, there are some nuances to the application – particularly in how the Figma mark interplays with colors elswhere. This section delves into those nuances.

Paul Rand & Ikko Tanaka

Figma’s colors are rooted in design history – drawing inspiration from modernist such as Paul Rand, and the vibrant color schemes of the Modern era. Given the diversity and energy of these accents we use them sparingly and for maximum impact. This often takes form of simple vector graphics on a black or white background.

While these accents make our brand accessible, we also work to cement our reputation as the premier interface design tool. To do this we telegraph ‘quality’ to a designer audience. Simply put, this means we use a lot of black.

Why do designers wear black? Google search 2018

Figma Colors

Figma uses a bold and vibrant color palette in our communications. We often rely on a dark background to make these colors pop. When possible, a dark background should be used in marketing materials.

#5651FF
#00C05B
#FF2020
#F24E1E
#7043A8

Figma color pallette
Hex:
PMS:
C: M: Y: K:

Figma Wordmark

Figma’s marketing materials use a richer version of the icon’s colors. The marketing colors when paired vibrate, and the contrast is lessened in the icon.

When making marketing materials, veer towards the more intense palette.

Colors used in marketing colors uses in the Figma icon

Color Application

Colors can be applied in combination – in general try not to combine more then 3 colors in a composition.

Black Background

Black should be used as the predominant background color for high impact visual moments. For instance, the homepage of Figma.com, microsites, and other instances where we quickly need to distinguish ourselves.

Figma's homepage using a black background

Color Application

For more bold applications, the accent colors can be used as primary colors. In this case a mono or duo chromatic application is preferred.

Colorful Background

An example of these bolder color applications can also be found on the marketing website. To show off specific features we use bright background colors to distinguish ourselves from other product’s websites and for visual interest.

Sections on Figma's homepage using colorful backgrounds

White Background

For less impactful moments, a white background should be used. These moments need less ‘branding’, and are more generic then our main brand touchpoints. For instance, sub pages on our marketing website.

Figma website subpages using a white background

Tints

Colors can be used in tints of their originals. This can be an effective strategy for monochromatic compositions. Mixing and matching different tints of different colors is discouraged.

Tints of colors used with Figma's shapes

Monochrome

Colors can be used in tints of their originals. This can be an effective strategy for monochromatic compositions. Mixing and matching different tints of different colors is discouraged.

Adjusting provided photos

Gradients

When using gradients, they should feel highly intentional, and subtle. Combining complimentary, or vibrating colors within a single gradient should be avoided. Instead, they should move within an analagous range, and maintain a level of contrast between stops. Furthermore, try and avoid 90° angles in gradients, instead manipulating and blending radial and linear gradients to feel ‘natural’.

When creating color schemes outside of our typical colors, they should communicate a level of ‘quality’. To do this, look for rich and vibrant colors, and ensure a significant amount of contrast (black or complimentary colors)

Gradient recommendations

Icon Color Specs

The following list ideal colors for reproduction of the Figma icon in different media.

Figma Brand Assets

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