--- title: "Figma brand guidelines: logo, colors and fonts | Rainbrand" description: "Figma’s logo, colors (#FF3737, #FF7237, #874FFF), fonts (Figma Sans), voice, and dos and don’ts, with a Brand Skill for your agents." url: "https://www.rainbrand.com/brand-guidelines/figma/" --- (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](https://www.rainbrand.com/brand-guidelines/figma/figma-brand-skill.zip) ![Figma wordmark](https://www.rainbrand.com/_next/image?url=%2Fbrand-guidelines%2Ffigma%2Ffigma-lockup.svg&w=3840&q=75&dpl=dpl_8zv7npXJR9sMH7dgRdivLL1jQMCy) - 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. ## Figma logo - ![Figma wordmark](https://www.rainbrand.com/_next/image?url=%2Fbrand-guidelines%2Ffigma%2Ffigma-lockup.svg&w=3840&q=75&dpl=dpl_8zv7npXJR9sMH7dgRdivLL1jQMCy) Wordmark · SVG [Download Figma wordmark](https://www.rainbrand.com/brand-guidelines/figma/figma-lockup.svg) - ![Figma logo symbol](https://www.rainbrand.com/_next/image?url=%2Fbrand-guidelines%2Ffigma%2Ffigma-icon.svg&w=3840&q=75&dpl=dpl_8zv7npXJR9sMH7dgRdivLL1jQMCy) Icon · SVG [Download Figma logo symbol](https://www.rainbrand.com/brand-guidelines/figma/figma-icon.svg) 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 #FF3737 Copy HEX RGB 255, 55, 55 Copy RGB - Orange Logo color HEX #FF7237 Copy HEX RGB 255, 114, 55 Copy RGB - Purple Logo color HEX #874FFF Copy HEX RGB 135, 79, 255 Copy RGB - Blue Logo color HEX #00B6FF Copy HEX RGB 0, 182, 255 Copy RGB - Green Logo color HEX #24CB71 Copy HEX RGB 36, 203, 113 Copy RGB - Black Wordmark and text HEX #000000 Copy HEX RGB 0, 0, 0 Copy RGB - White Backgrounds HEX #FFFFFF Copy HEX RGB 255, 255, 255 Copy 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](https://www.rainbrand.com/brand-guidelines/figma/figma-brand-skill.zip) 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 started](https://www.rainbrand.com/auth/sign-in) [Read the docs](https://docs.rainbrand.com/mcp/getting-started) ### ChatGPT + Codex 1. Open the Rainbrand plugin and add it. [Open Rainbrand plugin](https://chatgpt.com/plugins/plugin_asdk_app_6ac6e5030ec88191a88001f6dc0628ca) 2. Connect your Rainbrand account when asked. It works in ChatGPT and in Codex. ### Claude 1. Open the Rainbrand connector in Claude and add it. [Open Rainbrand connector](https://claude.ai/customize/connectors?modal=add-custom-connector&connectorName=Rainbrand&connectorUrl=https%3A%2F%2Fmcp.rainbrand.com%2Fmcp) 2. Select Connect, then sign in to Rainbrand. You can also install the [Rainbrand Skill](https://docs.rainbrand.com/mcp/getting-started#standalone-rainbrand-skill) or the [plugin](https://github.com/rainbrandai/rainbrand-skills/releases/latest/download/rainbrand.claude-plugin.zip). ### Claude Code 1. Add Rainbrand's plugin marketplace in your terminal. ``` claude plugin marketplace add rainbrandai/rainbrand-skills ``` 2. Install the Rainbrand plugin, including its Skill and MCP connection. ``` claude plugin install rainbrand@rainbrand ``` 3. Start a new Claude Code session, then use /mcp to sign in to Rainbrand. You can also [connect with MCP](https://docs.rainbrand.com/mcp/getting-started#claude-code-installation-options) or install the [Rainbrand Skill](https://docs.rainbrand.com/mcp/getting-started#standalone-rainbrand-skill). ### Cursor 1. Add Rainbrand to ~/.cursor/mcp.json. ``` { "mcpServers": { "rainbrand": { "url": "https://mcp.rainbrand.com/mcp" } } } ``` 2. Sign in from the Cursor CLI. ``` agent mcp login rainbrand ``` You can also install the [Rainbrand Skill](https://docs.rainbrand.com/mcp/getting-started#standalone-rainbrand-skill) or the [plugin](https://github.com/rainbrandai/rainbrand-skills/releases/latest/download/rainbrand.cursor-plugin.zip). ### API 1. Create an API key in your account settings, then list your brands. ``` curl https://www.rainbrand.com/api/v1/brands -H "x-api-key: $RAINBRAND_API_KEY" ``` Integrating Rainbrand into your app? [Read the API docs](https://docs.rainbrand.com/api). ## More brand guidelines [See all brands](https://www.rainbrand.com/brand-guidelines/) - [Framer brand guidelines](https://www.rainbrand.com/brand-guidelines/framer/) Design tools - [Webflow brand guidelines](https://www.rainbrand.com/brand-guidelines/webflow/) Design tools - [Anthropic brand guidelines](https://www.rainbrand.com/brand-guidelines/anthropic/) AI The brand layer for agents. Rainbrand builds and maintains shared brand context for your agents and products. [Get started](https://www.rainbrand.com/auth/sign-in) [Read the docs](https://docs.rainbrand.com/)