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

Figmaカラースタイルの登録・編集方法

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

目次

はじめに

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

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

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

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

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

STEP
四角形を4つ作る

ツールバー左上の矩形作成ボタンをクリック(またはRキー)で四角形を4つ作ります。コピペでも良いですが、optionキーを押しながら四角形をドラッグするとコピーが作れて時短になります。

STEP
1つ目のカラースタイルを登録

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

STEP
他の矩形について同じ操作で登録する

同様の操作を繰り返して矩形4つのカラースタイルを登録します。

STEP
登録例:色の役割

下記にワイヤーフレーム用のカラースタイルの登録例を載せておきます。

  • gray-1(#E7E7E7):アイコン・ロゴ・ボタン等
  • gray-2(#D2D2D2):背景色
  • gray-3(#B1B1B1):写真・画像等
  • gray-4(#333333):文字

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

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

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

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

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

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

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

この記事を書いた人

■清水WEB制作代表
■コーディング:WordPress(オリジナルテーマ制作等)・HTML・Sass・FLOCSS・JavaScript(jQuery)等
■集客力:YouTube/Instagram/ブログでそれぞれ登録者数16000人/フォロワー13000人/月間最大アクセス50000PVの集客実績があります
■文章作成:博士号所有、会社員時代は科学雑誌に寄稿していたので文章作成も得意です
■写真技術:Amazon Kindle出版で、写真集・撮影編集解説書を5冊好評発売中です

目次