SXL Studio
Dev Mode

Overview

Dev Mode in SXL Studio: tools for frontend, iOS, and Android developers — code generation, variable inspection, Code Connect.

What Dev Mode is for

Dev Mode is a set of SXL Studio tools for developers: Frontend (CSS/Vue), iOS (SwiftUI), and Android (Kotlin Compose). Instead of manually translating designs into code, Dev Mode automatically generates components, shows bound variables in the correct syntax, and bridges Figma with the codebase.

Two modes of operation

SXL Studio works in Figma Dev Mode in two ways:

1. Built-in Codegen (Inspect → Code tab)

The plugin registers as a Codegen provider in Figma. When a developer opens Figma Dev Mode and selects an element, SXL Studio tabs appear in the Code panel:

  • Vue 3 — full SFC component
  • JSON Design — Composition JSON with sections
  • SwiftUI — Swift component code
  • Kotlin — Kotlin Compose code

This works without opening the plugin window — tabs are available natively in the Dev Mode interface.

2. Plugin panel in Dev Mode

When launching the plugin in Figma Dev Mode, an extended interface opens. The panel is tuned for developer workflows: database and tokens are not loaded (saves memory and start-up time) and the Tokens tab is hidden. Only two tabs remain:

  • Inspect — Dev Inspect Hub (the main workspace):
    • Info — name, library, Node ID, Component Key, layer type (component / instance / component set)
    • MCP — MCP bridge settings and quick actions
    • Object Model — box model, scope chip with Reset, active layer highlighted with an accent bar, visual component preview
    • Code — cross-platform code generation with section switching
  • Code — a tree browser of .vue files in the repository with a Monaco editor, Git save, and the Ctrl/Cmd + S shortcut.
Two Dev Mode operation modes: built-in Codegen and plugin panel

What developers get

Variables in the right syntax

For each bound token/variable, Dev Mode shows:

PlatformVariable format
CSSvar(--color-primary)
JSON{color.primary}
SwiftUIValue from figma.codeSyntax.iOS or PascalCase
KotlinValue from figma.codeSyntax.Android or camelCase

Code generation

When selecting a component (or Component Set with variants), full code is generated:

Vue 3 SFC:

  • <template> — structure from the node tree
  • <script setup> — props, defaults, computed classes
  • <style module> — styles from token bindings
  • Variables tab — CSS variables

SwiftUI:

  • Struct/View with modifiers
  • Color, Font, Spacing extensions
  • Variables (Swift) tab

Kotlin Compose:

  • Composable function
  • Colors, Typography, Spacing objects
  • Variables (Kotlin) tab

JSON Design:

  • Full Composition JSON
  • Sections: Props, Component Properties, Structure, Styles
  • Bindings and themeBinding
Generating Vue 3, SwiftUI, and Kotlin code from a component

Getting started

  1. Open a file in Figma Dev Mode (the </> button in Figma's top panel)
  2. For built-in Codegen: select an element → in the Code panel, choose SXL Studio: Vue 3 (or SwiftUI, Kotlin, JSON)
  3. For the plugin panel: launch SXL Studio from the plugins menu → the interface adapts to Dev Mode
  4. Select elements on the canvas — code generates automatically