Code Generation

#How code generation works

When selecting an element in Figma Dev Mode, SXL Studio analyzes the node tree and generates code for the selected platform. Generation happens automatically when the selection changes.

#Supported languages

#Output sections

Each language generates multiple tabs:

Variables — list of all bound variables in the platform's syntax:

/* CSS (Vue 3) */
var(--color-primary)
var(--spacing-md)
var(--border-radius-lg)

// Swift
ColorPrimary
SpacingMd
BorderRadiusLg

// Kotlin
colorPrimary
spacingMd
borderRadiusLg

Reference Components — list of components used inside the selected element, with their keys and libraries.

Code Connect — links to source code in the repository (if configured). Details in Code Connect.

#View modes: Styled / Decomposed / Raw

At the top of the codegen panel in Dev Mode there is a View Mode switch — it changes how composite tokens (typography, effect, border-radius) are expanded across all languages simultaneously.

Example of the same text node:

/* Styled */
.label {
  font: var(--w-badge-size-md-label);
  color: var(--w-badge-style-ghost-black);
}

/* Decomposed */
.label {
  font-family: var(--ff-product);
  font-weight: var(--fw-medium);
  font-size: var(--fs-label-md);
  line-height: var(--lh-label-md);
  color: var(--w-badge-style-ghost-black);
}

/* Raw */
.label {
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: rgba(26, 27, 31, 1);
}

In Decomposed, the plugin walks the Figma variable alias chain down to the deepest primitive — emitting the actual primitive var(--ff-product) rather than an intermediate wrapper.

#Composite-token staleness rule

The composite typography path (e.g. w.badge.size.md.label) lives in the node's plugin data and can survive a detached TextStyle or manual per-field variable overrides. To avoid a "ghost" font: var(--…) on screen, the plugin applies the rule:

If the node has no linked TextStyle and node.boundVariables contains at least one per-field typo variable (fontFamily / fontSize / lineHeight / …) — the composite path is treated as stale and ignored. In Styled this yields a per-field output (one variable per line); in Decomposed the actual per-field variables always take precedence over the composite.

To force-heal a node — re-apply the composition or re-pick the composite typo token via the Tokens panel: this clears the stale plugin data.

#Debug tab

Alongside the main tabs (Vue3, JSON, …) a Debug tab appears with a trace of the last codegen call: read storedTypoPath / compositionTypoPath, located composite-token sub-wrappers, the alias chain down to primitives, and the compositeStale decision. Use it when Dev Mode shows something unexpected — the trace pinpoints where the decision diverged.

#Vue 3 — details

For a Component Set (component with variants), a full Single File Component is generated:

• <template> — HTML from structure: FRAME → <div>, TEXT → <span>, INSTANCE → component, v-if for boolean properties
• <script setup> — TypeScript props with withDefaults, computed classes for variants, useCssModule()
• <style module> — CSS from token bindings, modifier classes for variants, pseudo-classes for states (hover, active, disabled)

Token references in styles are converted to var(--token-path).

#JSON Design — details

For Composition components, the full JSON is generated:

• Props — variant axes
• Component Properties — component properties (TEXT, BOOLEAN, INSTANCE_SWAP, SLOT)
• Structure — node tree
• Styles — styles by class
• Transitions / Theme Binding — if defined

This is useful for review: developers see the exact JSON component description right in Dev Mode.

#Related sections

• Dev Mode Overview — general structure
• Code Connect — linking to code
• Tokens to Code — bulk code generation from tokens