How It Works
The Variable Editor connects directly to your Orbital Shadcn UI Kit through Figma’s variable collections. When you modify a token in the editor, you can export it as a JSON file, then import it back into Figma to apply updates instantly. The editor automatically recognizes your product configuration (Shadcn UI Kit, Brandbook, or Social Media) and loads the corresponding variable collections.Editor Functions
1. Visual Editing
Modify colors, typography, spacing, shadows, and Tailwind tokens directly through a visual interface — no manual variable hunting in Figma. Each change updates live in the preview panel so you can see how new values affect components and themes in real time.2. Dual-Mode Preview
Switch between Light and Dark modes instantly to test contrast, accessibility, and palette balance. Both modes are fully synchronized with Figma’sTheme and Mode collections.
3. Export to JSON
Once your variables are ready, click Export to generate a Figma-compatible JSON file. This file includes all updated tokens and collections, preserving your brand structure and Tailwind alignment.4. Sync to Figma
Import your JSON file directly into Figma using the Import Variables option. In seconds, your entire kit — including typography, color, and spacing — updates automatically without breaking component connections.Connected Collections
The Variable Editor for Orbital Shadcn UI Kit supports all six native collections:| Collection | Purpose |
|---|---|
| Onboarding Info | Stores studio, client, and metadata information. |
| Spacing | Controls layout, padding, and grid spacing logic. |
| Theme | Defines global color tokens for light and dark palettes. |
| Mode | Manages variable links between both themes. |
| Tailwind CSS | Holds reference color scales and utility variables for developers. |
| Typography | Handles font family, size, weight, and line-height scales. |
| Variable Editor | Connects directly to your Orbital Shadcn UI Kit through Figma’s variable collections. |
Why It Matters
Without the editor, maintaining variable consistency in large systems can become complex and error-prone. The Orbital Variable Editor solves this by centralizing everything in one place — color palettes, typography, shadows, spacing, and Tailwind tokens — letting you control your entire UI kit visually. This not only saves time but also guarantees that what you design in Figma behaves exactly like what’s coded in production.Best Practices
- 🔄 Export frequently after making major variable updates to ensure synchronization.
- 🧠 Keep JSON files versioned — treat them like code releases.
- 🎨 Preview before syncing to confirm accessibility and color contrast.
- 💾 Backup your base variables before importing new ones.
- ⚙️ Avoid renaming variables manually inside Figma; always do so from the editor for safe updates.
Tip: The Orbital Variable Editor is more than a customization tool — it’s your live connection between Figma and code. Every JSON export acts as a visual commit, keeping your design system in perfect sync with your development environment.