# Figma Component Generation — References Map

A knowledge map for LLMs and skills that generate Figma component sets via the Plugin API (typically through the `figma-cli` eval bridge). Each entry links to a focused reference document with patterns, examples, and pitfalls — all forged from real component generation work.

Last generated: 2026-05-26

Source skill: [figma-component-generator](https://github.com/cris-achiardi/claude-skills) (the agnostic, battle-tested base) and Enara-specific extensions.

## How to use this map

LLMs working on Figma component generation should fetch only the refs relevant to the task. The pattern-detection signals below tell you which to load when.

* **###** marks a group of related references
* Each entry links to the canonical document with a one-line description of what it covers
* Cross-references between docs are noted at the bottom of each individual file

When fetching any ref, prefer a verbatim-preserving WebFetch prompt:

> "Return the full content of this file verbatim. Preserve all code examples, ordering rules, and tables exactly. Do not summarize, do not paraphrase."

## References

### Foundations (load for every component)

* [Plugin API Patterns](https://www.giorris.dev/figma/refs/figma-plugin-api-patterns.md) — Eval execution model, connection check, page navigation, font loading, component creation, fills/strokes, variable binding, text nodes, boolean properties, `combineAsVariants`, grid layout. The core API vocabulary for any generation.
* [Sizing Modes](https://www.giorris.dev/figma/refs/rules/sizing-modes.md) — Always relevant. `resize()` overrides sizing modes (must come first), primary vs counter axis flips with `layoutMode`, `'AUTO'` not `'HUG'`, common component sizing patterns by type.

### Project resources (load when present in the design system)

* [Typography](https://www.giorris.dev/figma/refs/figma-typography.md) — Discovering text styles, applying `textStyleId` BEFORE `.characters`, font loading, CSS-token → Figma-style mapping, weight overrides, font-weight conventions.
* [Icon Library](https://www.giorris.dev/figma/refs/figma-icon-library.md) — Discovering an icon component set, typical variant shape (`Icon Name`/`Size`), instancing pattern, semantic-role → icon-name mapping, size selection guide.
* [Map Lookup Table](https://www.giorris.dev/figma/refs/figma-map-lookup.md) — Optional JSON map of component name → Figma node ID for fast dependency resolution. Schema, bootstrap scan, fallback to `findAll`. File location is implementation-defined.

### Variables & Tokens (load when seeding or managing design tokens in Figma)

* [Figma Variables and Libraries](https://www.giorris.dev/figma/refs/figma-variables-and-libraries.md) — Programmatic creation and management of variable collections AND the parallel Effect Styles primitive. Daemon HTTP protocol, Collections/Variables API, naming conventions (slash paths, no dots, half-step dashes), aliasing, the unit-erasure limitation (variables can't carry PIXELS vs PERCENT), text-node direct binding (no TextStyle intermediary), Effect Styles with `setEffectStyleIdAsync` and stale-id fallback, type-guard before binding, bound-count unreliability, effect-spec validation noise, idempotent find-or-create, `figma.config.json` + `assertActiveFile()` preflight pattern, figma-cli wrapper cwd bug.
* [Token Seeding](https://www.giorris.dev/figma/refs/rules/token-seeding.md) — When and how to write seed/sync/inspect scripts: scale design from existing systems (Tailwind etc.), units, idempotency, topological rename ordering, dry-run support, the visualize-before-seeding pattern for non-trivial scales, recommended script template, project layout, verification steps.
* [Color Scale Generation](https://www.giorris.dev/figma/refs/rules/color-scale-generation.md) — OKLCH-based scale generation from designer hex anchors (light/main/dark): pin step assignment with per-family overrides for off-curve hues, the "dark anchor IS the floor at step 950" lesson, synthetic boundary pins, hue-wrap-around interpolation, three-stage source → build → visualize → seed workflow, chroma-js library reference.

### Composition rules (load when the pattern is detected in source)

* [Atomic Dependencies](https://www.giorris.dev/figma/refs/rules/atomic-dependencies.md) — Molecule/organism composing other components. Classification (visual vs layout-wrapper vs compositional), dependency extraction, `createInstance()` with variant selection, missing-dependency handling.
* [Nested Components](https://www.giorris.dev/figma/refs/rules/nested-components.md) — Repeated elements with per-item state (tabs, menu items, list rows). Create the sub-component set first, then use instances in the parent.
* [Slots](https://www.giorris.dev/figma/refs/rules/slots.md) — Dynamic item count. Two patterns (instance-filled for homogeneous items, frame-filled for heterogeneous), the `slot convert` CLI workaround for variants, selection-persistence gotchas.
* [Floating Overlays](https://www.giorris.dev/figma/refs/rules/floating-overlays.md) — Dropdowns, popovers, tooltips, modals, drawers, toasts. Recognize portals/floating-UI libs, choose between split component sets (Shape A) and single-component-with-State variant (Shape B), prototyping considerations.
* [Icon Recoloring](https://www.giorris.dev/figma/refs/rules/icon-recoloring.md) — Figma has no `currentColor` — icon instances must be explicitly recolored per variant. Recursive stroke/fill rebind, matching the sibling text's variable.

## Pattern detection cheat sheet

| Signal in source | Load these refs |
|---|---|
| Any component | Plugin API Patterns + Sizing Modes |
| Text nodes, font tokens | + Typography |
| Lucide imports, icon props, SVG elements | + Icon Library + Icon Recoloring |
| `.map()` with per-item state (`isActive`, `isSelected`) | + Nested Components |
| Array prop with `.map()`, no fixed upper bound | + Slots |
| Floating-UI libs (`@radix-ui/react-popover`, `cmdk`, `@floating-ui/react`), `createPortal`, `position: absolute` overlays | + Floating Overlays |
| Imports other design-system components | + Atomic Dependencies + (optionally) Map Lookup |
| Scaffolding a project; seeding spacing/radius/color/typography tokens; bulk-creating Figma variables; user mentions seed/sync/push tokens | + Figma Variables and Libraries + Token Seeding |
| Building a color palette from designer hex anchors; OKLCH scale generation; chroma-js; user mentions "brand colors", "primitive colors", "color scales", "50-950 steps" | + Color Scale Generation (load on top of the row above) |

## See also

* [Figma Plugin API documentation](https://developers.figma.com/docs/plugins/) — official Figma reference
* [`@figma/plugin-typings`](https://unpkg.com/@figma/plugin-typings/plugin-api.d.ts) — canonical TypeScript definitions for every API surface
* [figma-cli](https://github.com/silships/figma-cli) — the open-source CLI bridge these patterns target