Skip to content
Specs

Configuration

Configuration gives you technical control over how specs are created — the same options drive both the Figma plugin and the CLI, so a component produces the same structured output no matter which one generates it.

Two kinds of value exist, whichever surface you set them on:

  • Conventions are facts. Every consumer reading the same library declares the same values, so a wrong value produces incorrect output — undetected glyphs, missed subcomponents, a concept landing on the wrong prop.
  • Settings are choices. A different team could set any of them differently and still be correct — a different value produces merely different output.

Declaring a convention is also what enables its processing: a declared glyphs pattern turns glyph detection on, and an absent block means the library has no such convention. There is no separate on-switch.

The plugin’s Settings tab exposes the same options as the CLI’s config files, right next to the canvas where you’re generating specs.

The plugin's Settings tab, showing the Format section with File, Key case and delimiter, Token, and Color options
The Format section of the plugin's Settings tab.

Format

The Format section controls how spec data is serialized once it’s extracted:

  • Format — Serializes specs as YAML or JSON
  • Keys — Renames keys, such as camelCase or snake_case
  • Naming — Declares the convention your Figma file uses, keeping renamed keys reversible
  • Tokens — Serializes as forms such as a name string or { $token, $type } object
  • Color — Formats color, such as #FF6600 or { colorSpace, components }

Variants

The Variants section controls how variant property combinations are compared and included:

  • Variant Depth — Compares depths such as 1 prop at a time or 9999 (all combos)
  • Empty Variants — Includes variants like { a:2, b:2 } with no overrides
  • Invalid Variants — Includes invalid combos, e.g. disabled:true, hover:true
  • Invalid Combinations — Summarizes as invalidPropConfigurations: { disabled:true }

Elements

The Elements section controls which layers are detected as special-purpose content:

  • Glyphs — Matches names like DS Icon Glyph / check
  • Subcomponents — Matches names like Card / _ / Header within NESTED or PAGE
  • Collapse Primitive Wrapper — Collapses a wrapper around a lone text or glyph child
  • Default Slot Content — Emits authored defaults as slotContentExamples
  • Instance Examples — Detects frames like {C} Example as instanceExamples
  • Images — Captures image fills as backgroundImage or routes them through an image component

Props

The Props section controls how code-only and inferred props are detected:

Layout

The Layout section controls how element hierarchy is represented:

  • Layout — Nests such as layout: or flattens as elements: { parent, children }