Getting Started with BaseFrame

BaseFrame is a design token management platform. It lets you create, edit, and export a complete W3C DTCG-compliant token set — either by uploading a brand image and letting AI build it for you, or by starting from scratch and writing tokens by hand. The output works directly with Style Dictionary, Tailwind, SCSS pipelines, and Figma via the BaseFrame Figma plugin.

This article walks through the full flow, from your first login to syncing tokens with Figma.

Step 1 — Your first token set

When you log in, you land on the Dashboard. From there you can create a token set two ways:

New Set opens an empty editor where you write your own tokens from scratch. This is the right path if you already have a token structure and just want a place to manage and export it.

Generate Set uses AI to build a complete token set from an image. Upload a PNG, JPG, or WebP — a logo, a brand kit screenshot, or any image that captures the brand's colors. BaseFrame's AI analyzes it and produces a full token tree a few seconds.

First, it identifies your dominant brand colors and the UI's overall tone — whether it skews light or dark, and which neutral palette (stone, slate, zinc) fits the brand best. Second, it generates a 50–950 color scale from those colors, then assembles a complete DTCG token tree with primitive and semantic layers for both light and dark mode.

The whole generation takes a few seconds and when it's done, you're free to manage your new token set.

---

Step 2 — Understanding your tokens

Every BaseFrame token generated set is structured in two layers.

Primitive tokens are the raw values — every step of your color scales, every spacing increment, every radius value. You don't use primitives directly in components. They're the source of truth that semantic tokens reference.

Semantic tokens are aliases. Instead of holding a hex value, they point to a primitive:

{
  "semantic": {
    "background": {
      "page": {
        "$value": "{primitive.color.neutral.50}",
        "$type": "color"
      }
    }
  }
}

BaseFrame generates this two-layer structure automatically when you use the AI generator. If you start from scratch, you can build it yourself the same way.

We encourage having different themes on different token sets (one file for light mode, one file for dark mode). This approach is an industry strandard for effortless mode changes and also allows you to use modes when importing to Figma.

Since W3C DTCG format doesn't specify a native solution for cross-file referencing so primitive and semantic tokens must all live in one file or be processed by a third party tool like Style Dictionary.

---

Step 3 — Editing and managing tokens

The token editor sits in the center of every token set page. Once you import or generate your set, you can create groups, add new tokens, change values, and reference other tokens. The editor also comes with a set of features to track your tokens' health and issues with token types, values, and references.

Import an existing DTCG JSON file into the set. If any incoming token keys conflict with existing ones, BaseFrame asks how you want to handle it — replace or keep both. You can import other compatible files too. We use AI to parse other formats to compatible DTCG JSON.

Generate and add additional tokens to your set by selecting generate from a token set's menu.

Rename the set by clicking the edit icon next to the title.

Duplicate lives in the set menu and creates a new copy of the token set instantly.

Themed Duplicate creates duplicates and adapts a set's values to Dark or Light Mode — AI rewrites the color tokens to match the chosen theme and drops the result into a new set while you continue working.

Keyboard Navigation allows you to work faster without reaching for a mouse. Select the command icon or press ? on your keyboard to see keyboard shortcuts for the editor.

Quick Edit groups, tokens and values by clicking on the text of a row in the editor.

Details are shown by clicking the pen icon or pressing Enter on keyboard. View and edit token properties in the detailed view.

References can be used as a token's value to refer to another token. You can use as many reference hops as you need. Simply reference other tokens in the set by typing {} and choose an existing token to reference to.

Reference Chain shows you what tokens are linked along the way to a token's resolved value and where exactly your references are broken so you can fix them.

Token Health indicators warn you of empty values or broken links and check for value and type mismatches.

Autosave stores every change as you work. You can also hit Cmd+S to save manually. If your connection drops, unsaved changes are queued and sent automatically when it's restored.

---

Step 4 — Export formats

Click Export in the top right of any token set to open the export panel. BaseFrame supports four output formats from the same token set:

Design Tokens (DTCG JSON) — the raw tokens.json in W3C DTCG format. Use this as input to any tool that supports the spec: Style Dictionary, Theo, Cobalt, or any custom pipeline. BaseFrame Sync Figma plugin also uses this format.

Style Dictionary Package — a ZIP containing tokens.json, a sd.config.json for Style Dictionary v4, a tailwind.config.js pre-wired to your brand scales, and a ready-to-run package.json. Unzip it, run npm install && npx style-dictionary build, and you get CSS variables and JS constants in a /dist folder.

SCSS Variables — all tokens as $variable-name declarations, ready to drop into any Sass-based project.

Design Document — a Markdown handoff document that covers your brand color scales, semantic token tables for light and dark mode, typography, spacing, border radius, and elevation. Send this to a developer who doesn't want to look at JSON.

---

Step 5 — Sync with Figma

BaseFrame has a native Figma plugin. Install it from the Figma community page and start syncing right away.

Once Installed, open a Figma file, run the plugin, and select a W3C DTCG compatible tokens.json file to sync. The plugin pushes your current tokens into Figma Variables — primitives and semantic layers included and references kept intact.

You can select the collection and the mode you'd like to import to in the plugin.

BaseFrame also auto-updates existing variables so updates feel seamless and never break a connection.

This is the intended workflow: BaseFrame remains your source of truth, Figma is a consumer. Tokens live in code, get reviewed in pull requests, and flow downstream into every tool that needs them.