> ## Documentation Index
> Fetch the complete documentation index at: https://docs.orbital.supply/llms.txt
> Use this file to discover all available pages before exploring further.

# Editor

> Visualize, edit, and sync your variables in real time

The **Orbital Variable Editor** is the control center of your Shadcn UI Kit — allowing you to visualize, edit, and sync every variable in real time.

It bridges design and code, giving you a fast, intuitive way to modify colors, typography, spacing, and shadows without ever leaving your browser.

This tool transforms your Figma workflow into a live design system: edit a value once, export, and see the results instantly across all components.

## 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’s `Theme` 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. |

Each collection syncs bidirectionally between Figma and the editor — meaning that once a JSON update is applied, every component stays consistent across the system.

## 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.

## Next Steps

* [License](#) Review usage permissions and redistribution rules.
* [Overview](/shadcn-ui-kit/overview) Return to the introduction for structure and product scope.