5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Te39,

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/

---

This plugin is free to use.

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

https://ko-fi.com/kaonshibuya

5a:[["$","$L5d",null,{"post":{"id":"019e6cb1-abd0-7c04-b5e6-188e0f4f28fc","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"76b06869-8b4e-4c3a-9eb2-17ca9024bc29","name":"Kaon Shibuya","slug":"kaon-shibuya","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/76b06869-8b4e-4c3a-9eb2-17ca9024bc29/8le6u5vl","followed":false,"followsYou":false},"media":[],"resources":[{"id":"1219","resolved":true,"title":"Json Color Importer","body":"$5e","bodyJson":null,"introduction":"Color tokens from JSON","slug":"json-color-importer","author":{"framerUserId":"76b06869-8b4e-4c3a-9eb2-17ca9024bc29","name":"Kaon Shibuya","slug":"kaon-shibuya","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/76b06869-8b4e-4c3a-9eb2-17ca9024bc29/8le6u5vl","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/1219-RQWSQczSpeW6ZG8h1kmrph8PostNKH","metadata":{"tint":{"h":12,"s":31,"l":25},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/1219-W6ahzTOpaYmuwUNgwGYCn9ty9b1tYX","metadata":{"tint":{"h":180,"s":10,"l":16},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-24T11:17:31.089Z","updatedAt":"2026-06-08T15:40:06.443Z","publishedAt":"2026-05-28T03:47:23.728Z","featuredAt":null,"approvedAt":null,"type":"plugin","attributes":{"framerPluginId":"ek9nhvu9p1ri1m335vn4tgy2j","paid":false,"categories":[{"id":"b238ea64-0ce9-413a-848d-43b73f0eea0f","name":"Styles","slug":"styles"}],"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-28T03:47:23.728Z","updatedAt":"2026-05-28T03:47:23.728Z","reported":false}}],"$L5f"]

Suggested for you