Figma
figma.comPlayful multi-color brand around a quiet, compact editor UI with a single blue selection color.
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.