SXL Studio
Introduction

Getting started

Install SXL Studio, understand where it runs in Figma, and follow the first workflow for designers and developers.

What SXL Studio includes

SXL Studio is a Figma-centered workflow suite for design-system teams. It includes:

  • the SXL Studio plugin for Figma files;
  • this documentation site for setup, workflows, and API references;
  • companion utilities for repository and pipeline workflows:

Who this guide is for

  • Designers who manage tokens, data mappings, and design consistency in Figma.
  • Developers who use Dev Mode for inspect workflows, code generation, and Code Connect handoff.
  • Design-system owners who maintain predictable team-wide processes.

Before you start

  1. Make sure you can open and edit the target Figma Design file.
  2. Install SXL Studio from Figma Community.
  3. If your organization restricts plugins, ask your admin to approve SXL Studio.
  4. For Dev Mode workflows, confirm your Figma seat and Dev Mode access.

Figma note: Dev Mode availability and seats are controlled by Figma. Check the official Guide to Dev Mode.

Install and open in Figma Design Mode (for designers)

  1. Open the SXL Studio page in Figma Community.
  2. Click Install (or Open in Figma if already installed).
  3. Open your target file in Figma Design Mode.
  4. Run the plugin using one of these entry points:
    • Resources (Shift + I) -> Plugins -> SXL Studio;
    • right-click menu -> Plugins -> SXL Studio;
    • quick actions (/) -> search SXL Studio.
  5. On first run, review and confirm requested permissions.
  1. Read UI overview.
  2. Set up data/mappings in Database overview.
  3. Configure token workflows in Tokens tab overview.
  4. Validate links and bindings in Inspect overview.

Open SXL Studio in Figma Dev Mode (for developers)

  1. Open the same design file and switch to Dev Mode (Shift + D).
  2. Use built-in codegen in the native Dev Mode Code panel (select SXL Studio language output).
  3. Open the SXL Studio plugin panel from:
    • Dev Mode Plugins tab in the right sidebar, or
    • Resources (Shift + I) -> Plugins -> SXL Studio.
  4. Select layers on canvas to inspect structure, bindings, and generated code.
  5. Continue with Dev Mode overview and Code generation.

Tip: In the Dev Mode plugin panel, only Inspect and Code tabs are shown by design. Database and Tokens stay in Design Mode workflows.

If the plugin does not appear

  • Reopen the file and run SXL Studio again from Resources or the Dev Mode Plugins tab.
  • Verify your organization allows this plugin.
  • Verify your Dev Mode seat/access if you are in developer workflows.
  • Reinstall from Community and retry.

Next steps