Skip to content

"Code Only" props in Figma — expanding component API shape for non-visual concerns
Source type Practitioner
Confidence Medium
Last verified 2026-03-20
Topics figma-workflows design-systems

Insight: Figma components can be extended with "code only" properties that express accessibility, behavior, and non-visual logic through a hidden layer technique. A zero-size clipped layer houses TEXT and VARIANT props that correspond to code-level configurations not natively supported by Figma's visual prop types. This bridges the gap between Figma's visually-biased property model and the fuller component API needed for code synchronization.

Detail: Implementation: add a "Code only props" child layer at (0,0) with 0.01 width/height and clipped contents. This layer contains semantically relevant nested instances with props that map to non-visual code properties. The technique lets system designers specify accessibility configurations, behavioral states, and other non-visual concerns as part of the Figma component definition rather than in separate documentation. This enables deterministic, automated processes to consume the full component API shape directly from Figma assets, improving synchronization with iOS, Android, and web implementations.

Sources