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
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.
