たくさんオブジェクトを作っているといちいち色コードを入力するのがめんどさい！
しかも色の変更があったときも1つずつ変えるのに時間がかかる。。
Figmaではカラースタイルという機能を使って色に名前をつけて保存することができるよ！
１度保存してしまえば色コードの入力も不要だし一括変更もできるからぜひマスターしよう！
今回は色に名前をつけて保存することができるcolor style（カラースタイル）機能について詳しく解説していきます。
▼この記事のポイント
▼記事を書いたひと
都内でシステムエンジニアをしているkentos(@kento_jpn)と申します。Web制作やプログラミングの情報発信を幅広く行っております。
1. カラースタイルをマスターしよう
まずFigmaのスタイル(style)とは、オブジェクトの色や枠線等の
書式設定を定義する機能のことを指します。
その中でも今回は色の情報を定義できるカラースタイルについて解説していきます。
1.1. カラースタイルに色を登録しよう
初めにFigmaの編集画面より、図の様にフレームに４つの円を配置して色を設定します。
なお、現時点では色はプロパティより色コードを直接入力してください。
次に４つの縁の色それぞれをカラースタイルに登録します。
ベースカラーの円をクリックし、「::」ボタン＞「+」(color style)を選択します。
そうすると登録画面が出てきますのでここに色の名前を入力し「Create style」をクリックします。
今回はベースカラーと入力しましょう。
以上でカラースタイルへの色の登録は完了しました！
右側のプロパティで色名がベースカラーになっていればOKです。
他の３色についてもカラースタイル登録をしましょう。
1.2. 登録した色を使ってみよう！
先ほどカラースタイルに登録した色を確認しましょう。
Fillの「::」ボタンを押して登録されている色を選択するだけで使用することができます。
ここで、色名の右側にあるレバーアイコンをクリックすると、色の変更が可能です。
ただしカラースタイルの色を変更するとこのカラースタイルを使用する
全てのオブジェクトに反映されますのでご注意ください。
逆にいうとカラースタイルの色を用いてデザインを行えば
色変更にも柔軟に対応できるということです。
めちゃくちゃ便利な機能ですよね。
1.3. 登録した色を別ファイルでも使用する
カラースタイルに登録したいろは基本的には”同一ファイル”内で使用できますが、
共有設定をすることで他ファイル（チーム）でも同じ色を使うことができます。
カラースタイルから本アイコン「Team Library」をクリック
Publishをクリック
共有したいもの（今回は全て）にチェックをつけてPublish stylesをクリック
以上でスタイルの共有設定は完了です。
これはTeamLibraryといって、チーム内で共有したいスタイルや
コンポーネント（今回は紹介しません）を登録できる機能だよ！
では共有したスタイルを実際に使ってみましょう。
Figmaで別ファイルを開き、Fillの「::」から「Browse libraries…」をクリックします。
先ほど共有したファイル名のトグルスイッチをクリックして有効にします。
そうすると、カラースタイルから選択できるようになります！
2. まとめ
今回は色を保存できるカラースタイルの基本的な使い方と、
保存したスタイルをチーム間で保存できるようにするTeamLibraryと呼ばれる機能をご紹介しました。
デザインするにあたってカラーは必要不可欠な要素ですのでぜひご活用ください!
コメント