Bloom is now Rainbrand

(Brand guidelines) // Design tools

Figma brand
guidelines

Figma’s logo, colors, fonts, voice, and dos and don’ts, from the Brand Skill Rainbrand built from figma.com.

Download the Brand Skill
Figma wordmark
  • Red#FF3737
  • Orange#FF7237
  • Purple#874FFF
  • Blue#00B6FF

About Figma

Figma is a collaborative creative platform where teams bring design, code, and AI together to explore ideas, build products, and move work forward. Its voice is clear, optimistic, and grounded in making creative work together.

Use Figma’s own wordmark, standalone symbol, and approved logo variations as the brand marks. Choose the mark that fits the placement, and keep its artwork intact: don’t alter its shapes, proportions, or constituent parts.

Figma colors

  • Red

    Logo color

    HEX
    RGB

  • Orange

    Logo color

    HEX
    RGB

  • Purple

    Logo color

    HEX
    RGB

  • Blue

    Logo color

    HEX
    RGB

  • Green

    Logo color

    HEX
    RGB

  • Black

    Wordmark and text

    HEX
    RGB

  • White

    Backgrounds

    HEX
    RGB

Figma fonts

  • Figma Sans

    Headings · 400, Body · 330

Font names only. The Brand Skill download doesn’t include font files.

Figma’s voice

Write with confident warmth. Make collaboration, forward motion, and creative possibility feel tangible, while keeping product explanations direct and easy to follow. Prefer concise sentences and active verbs; pair an ambitious idea with a practical sense of what people can do together.

  • “Made for the big picture. Perfect down to every pixel”
  • “Your ideas get real in Figma Make”
  • “Ideas no longer have to wait their turn”
  • “Move fast in the right direction on an AI-native canvas”
  • “Build on ideas together in real time”

Dos and don’ts

Do

  • Keep the Figma identity crisp and recognizable. Choose a fitting variation of Figma’s own marks without changing the artwork.
  • Use the logo colors, black and white, and Figma Sans for a coherent identity.
  • Write in a collaborative, optimistic voice that connects creative possibility to useful action.
  • Make product copy clear and specific while keeping its sense of momentum.

Don’t

  • Don’t alter Figma’s marks or incorporate their parts into other artwork.
  • Don’t redraw or approximate the Figma symbol; use the original artwork.
  • Don’t let energetic language obscure what a product or feature does.
  • Don’t make collaboration sound exclusive to designers; Figma’s copy welcomes teams and contributors across roles.

More from the Brand Skill

Marketing and template gallery imagery

Figma’s marketing pages show examples across design, brainstorming, and presentation workflows. Treat them as a guide to how Figma presents its creative tools and community resources, not as a universal required layout or a fixed visual formula.

Editorial and campaign imagery

Figma’s editorial imagery spans product-in-use scenes, portraits, and expressive illustration. Artwork can be colorful, dimensional, and concept-led; choose imagery that supports the story rather than treating any single illustration style as a fixed template.

Product interface imagery

Figma’s own product imagery makes the creative canvas visible: show working files, design controls, prototypes, and workflows that connect design and code. Collaborative boards can show cursors, comments, notes, reactions, and diagramming in use. Keep interface imagery identifiable as a view of Figma’s product, rather than presenting a customer’s finished design as Figma’s own identity.

Download Figma’s Brand Skill

A Brand Skill is a folder of brand guidance written for agents. Give it to Claude, ChatGPT, Cursor or another agent and ask it to follow Figma’s guidelines. It starts at SKILL.md, which points to the right file for each task.

This copy includes the guidance and logos. It leaves out the reference images and font files.

Download the Brand Skill

figma-brand-skill/

├ SKILL.md

├ README.md

├ references/

│ ├ imagery-marketing-gallery.md

│ ├ colors.md

│ ├ logo.md

│ ├ typography.md

│ ├ voice.md

│ ├ dos-and-donts.md

│ ├ imagery-editorial.md

│ └ imagery-product-interface.md

└ assets/logos/

├ figma-lockup.svg

└ figma-icon.svg

Rainbrand’s Brand Agent built this Brand Skill from figma.com on 30 Oct 2026. It isn’t Figma’s official guide. Reviewed by Siddharth Borderwala, Founding Engineer at Rainbrand.

Figma and its logos are trademarks of Figma, Inc. Rainbrand isn’t affiliated with or endorsed by Figma, Inc.

Make one for
your brand.

Add Rainbrand to your agent and give it your website, brand guide or files. Rainbrand builds a Brand Skill like this one and keeps it up to date.

Get startedRead the docs

  1. Open the Rainbrand plugin and add it.

    Open Rainbrand plugin (opens in a new tab)

  2. Connect your Rainbrand account when asked. It works in ChatGPT and in Codex.

See all brands

Rainbrand builds and maintains shared brand context for your agents and products.

Get startedRead the docs (opens in a new tab)