SXL Studio
Dev Mode

Overview

Dev Mode in SXL Studio: native Figma Codegen + plugin Dev workspace for frontend and mobile developers.

What Dev Mode gives you

Dev Mode in SXL Studio is a developer-focused workflow for:

  • Frontend (Vue 3, React, CSS)
  • iOS (SwiftUI, UIKit)
  • Android (Kotlin Compose)

You get code generation directly from canvas selection, token-aware variable output, and codebase linking via Code Connect.

Two entry points in Figma Dev Mode

SXL Studio works in Dev Mode in two parallel ways.

1. Native Figma Code panel (built-in Codegen provider)

SXL Studio registers Codegen languages in Figma Dev Mode:

  • Vue 3
  • React
  • JSON (Design)
  • SwiftUI
  • UIKit
  • Kotlin
  • DivKit

This path works without opening the plugin UI: select a node on canvas, then open Figma's Code panel.

2. SXL Studio plugin window in Dev Mode

When you open the plugin in Dev Mode, SXL switches to a compact developer shell:

  • Only Inspect and Code tabs are shown
  • Database/Tokens editing UI is hidden in this shell

Inspect tab (Dev Inspect Hub)

The Dev Inspect Hub has four accordions:

  • Info
  • MCP
  • Object model
  • Code

Default state on open:

  • Info collapsed
  • MCP collapsed
  • Object model collapsed
  • Code expanded

What each section is for

  • Info: layer identity (name, library/source navigation, Node ID, Component Key), plus Docs/Code links from Code Connect/global repository settings.
  • MCP: copy-ready prompt context and quick hints for Remote/MCP workflows.
  • Object model: scope-aware layer list, geometry/box model, token-bound property rows, and preview.
  • Code: language switch (Vue 3, React, SwiftUI, UIKit, Kotlin, DivKit, JSON), section switch, and view mode switch (Styled, Decomposed, Raw) with copy action.

The generated output in this section is produced on the main thread by the same codegen pipeline used by native Figma Codegen.

Use the gear button in the Code section to adjust file-level codegen defaults for the current Figma file: icon component/name rules, boolean and swap prop templates, root CSS class, class casing, component import path, Swift token enum, drawable prefix, optional data-testid, and header comments.

Code tab (Vue repository workspace)

The Code tab is a .vue repository workspace:

  • Left: lazy tree of repo files from your configured Code folder
  • Right: Monaco editor with View diff, Save & Publish, and Connect

Key behavior:

  • only .vue files are editable from this tree
  • Cmd/Ctrl + S triggers Save & Publish
  • save includes preflight remote check and conflict dialog
  • linked Vue files are marked in the tree using the Code Connect registry

In Dev Mode this Git connection is code-only. Database and Tokens are still managed from Design Mode sync settings, so a Code-folder-only connection can show "nothing to pull" for data/token sync.

Export assets in Dev Mode

Raster export is available from Dev workflows:

  • Inspect empty state: Export Asset…
  • Object model section: Export asset
  • Footer Export button: Download modal

All routes open the same Download modal with the Export Asset tab.

Important Dev Mode constraints

  • In Dev Mode, writing node Plugin Data / Dev Resources can be restricted by Figma context.
  • SXL still persists bindings to diff-code-connect.<fileKey>.json (or slug fallback), so team-visible registry data stays consistent.
  • To fully persist node-level metadata when Figma blocks writes, reopen the same file in Design Mode.
  1. Configure repository settings in Code → Repository connection.
  2. Inspect a component in Inspect → Code for generated Vue, React, SwiftUI, UIKit, Kotlin, DivKit, or JSON output.
  3. Open a .vue file in Code, edit, review diff, publish.
  4. Link implementation with Connect (quick) or full Code Connect form from Inspect → Info → Code Connect.