Importing

Learn about importing in Supa Colors Studio.

Overview

Import is currently in beta. It supports most file structures but may not work in all cases. If you encounter issues, please contact support.

Import color palettes from external sources to quickly bring existing color systems into Supa Colors Studio. The import feature supports multiple formats and automatically detects the file type.

To import palettes, navigate to the New System page and click the Import button. You can import up to 5 files at once, with each file creating its own collection and style.

The import process automatically detects the file format, so you don't need to manually select it. Palettes are intelligently parsed from nested groups, with names using slashes for hierarchy (e.g., colors/blue, core/colors/gray).

Each imported file creates separate collections and styles. For example, importing "Light Mode.tokens.json" and "Dark Mode.tokens.json" will create "Light Colors" and "Dark Colors" collections, each with their own styles and patterns.

Palettes must have at least 3 shades to be imported. Single color tokens (like "black" or "white") are automatically excluded. Semantic tokens and aliases are also filtered out to ensure only primitive color palettes are imported.

How Import Works

When you import files, Supa Colors Studio creates a structured Color System that preserves the original color distributions. Here's how it works:

One File = One Collection + One Style + One Pattern

Each imported file creates its own collection, style, and custom pattern. This is important because different files often have different lightness distributions (e.g., light mode vs dark mode), and mixing them would break the color relationships.

Why Separate Collections?

A light mode file typically has palettes going from light (shade 50) to dark (shade 900), while a dark mode file has the opposite direction. Each file needs its own custom pattern to preserve these distributions. By separating them into collections, you can maintain the integrity of each mode.

Why Separate Chromatic and Opacity Palettes?

Within each file, palettes are further separated into chromatic (solid colors) and opacity (alpha/transparent) groups. This is because opacity palettes have different channel distributions — they vary alpha values rather than lightness. Keeping them separate ensures the correct pattern is applied to each type.

Chromatic palettes: Solid color palettes (e.g., blue, red, gray) that vary in lightness and chroma. These get a "Colors" collection (e.g., "Light Colors", "Dark Colors").
Opacity palettes: Transparent color palettes (e.g., overlays, shadows) that vary in alpha. These get an "Opacity" collection (e.g., "Light Opacity", "Dark Opacity").

After import, each collection has its own custom pattern that exactly replicates the original color distributions. You can edit these patterns in the Pattern Editor if needed.

Supported Formats

Supa Colors Studio supports the following import formats:

Figma Variables JSON: Import color palettes directly from Figma Variables JSON exports. Supports nested color groups and automatically excludes semantic/alias tokens.
W3C DTCG (Tokens Studio): Import from W3C Design Token Community Group format, commonly used by Tokens Studio and other design token tools. Supports deeply nested structures.

Figma exports all variables including semantic tokens, but Supa Colors Studio only imports primitive color palettes. Semantic tokens and aliases are automatically filtered out during import.

Export from Figma

You can export color variables directly from Figma using the native export feature:

Open your Figma file with color variables
Open the Variables panel (right sidebar)
Right-click on the collection you want to export
Select "Export modes" from the context menu
Each mode will be exported as a separate JSON file
Import the JSON files into Supa Colors Studio

Export from Tokens Studio

You can also export tokens from Tokens Studio for Figma:

Install the Tokens Studio plugin in Figma
Open the plugin and navigate to your token sets
Click "Export" and choose "W3C DTCG" format
Save the JSON file and import into Supa Colors Studio

After import, you can immediately start editing palettes, adjusting styles, or exporting to your preferred format.

PreviousCollaboration

NextExporting