CSSカラーインポーター
CSSカラーをFramerのカラースタイルに変換する強力なプラグインで、デザイントークンを保ちながら、色の抽出とインポートを簡単にサポートします。
CSSのカラーシステムをFramerカラースタイルに変換する強力なプラグインで、デザイントークンを保持しながらすぐにアクセスできます。
CSS Color Importerとは？
CSS Color Importerは、CSSワークフローとFramerデザインシステムの間のギャップを埋めます。カラーを抽出してインポートしつつ、意味と構造を維持します。
主な機能
スマートカラー検出: CSSファイルからすべてのカラー値を自動で識別・抽出
ダークモードサポート: メディアクエリ、CSSクラス、データ属性を通してライト/ダークモードに対応
柔軟な入力方式: CSSファイルのアップロードまたはCSS内容の直接貼り付けをサポート
インテリジェントパース: hex, RGB, HSL, 名前付きカラー、フォールバックのあるCSS変数をサポート
スマート整理: プレフィックスごとにカラーをグループ化し、ネーミングの一貫性を維持
カスタムオプション: ライト/ダークバリエーションのマージまたは個別維持を選択可能
選択的インポート: Framerプロジェクトにインポートするカラーを正確に選択可能
設定保存: 将来のインポートのためにユーザーの好みの設定を記憶
使用方法
Framer Marketplaceからプラグインをインストール
CSSファイルをアップロード、またはCSS内容を貼り付け
抽出したカラーとライト/ダークバリエーションをプレビュー
プレフィックスの除去やバリエーションマージの設定を行う
インポートするカラーを選択
すぐにFramerのカラースタイルとしてインポート
このプラグインを使用する理由
カラーシステムを一から再構築する必要はありません。このプラグインは既存のCSSカラーをFramerのネイティブカラースタイルにスマートに変換し、多くのデザイン作業時間を節約します。
このプラグインは次のようなユーザーに適しています。
既存プロジェクトをFramerに移行するデザイナー
プラットフォーム全体で一貫したカラーシステムを維持するチーム
FramerでCSS変数を使用したい開発者
既存のデザインシステムやコンポーネントライブラリを使うすべての人
サポートされているCSS機能
カラー形式: Hex (#RGB, #RRGGBB, #RRGGBBAA), RGB/RGBA, HSL/HSLA, 指定されたカラー
CSS変数:
var(--color-name)フォールバックサポートを含むダークモード:
@media (prefers-color-scheme: dark),.dark-mode,[data-theme="dark"]ネーミングルール: プレフィックスの削除設定が可能（例：Tailwindカラーから"tw-"を削除）
さらに多くのプラグインを探す