# compare /figma  Paper vs Figma

Real HTML/CSS canvas vs proprietary design tool

Paper is a professional design tool built on real HTML and CSS — a web-native approach that makes it easy for AI agents to read and write on the canvas and get your work ready for production. Unlike Figma, Paper has built-in solutions for advanced color features (P3, OkLCH), visual effects powered by shaders, native CSS features like real flexbox, CSS filters, and more.

Figma stores designs in a proprietary WebGL format that developers and AI agents need to translate into production code. Paper is a native, agent friendly format that is closer to your production code.

## Key Differences

### Canvas model
- **Paper**: Real HTML/CSS — web-native, no translation step  
- **Figma**: Proprietary model (WebGL-based canvas)

### Styling & effects
- **Paper**: Real CSS styles, outlines, shadows, filters, plus a big collection of visual effects powered by shaders  
- **Figma**: Borders, shadows, blur as abstracted properties — require translation to CSS

### Color spaces
- **Paper**: sRGB and Display P3 simultaneously — mix oklch(), display-p3, and hex per element, just like production CSS  
- **Figma**: sRGB or P3 as a file-wide toggle — can't mix color spaces in the same file

### Color models
- **Paper**: OkLCH/Oklab — perceptually uniform, equal numeric changes = equal perceived changes  
- **Figma**: HSB/HSL picker — perceptually inconsistent across hues

| Feature | Paper | Figma |
| --- | --- | --- |
| Canvas model | Real HTML/CSS — web-native, no translation step | Proprietary model (WebGL-based canvas) |
| Styling & effects | Real CSS styles, outlines, shadows, filters, plus a big collection of visual effects powered by shaders | Borders, shadows, blur as abstracted properties — require translation to CSS |
| Color spaces | sRGB and Display P3 simultaneously — mix oklch(), display-p3, and hex per element, just like production CSS | sRGB or P3 as a file-wide toggle — can't mix color spaces in the same file |
| Color models | OkLCH/Oklab — perceptually uniform, equal numeric changes = equal perceived changes | HSB/HSL picker — perceptually inconsistent across hues |

## Other Comparisons

- [Paper vs Pencil](/content/compare/pencil/index.html) — Pro-grade design tool vs design-as-code canvas