【Figma】カラースタイルの登録方法【ワイヤーフレーム】

この記事では、Figmaで使う色をカラースタイルとして登録・編集する方法を紹介します。

はじめに

WEBサイトをデザインする場合、使われるカラーは４色以内の場合が多いです。またサイトデザインの前段階で作られるワイヤーフレームにおいても要素毎に色分けするのが鉄則です。ワイヤーフレームに使われる色は無彩色ですが、色数は４色程度と少ないです。

ワイヤーフレームの色は、共通の要素では共通の色が使われるため、予め使う色を登録しておくと作業が高速化できます。

そして、Figmaでは使う色をカラースタイルとして登録することができます。

カラースタイルの登録方法

下記のように1つ目の矩形に対してカラースタイルを登録する

登録済みのカラースタイルの読み込み方法

登録済みのカラースタイルの読み込み

下記の手順で登録済みカラースタイルを読み込むことができます。

1. 色を変えたい要素を選択します。
2. 右サイドメニューの「塗り」の「点４つ」アイコンをクリックします。
3. 登録済みカラースタイルのライブラリが現れ、選択することができます。

登録済みカラースタイルの設定確認と変更方法

下記の手順で登録済みカラースタイルの設定内容の確認または変更ができます。

1. 色を変えたい要素を選択します。
2. 右サイドメニューの「塗り」の「点４つ」アイコンをクリックします。
3. 登録済みカラースタイルのライブラリが現れ、確認または変更したい色をマウスオーバーします。
4. 選択した色の右横のアイコンをクリックします。
5. 「色スタイルを編集」ウィンドウが開き、ここで内容確認や変更ができます。