Skip to main content
The analyze command inspects design files for token usage, inconsistencies, and repeated patterns.

​
Subcommands

CommandDescription
colorsColor palette usage and similar color detection
typographyFont family, size, and weight distribution
spacingGap and padding values with grid alignment
clustersRepeated design patterns (potential components)

​
colors

Analyze color palette usage, detect similar colors, and identify hardcoded vs. variable-based colors.

​
Usage

bunx @open-pencil/cli analyze colors <file> [options]

​
Options

OptionDescription
--limitMax colors to show (default: 30)
--thresholdDistance threshold for clustering similar colors 0–50 (default: 15)
--similarShow similar color clusters
--jsonOutput as JSON

​
Examples

Color usage histogram: 
bunx @open-pencil/cli analyze colors design.fig
Output: 
  Colors by usage

  #0066ff  ████████████████████████████████████████  142
  #1a1a1a  ██████████████████████████████            98
  #ffffff  ████████████████████                      67
  #f5f5f5  ██████████                                34

  unique colors: 47  from variables: 12  hardcoded: 35
Find similar colors: 
bunx @open-pencil/cli analyze colors design.fig --similar
Output: 
  Similar colors (consider merging)

  1. #1a1a1a, #1c1c1c, #1e1e1e  {suggest: #1a1a1a, total: 45×}
  2. #f5f5f5, #f7f7f7, #fafafa  {suggest: #f5f5f5, total: 23×}

​
What It Shows

  • Histogram — colors sorted by usage (fills, strokes, effects)
  • Variable attribution — shows $variableName tag if color is bound to a variable
  • Summary — unique colors, variable-based, hardcoded
  • Similar clusters — groups of colors within the threshold distance (Euclidean RGB space)

​
typography

Analyze font usage: families, sizes, weights, and line heights.

​
Usage

bunx @open-pencil/cli analyze typography <file> [options]

​
Options

OptionDescription
--group-byGroup by: family, size, weight (default: show all styles)
--limitMax styles to show (default: 30)
--jsonOutput as JSON

​
Examples

All styles: 
bunx @open-pencil/cli analyze typography design.fig
Output: 
  Typography styles

  Inter 48px Bold / 56px        ████████████████  24
  Inter 16px Regular / auto     ████████████      18
  Roboto Mono 14px Medium       ████████          12

  unique styles: 15 from 142 text nodes
Group by font family: 
bunx @open-pencil/cli analyze typography design.fig --group-by family
Output: 
  Font families

  Inter          ████████████████████████████████████████  98
  Roboto Mono    ████████████                              24
  SF Pro Display ████████                                  20
Group by size: 
bunx @open-pencil/cli analyze typography design.fig --group-by size
Group by weight: 
bunx @open-pencil/cli analyze typography design.fig --group-by weight
Output: 
  Font weights

  400 Regular    ████████████████████████████████████████  78
  700 Bold       ████████████████████                      42
  500 Medium     ████████                                  22

​
spacing

Analyze auto-layout spacing values (gap, padding) and detect off-grid values.

​
Usage

bunx @open-pencil/cli analyze spacing <file> [options]

​
Options

OptionDescription
--gridBase grid size to check against (default: 8)
--jsonOutput as JSON

​
Examples

Basic spacing audit: 
bunx @open-pencil/cli analyze spacing design.fig
Output: 
  Gap values

    16px  ████████████████████████████████████████  45
     8px  ████████████████████████████              32
    24px  ████████████████                          18
    12px  ████████                                  9  ⚠

  Padding values

    16px  ████████████████████████████████████████  52
    24px  ████████████████████                      28
     8px  ████████████                              15

  gap values: 12  padding values: 8

  ⚠ Off-grid values (not ÷8px)
  Gaps: 12px, 20px
  Paddings: 6px, 18px
Check against 4px grid: 
bunx @open-pencil/cli analyze spacing design.fig --grid 4

​
What It Shows

  • Gap values — itemSpacing and counterAxisSpacing from auto-layout frames
  • Padding values — paddingTop, paddingRight, paddingBottom, paddingLeft
  • Grid alignment — values not divisible by the grid size are marked with ⚠
  • Summary — unique gap/padding values and off-grid violations

​
clusters

Find repeated design patterns that could be extracted into components.

​
Usage

bunx @open-pencil/cli analyze clusters <file> [options]

​
Options

OptionDescription
--limitMax clusters to show (default: 20)
--min-sizeMin node size in px (default: 30)
--min-countMin instances to form cluster (default: 2)
--jsonOutput as JSON

​
Examples

Find repeated patterns: 
bunx @open-pencil/cli analyze clusters design.fig
Output: 
  Repeated patterns

  1. 12× frame "Card" (95% match)
     {size: 320×240, structure: Frame > [Text, Rect, Text×2], examples: 1:23, 1:45, 2:12}

  2. 8× frame "Button" (100% match)
     {size: 120×40, structure: Frame > [Text], examples: 1:56, 1:78, 3:4}

  3. 5× frame "Icon Badge" (88% match)
     {size: 24×24 (±2px), structure: Frame > [Vector], examples: 2:34, 2:56, 3:12}

  clusters: 15 from 1247 nodes (89 clustered)
Adjust sensitivity: 
bunx @open-pencil/cli analyze clusters design.fig --min-count 3 --min-size 50

​
How It Works

  • Signature — nodes are clustered by type, size (rounded to 10px), and child structure
  • Child structure — encodes child types and counts (e.g., Frame > [Text×2, Rect])
  • Confidence score — based on size variance and child count consistency
    • 100% = exact match (same size, same child count)
    • 80–99% = minor variance (±10px, ±1 child)
    • 60–79% = moderate variance (±20px, ±2 children)

​
Use Cases

  • Identify component extraction candidates
  • Audit design consistency
  • Find duplicate artboards
  • Detect copy-paste patterns that should be instances

​
JSON Output

All analyze subcommands support --json: 
bunx @open-pencil/cli analyze colors design.fig --json
bunx @open-pencil/cli analyze typography design.fig --json
bunx @open-pencil/cli analyze spacing design.fig --json
bunx @open-pencil/cli analyze clusters design.fig --json
JSON output includes raw data for further processing (CI linting, design system audits, etc.).