SXL Studio
A free design-system workflow for Figma: tokens, data, components and Git.
Plugin 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
| Version | 45 |
|---|---|
| Created | February 16, 2026 |
| Last Updated | August 4, 2026 |
| Category | Import & export plugins |
| Creator | Andy Sobol |
| Stats | 56 installs, 30 likes |
| Pricing | Free |
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)
More Like This
Discover other plugins in the Import & export plugins category.
Free Compressed PDF and Image Exporter (PDF, PNG, JPG, WebP and SVG)
Export compressed PNG, PDF, JPG, SVG, WebP & merge multiple frames into one PDF—fast & easy! 🚀
Color Import / Export
Help design and dev teams stay in sync by providing import and export tools for color palettes
Export/Import Variables
Export variables from one file and import them to another. Supports modes, references, and scopes.