---
title: "Json Color Importer — Free Framer plugin · Best of Framer"
description: "Free Framer plugin · by Kaon Shibuya · Styles. Json Color Importer lets individuals and teams bring their JSON color tokens into Framer Color Styles with minimal steps."
canonical: "https://framer.elliotli.dev/plugin/json-color-importer"
---

[Home](/)/[Plugins](/plugins)/[Styles](/plugins/category/styles)/Json Color Importer

# Json Color Importer

Color tokens from JSON

[View on Framer](https://framer.com/marketplace/plugins/json-color-importer/?via=elliot-li)

![Json Color Importer preview image 1](https://framer.elliotli.dev/og/plugin/json-color-importer/13b8cafc9aa9f582/1600x1200.jpg)

## Summary

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

## Description

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

\---

### Support

If you have questions, bug reports, or feedback about Json Color Importer, please contact us through this form. We usually review messages within a few business days.

Json Color Importer support form:

[https://jci-support.framer.website/](https://jci-support.framer.website/)

\---

This plugin is free to use.

If it helped your workflow, you can support future Framer plugin development here:

[https://ko-fi.com/kaonshibuya](https://ko-fi.com/kaonshibuya)

## Rank history [How rankings work →](/terms#rankings)

-   All · #731

## Details

- **Author**: Kaon Shibuya
- **Published**: 2026-05-28
- **Updated**: 2026-06-08
- **Added**: 2026-05-24
- **Categories**: Styles

## More like this

-   [Sealcraft](/plugin/sealcraft) — Cyedi Creative Studio · Free — Badges, stamps and spinning seals
-   [Divider Lab](/plugin/divider-lab) — ANASS TB · Free — Shape dividers for clean sections
-   [Tablecraft](/plugin/tablecraft) — ANASS TB · Free — Paste rows, get a designed table
-   [Cookiewall](/plugin/cookiewall) — ANASS TB · Free — Cookie banners, done in seconds