AgencyWorkPricing

Products

Start free

Independent study. Not official and not affiliated with Figma.

Figma brand guidelines

The canvas is the brand. Figma keeps its own chrome black, white and quiet so the things people make in Figma supply all the color, and saves its jumbo primitives for campaigns.

Official source: figma.com/using-the-figma-brandUpdated 2026-10-29

Figma: Homepage hero resting state: the collage of Figma-made artboards
© Figma. Shown for study, not for reuse.
Compare your brand

Figma brand guidelines at a glance The short version. Four things to get right before anything else.

Figma brand colors

  • Black#000000
  • White#FFFFFF
  • Grey 54%#757575
  • Hairline#D6D6D6
  • Wash#F5F5F5
  • Red#FF3737
  • Purple#874FFF
  • Green#24CB71

Figma typography

Figma Sans
Every heading on figma.com at CSS weight 400 (renders light), wdth 96 at 56px and up. Open stand-in here: Inter.
Figma Mono
Uppercase footer column heads, dropdown group labels, NEW/BETA badges. Open stand-in here: IBM Plex Mono.

Figma logo guidelines

  • Wordmark in black or white only, chosen for APCA Lc 60 or better
  • Full-color icon on white or black only; the mono outline icon may sit on color
  • Clear space all round equals the mark's height

Figma voice

Plain, Declarative, Calm

  • Sentence case everywhere
  • Figma as an adjective: "the Figma platform"
  • "Tom's plugin for Figma design", not "Tom's Figma plugin"

What makes the Figma brand work Quiet chrome. The work people make supplies the color.

A black-and-white product page where the color comes from the work. One light weight of Figma Sans, square media and a giant black Get started button. Behind it sits a jumbo language of primitives and an expanded palette for campaigns.

Color

A black-and-white frame lets the work people make in Figma be the color.

The Brand Book publishes five icon colors with PMS and CMYK. The 2024 refresh kept the signature purple and added bold primaries, neons and earthy tones in three schemes (Core, Warm, Cool), each a primary plus four secondaries, in light and dark modes. The homepage itself is black and white; color arrives only through product imagery.

Type

Figma wanted one face that works for display and long reading, for designers, developers and newcomers.

Figma Sans (Grilli Type) at one light weight; hierarchy is size alone: 88, 56, 44, 30, 24, 16, 14px. Display sizes use a narrower width (wdth 96) and -1.25px tracking. Figma Mono sets the uppercase labels. The family also has Figma Condensed and Figma Hand (OH no Type).

Logo

The wordmark carries the brand where it is known; the lockup boosts recognition where it is not.

Three marks: the wordmark (preferred), the five-shape icon (full color or mono outline) and a lockup of icon plus wordmark for low-awareness settings. App icons put the mark in a rounded square. Wordmark black or white only, aiming for APCA contrast 60.

  • White bands: 74%
  • Product imagery grid: 15%
  • Black footer: 11%
Not published as a ratio. Measured share of the figma.com homepage height at 1440 (8739px): the black footer is 983px (11%), the full-bleed tools grid 1337px (15%), and the white bands with their framed videos take the rest (74%).

The Figma style guide as a system Four things hold still. Campaigns move the rest.

Fixed, everywhere

  • Wordmark black or white
  • Icon colors never changed
  • One light weight of Figma Sans
  • Square media, black buttons

What varies

Color scheme, primitives and composition move in campaign work.

Do

  • Your branding larger and more prominent than the Figma marks
  • Refer to Figma informationally; say what works with Figma
  • Link to Figma content with the word or logos
  • Screenshots allowed for education

Don't

  • Modifying the marks or merging them into yours
  • "Fig" in your name, domain or handle
  • Implying affiliation or endorsement
  • Imitating Figma's visual identity
  • Figma marks on merchandise

Checks for any piece

Logo hidden

Cover the logo. It should still read as Figma: white page, one light grotesque weight, square product media, a giant black Get started, two-tone heads.

Swap test

Put another SaaS logo on it. If the oversized black button, grey continuation sentences and full-bleed product grid don't feel out of place, it's generic.

Figma brand book examples From the product page to the billboard.

Figma: Homepage hero resting state: the collage of Figma-made artboards
Homepage hero resting state: the collage of Figma-made artboards© Figma. Shown for study, not for reuse. From figma.com.
Figma: "Make. Believe." billboard from the launch post
"Make. Believe." billboard from the launch post© Figma. Shown for study, not for reuse. From figma.com.
Figma: The expanded 2024 palette
The expanded 2024 palette© Figma. Shown for study, not for reuse. From figma.com.
Figma: Friends of Figma stickers and chapter badges
Friends of Figma stickers and chapter badges© Figma. Shown for study, not for reuse. From figma.com.

