SXL Studio
Dev Mode

Code Connect & Storybook

Link Figma components to real source files, keep a diff-code-connect registry, and expose design context in Storybook.

What Code Connect does

Code Connect links a Figma component to real implementation files and usage metadata.

In Dev workflows this gives you:

  • docs/code links in Inspect Info
  • code-context tabs in native Figma Codegen output
  • linked-file markers in the Dev Code .vue tree for Vue bindings
  • a Git-friendly registry file your team can commit

Where data is stored

Two storage layers are used:

  1. Node Plugin Data (codeConnect) on component-like nodes
  2. Registry file diff-code-connect.<fileKey>.json (slug fallback when file key is unavailable)

Registry is the durable source of truth used for team sync and Storybook ingestion.

Important Dev Mode constraint:

  • Figma Dev Mode may block writing node Plugin Data / Dev Resources.
  • In that case SXL still writes the registry file and shows a notification to finalize node-level link persistence from Design Mode.

Configuration surfaces in Dev Mode

Global settings (repository/docs)

Open Code tab → Repository connection.

Fields:

  • Figma file URL or key (recommended fallback for $figmaFileKey resolution)
  • Repository URL
  • Storybook / docs (optional)

Component binding (full form)

Open Inspect → Info → Code Connect.

This modal uses the same binding form as the full Code Connect UI and supports:

  • Display name
  • Import path
  • Snippet template
  • Multiple files with per-file framework/path/docs/snippet/instructions
  • Storybook Integration block

The first file row starts as React by default, but you can switch it to Angular, Vue 3, HTML, SwiftUI, Kotlin, or Compose.

Quick bind from Vue editor

In Code tab, open a .vue file and click Connect.

This creates a minimal vue3 file binding for the currently selected component/component set.

This fast path is intentionally Vue-specific because the Dev Code editor currently opens editable .vue files. Use the full Code Connect form for React, SwiftUI, UIKit-adjacent source links, Kotlin, Compose, HTML, or Angular files.

Code Connect fields reference

Main binding fields

  • Display name
  • Import path (optional)
  • Snippet template (optional)
  • Files[]

Per-file fields

  • Framework (React, Angular, Vue 3, HTML, SwiftUI, Kotlin, Compose)
  • File path (repo-relative path or pasted Git blob URL)
  • Storybook/docs URL (optional override)
  • Component name (optional)
  • Import path (optional)
  • Custom snippet (optional)
  • AI instructions (optional)

Storybook Integration

Storybook settings are saved as part of the same registry entry (not as a separate export).

Available controls:

  • Design Embed
  • Composition JSON
  • Metadata
  • Description
  • Tokens (ready/not ready)
  • Status (Complete, Ready for Dev, In Progress, Backlog)

When Composition JSON is enabled, you can pick a composition token file ($type: composition) from plugin token files.

Storybook addon path

Use @sxl-studio/storybook-addon and feed it your registry derived from diff-code-connect.<fileKey>.json.

For addon API/preset details see:

What developers see in Dev Mode and Codegen

  • In Inspect Info: Docs/Code links and source-file links.
  • In Code tree: linked .vue files marked with a check icon.
  • In native Codegen tabs: Code Connect tabs are appended when binding data is available (for example Import & Usage and repository file tabs). They appear next to the selected codegen target (Vue 3, React, SwiftUI, UIKit, Kotlin, DivKit, or JSON) and are also used by the MCP prompt context in Dev Inspect.
  1. Configure Repository connection once.
  2. Bind components through Inspect → Info → Code Connect.
  3. Optionally add Storybook Integration metadata.
  4. Commit diff-code-connect.<fileKey>.json.
  5. Load the registry in Storybook addon configuration.

Troubleshooting

Likely Dev Mode write restriction. Reopen file in Design Mode and resave binding.

No Code Connect tabs in native Codegen

Check:

  • selected node is component-like and actually bound
  • registry entry is linked (linked: true)
  • repository settings are valid

Linked marks missing in Vue tree

Refresh the Code tree and ensure diff-code-connect.*.json is loaded in the active Git scope.

Only vue3 bindings are marked in the Vue tree. Other framework bindings still appear in Inspect Info and Codegen tabs.