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.
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
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へ変換します。
対応するライトモードがないダークのみのトークンは通常スタイルとしてインポートされます。