Back to Plugins
SXL Studio

SXL Studio

A free design-system workflow for Figma: tokens, data, components and Git.

Plugin Preview

SXL Studio preview

About this plugin

SXL Studio is a free Figma plugin for teams building real design systems, not just manually maintained colors and styles.It brings design tokens, Figma Variables, Styles, JSON compositions, structured data, Git Sync and Dev Mode tooling into one workflow. Designers can manage the system directly in Figma, while developers get structured JSON, predictable tokens and code-oriented handoff.---What You Can Do→ Manage design tokensCreate and edit design tokens in DTCG-compatible JSON: colors, typography, spacing, sizing, borders, radius, shadows, blur, gradients, grids, motion and more. Use aliases, grouped families, color modifiers, visual editing and raw JSON when you need full control.→ Export to Figma Variables and StylesTurn tokens into native Figma Variables and Styles where supported, so your tokens become reusable library objects connected to your JSON source of truth.→ Switch modes and themesPreview tokens in different mode contexts inside the plugin, then apply Figma Variable modes to the current selection, parent frame or page.→ Generate components from JSON CompositionBuild components and component sets from declarative JSON: structure, variants, slots, styles, variables and bindings. Useful for repeatable UI assembly and design-system component generation.→ Work with real dataConnect JSON/CSV datasets and mapping files to populate components on the canvas. Use it for cards, tables, lists, banners, catalog-like interfaces and product-like screens.→ Sync with GitHub and GitLabPull and push token files, datasets, mappings and configuration through Git. Keep design and engineering aligned around the same source files.→ Use Dev Mode toolingInspect bindings, generate code, review token hints and hand off components with less manual copy-paste.---Who It Is ForSXL Studio is built for design-system teams, product designers, frontend engineers, mobile engineers and anyone who wants Figma, tokens, structured data and code to work together.In ShortSXL Studio turns Figma into a working interface for a production-ready design system.---Learn more: sxl-studio.comFeedback and support: Telegram @AndySobol

Plugin Details

Version45
CreatedFebruary 16, 2026
Last UpdatedAugust 4, 2026
CategoryImport & export plugins
CreatorAndy Sobol
Stats56 installs, 30 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/index.html
  • main:dist/main/code.js
  • Document Access:dynamic-page
  • Network Access:

    Plugin requires network access for GitHub/GitHub Enterprise and GitLab/GitLab self-hosted repository synchronization at any user-configured domain. URLs are constructed only from user-configured Git connection settings (provider + enterprise URL). Bearer tokens are sent exclusively to these constructed API endpoints. Development includes localhost for Remote Connect bridge.

  • Editor Types:
    figma
  • Allowed Domains:
    • *
  • Codegen Languages:
    • DivKit(divkit)
    • JSON (Design)(designer-json)
    • Kotlin(kotlin)
    • React(react)
    • SwiftUI(swiftui)
    • UIKit(uikit)
    • Vue 3(vue3)