Evolving our visual language (2024 brand refresh) (2024)

The identity is built in Figma with variables, so the brand demonstrates the product it sells.

Source: figma.com

Figma Sans (2024)

One face serves designers, developers and newcomers alike.

Source: figma.com

Friends of Figma brand refresh (2026)

Chapters get local expression inside one recognisable kit.

Source: figma.com

Figma ads

Figma ad: AgentsAgentsGoogle, Meta · Jul 2026 – nowFigma ad: MakeMakeGoogle, Meta · Apr 2026 – nowFigma ad: Ai native organizationAi native organizationLinkedIn · Oct – Nov 2026Figma ad: Create and collaborate in Figma — because design is…Create and collaborate in Figma — because design is…Google · Mar 2026 – now

All 8Figma ad campaigns →

What generic AI gets wrong about Figma Knowing the colors is not knowing the rules.

These are the slips the rules exist to stop. Our reading of the guidelines, not a test of any one model.

Get started
Wrong. Purple text or buttons: on figma.com brand color lives in imagery, not UI.
Get started
Right. The one call to action: a solid black button with white text on white.
Figma Edu
Wrong. Never connect the wordmark to other words.
Figma
Right. Black wordmark on white, clear space equal to its height.
Tom's Figma plugin
Wrong. Implies Figma made or endorses it.
Tom's plugin for Figma design
Right. Say what works with Figma.
MOVE FAST IN THE RIGHT DIRECTION
Wrong. No bold, no all-caps sans.
Move fast in the right direction.
Right. One light weight, sentence case; a grey sentence follows.

Compare your brand with Figma Your homepage beside the same layout.

Figma

The full-stack creative canvas

Get started
Your brand

Your headline goes here

Your button
TraitFigmaYour brand
Main color#000000 BlackNot read yet
Page ground#FFFFFFNot read yet
Text#000000Not read yet
Headline typeFigma SansNot read yet
Body typeFigma SansNot read yet
Main color on ground21.0:1Not read yet

Get the full brand audit

Figma brand book questions

Where are the official Figma brand guidelines?

Figma publishes them at figma.com/using-the-figma-brand, with a public Brand Book PDF that covers identity and logos. The guide points account holders to a Brand Book inside Figma, which needs a sign-in.

What colors are in the Figma logo?

Five icon colors: red #FF3737, purple #874FFF, green #24CB71, orange #FF7237 and blue #00B6FF. The wordmark is black or white only.

What font does Figma use?

Figma Sans, commissioned from Grilli Type for the 2024 refresh, with Figma Mono for uppercase labels. Both are proprietary. This page uses Inter and IBM Plex Mono as open stand-ins.

Can I use the Figma style guide for my own brand?

No. Figma lists imitating its visual identity as a don't. Study how the system works, then build your own.

Official source and data

Read the official Figma brand guidelines at figma.com/using-the-figma-brand

This is an independent study. Unfairly is not affiliated with, endorsed by or sponsored by Figma. Logos shown from Figma's own icon file and Brandfetch for reference. Figma is a trademark of Figma, Inc. Not affiliated, and not for download.

Data source: the Figma brand book in Steal Unfairly, built from the sources below. Checked 2026-10-29. Status: draft, facts being checked.

What Figma does not publish
  • The Brand Book lists the same RGB (r129, g113, b113) under all five icon colors, an apparent template error; use the published hex values.
  • Minimum logo sizes: not published.
  • Campaign scheme hexes (Core, Warm, Cool and secondaries): not published; shown only as images.
  • Figma Sans, Figma Mono, Figma Condensed and Figma Hand are proprietary; Inter and IBM Plex Mono are calibrated stand-ins.
  • Photography guidance: not published.
  • Grid, spacing and layout rules: not published; all layout values are measured from figma.com on 2026-10-29.
  • Mission statement and boilerplate: not published on the public brand pages.
  • The guide points account holders to a Brand Book inside Figma (sign-in); only the public PDF, which covers identity (logos) only, was used.

The full Figma brand bookUse this brand in ClaudeSpotify brand guidelinesStarbucks brand guidelinesAll brand guidelines examples

Your brand next.

Get your brand auditPut your brand in ClaudeBuild your brand book