Json Color Importer — Color tokens from JSON

Json Color Importer lets individuals and teams bring their JSON color tokens into Framer Color Styles with minimal steps.

If you already store colors as design tokens in a JSON file — from a token pipeline, Tokens Studio, or a shared design system repository — this plugin imports them directly into Framer and keeps your Color Styles organized without manual re-entry.

What it supports

• Primitive color tokens ($type: "color" with $value)

• Semantic alias tokens that reference other color tokens

• Light and dark theme values mapped to Framer Color Style themes

• Preview before importing — see exactly what will be created or updated

• Conflict handling — choose skip or replace for each existing Color Style

• Import summary showing created, replaced, skipped, and failed counts

• English and Japanese UI

Known behavior

• Alias tokens resolve only when the referenced token exists in the same file.

• Conflicts with existing Color Styles require a manual choice before importing — existing styles are kept by default.

• OKLCH values are converted to rgba for Framer compatibility.

• Dark-only tokens without a matching light value are imported as regular styles.

---

Json Color Importerは、個人やチームのJSONで管理しているカラートークンをFramer カラースタイルへ簡単に取り込むためのプラグインです。Tokens StudioやToken pipelineなど、すでにJSONでデザイントークンを管理している場合は最小限のステップでカラースタイルを整理できます。

対応内容

• $type: "color" と $value を持つプリミティブカラートークン

• 他のカラートークンを参照するセマンティックエイリアス

• ライト / ダークテーマ値をFramer カラースタイルのテーマへマッピング

• インポート前のプレビュー（作成・更新される内容を事前確認）

• コンフリクト処理

• インポート後のサマリー（作成・更新・スキップ・失敗数）

• 英語 / 日本語の言語切り替え

既知の挙動

• エイリアスは参照先トークンが同じファイル内に存在する場合のみ解決します。

• 既存カラースタイルとのコンフリクトは、インポート前にどのカラートークンをインポートするかを手動で選ぶ必要があります（デフォルトは既存のトークンが選択されます）。

• OKLCHはFramer互換性のためrgbaへ変換します。

• 対応するライトモードがないダークのみのトークンは通常スタイルとしてインポートされます。