Getting started

#What is SXL Studio

SXL Studio is a Figma-centered design-system workflow suite: a plugin, companion utilities, and documentation for cross-functional teams.

It helps teams keep design and code aligned by making core operations structured and repeatable:

• managing tokens and styles as data in Tokens;
• applying tabular content to designs with Database Apply & Generate;
• validating and repairing design links through Inspect: Swap, Rebind, and Token bindings;
• preparing reliable handoff data through Git integration and Dev Mode.

#Project goal

The primary goal of SXL Studio is to reduce friction between design and implementation while keeping design-system operations deterministic.

In practice, this means:

• fewer manual handoff steps and less copy/paste work;
• consistent output across teams and projects;
• explicit rules for tokens, compositions, and mappings;
• a clearer source of truth between Figma and code.

#Installation for designers

1. Open the plugin page in Figma Community.
2. Click Install (or Open in Figma if it is already installed).
3. In Figma, open your file and run the plugin via:
   • Resources (Shift + I) -> Plugins -> SXL Studio, or
   • right-click menu -> Plugins -> SXL Studio.
4. On first run, review and confirm the required permissions.

Recommended start sequence after launch: Introduction -> Database -> Tokens -> Inspect -> Dev Mode.

#Installation for developers (Figma Dev Mode)

1. Make sure the plugin is installed on your Figma account.
2. Open a file in Figma and switch to Dev Mode.
3. Launch SXL Studio from Resources (Shift + I) or the plugins list.
4. Continue with the dev-focused sections:
   • Inspect/Dev Inspect for object and binding analysis;
   • Code Connect / Codegen for engineering handoff outputs;
   • Export assets when raster exports are required.

If your project also uses repository utilities (Bridge/Transformer/Resolver), setup details are documented in Utilities.

#Next steps

• Continue to UI overview for layout and navigation orientation.
• Open Database overview if your workflow starts with data files and mappings.
• Move to Tokens tab overview for design-system and variables workflows.