【シンプルで力強い】 Figma カラースタイルライブラリ

色とスタイルを分けること、これが Figma で色を管理するための基本的な論理です
鍵は分けることです

第一步！色彩プールをどうやって取得するか：#

アルゴリズムを使ってグラデーションカラーを生成します：

ブランドカラーに基づいて色を選択し、右上の「パレットを追加」をクリックすると、新しい色を作成できます

（Google M3 メソッドも試してみてください、ほぼ同じです。URL：https://m3.material.io/styles/color/system/overview）

Figma でコミュニティを開き、検索：Design Tokens Manager

または、直接対応するリンクをクリックしてください：https://www.figma.com/community/plugin/1263743870981744253/design-tokens-manager

インポートしたいトークンを貼り付けます：

インポート後の効果：

注意：この時、Google シートの下部のシート名は Figma のコレクションの名前に対応しており、左側のグループは表の $Name 内部のグループに対応しています。light と dark の対応については多くを説明しませんが、基本的には一対一の関係です。

現在の色彩利用コレクションを見つけ、light 内の色を選択します。その後、先ほど追加した「Color」を見つけて選択します。この時、どの色を選んでも構いません（今後は「Color」このコレクション内でのみ選択できます）

ここが詳細です：

こちらが私自身の全体的なフレームワークです：
（参考の意味で、思考マップを描くのはとても簡単です）

この時、4 つのステップを完了すると、色の色値と最終的に使用するスタイルが分かれた Figma デザインシステムの Color 部分のスタイルライブラリを得ることができます。

次回は、Text、Spacing、Shadow などの小さなアイテムをどのように一列で管理するかを教え、デザインシステムの効率を大幅に向上させます。

または、Figma org バージョンの Branch 機能について話し、プログラマーとしてあなたも理解できるようにします。