---
name: Figma
description: "Playful multi-color brand around a quiet, compact editor UI with a single blue selection color."
website: https://www.figma.com
color: "#A259FF"
category: Design tools
icon: figma
updated_at: "2026-10-29"
---

# Figma — DESIGN.md

> An independent summary of Figma's public design language, written by UI Skillbook for coding agents. Not affiliated with or endorsed by Figma. Color values are approximate.

## Overview

Figma separates brand and tool. Marketing is colorful and expressive; the editor is compact, gray and precise so designs on the canvas stand out.

## Color

| Role | Value | Use |
| --- | --- | --- |
| Selection blue | `#0D99FF` | Selection, focus, primary |
| Purple | `#A259FF` | Brand accent |
| Orange-red | `#F24E1E` | Brand accent |
| Editor gray | `#2C2C2C` | Dark panels |

## Typography

Figma Sans (and Inter historically) at small sizes, 11–12px in the editor panels. Marketing headlines are large and bold.

## Spacing and layout

Tight 4px/8px spacing in property panels; inputs are short and compact.

## Components

- Property panels with grouped numeric inputs.
- Floating toolbar with icon buttons.
- Multiplayer cursors labeled with names.
- Colorful illustrated marketing sections.

## Do

- Keep tool chrome neutral so user content stands out.
- Use one selection color consistently.

## Don't

- Don't bring brand colors into editing controls.
- Don't enlarge panel text at the cost of density.

## Prompt for your agent

```
Style this interface in the spirit of Figma's design language, without copying its logo or brand assets.
Playful multi-color brand around a quiet, compact editor UI with a single blue selection color.
Follow the color roles, type and component notes in this DESIGN.md.
```