e5b147148e
New 'AI & Automation' top-level nav section with 9 pages: - AI Chat: setup, 87 tools, example prompts - Collaboration: room sharing, cursors, follow mode - JSX Renderer: elements, style props, visual diffing - CLI (4 pages): inspecting, exporting, analyzing, scripting - MCP Server: moved from Reference, setup + 90 tools New CLI reference page in Reference with all 12 commands, every option, alias, and default value. Formatting fixes across all 7 locales: - Wrap enum values in backticks (FRAME, SOLID, ROUND, etc.) - Fix single-backtick code blocks → triple backticks - Use <kbd> for all keyboard shortcuts - Remove implementation details from user guide - Delete stale eval-command.md and mcp-tools.md (14 files) - Update dead links to new locations
66 lines
1.8 KiB
Markdown
66 lines
1.8 KiB
Markdown
---
|
||
title: Analyzing Designs
|
||
description: Audit colors, typography, spacing, and repeated patterns in .fig files.
|
||
---
|
||
|
||
# Analyzing Designs
|
||
|
||
The `analyze` commands audit an entire design system from the terminal — find inconsistencies, extract the real palette, spot components waiting to be extracted.
|
||
|
||
## Colors
|
||
|
||
```sh
|
||
open-pencil analyze colors design.fig
|
||
```
|
||
|
||
Finds every color in the file, counts usage, and shows a visual histogram:
|
||
|
||
```
|
||
#1d1b20 ██████████████████████████████ 17155×
|
||
#49454f ██████████████████████████████ 9814×
|
||
#ffffff ██████████████████████████████ 8620×
|
||
#6750a4 ██████████████████████████████ 3967×
|
||
```
|
||
|
||
## Typography
|
||
|
||
```sh
|
||
open-pencil analyze typography design.fig
|
||
```
|
||
|
||
Lists every font family, size, and weight combination with usage counts. Useful for spotting one-off text styles that should be consolidated.
|
||
|
||
## Spacing
|
||
|
||
```sh
|
||
open-pencil analyze spacing design.fig
|
||
```
|
||
|
||
Audits gap and padding values across auto-layout frames. Helps identify spacing scale inconsistencies — e.g. a stray `13px` gap among otherwise `8/16/24` values.
|
||
|
||
## Clusters
|
||
|
||
```sh
|
||
open-pencil analyze clusters design.fig
|
||
```
|
||
|
||
Finds repeated node patterns that could be extracted into components:
|
||
|
||
```
|
||
3771× frame "container" (100% match)
|
||
size: 40×40, structure: Frame > [Frame]
|
||
|
||
2982× instance "Checkboxes" (100% match)
|
||
size: 48×48, structure: Instance > [Frame]
|
||
```
|
||
|
||
## JSON Output
|
||
|
||
All analyze commands support `--json` for machine-readable output:
|
||
|
||
```sh
|
||
open-pencil analyze colors design.fig --json
|
||
```
|
||
|
||
Pipe into `jq`, feed into CI checks, or use in scripts that enforce design token budgets.
|