Figmaで遊ぼう！スタイル編

デザイン 開発ツール

こんにちは！UI/UXデザイナーのYOROです！

前回はきほん・準備編②よりFigma（フィグマ）の右サイドバーのデザインタブについてできることを紹介しました。
今回はその中で紹介した「スタイル」について登録と使用方法を紹介していきたいと思います。

スタイル

「スタイル」は繰り返し使用する設定を登録して再利用できる機能です。
設定したものは、あとから簡単に呼び出せます。

スタイルは下記４種類のスタイルが登録ができます。

  • 色
  • テキスト
  • エフェクト
  • グリッド

カラースタイル

塗り、背景、線、文字の”カラー”を「カラースタイル」として保存・使用できます。

登録手順

  1. 登録したいカラーを設定したレイヤーを選択します。
  2. 右サイドバー“塗り”上にある「４つの点」アイコンをクリックします。
  3. ライブラリと記載されたポップアップ上にある「＋」アイコンをクリックします。
  4. スタイルと記載されたポップアップ上にある”名前”に設定したい名前を入力します。
  5. 「スタイルの作成」をクリックします。

使用手順

  1. 登録したカラースタイルを設定したいレイヤーを選択します。
  2. 右サイドバー“塗り”上にある「４つの点」アイコンをクリックします。
  3. 登録手順4で入力した名前をクリックします。

以上です！
ちなみにカラースタイルに登録できるのは単色だけではなく、グラデーションや画像もなども対応しています。

テキストスタイル

テキストごとに異なるスタイル、サイズ、太さなどを「テキストスタイル」として保存・使用できます。

登録手順

  1. 登録したいテキストを設定したテキストレイヤーを選択します。
  2. 右サイドバー“テキスト”上にある「４つの点」アイコンをクリックします。
  3. テキストスタイルと記載されたポップアップ上にある「＋」アイコンをクリックします。
  4. 新しいテキストのスタイルを作成と記載されたポップアップ上にある”名前”に設定したい名前を入力します。
  5. 「スタイルの作成」をクリックします。

使用手順

  1. 登録したテキストスタイルを設定したいテキストレイヤーを選択します。
  2. 右サイドバー“テキスト”上にある「４つの点」アイコンをクリックします。
  3. 登録手順4で入力した名前をクリックします。

以上です！

エフェクトスタイル

エフェクトの設定を「エフェクトスタイル」として保存・使用できます。

登録手順

  1. 登録したいエフェクトを設定したレイヤーを選択します。
  2. 右サイドバー“エフェクト”上にある「４つの点」アイコンをクリックします。
  3. エフェクトスタイルと記載されたポップアップ上にある「＋」アイコンをクリックします。
  4. 新しいエフェクトのスタイルを作成と記載されたポップアップ上にある”名前”に設定したい名前を入力します。
  5. 「スタイルの作成」をクリックします。

使用手順

  1. 登録したエフェクトスタイルを設定したいレイヤーを選択します。
  2. 右サイドバー“エフェクト”上にある「４つの点」アイコンをクリックします。
  3. 登録手順4で入力した名前をクリックします。

以上です！

グリッドスタイル

レイアウトグリッドの設定を「グリッドスタイル」として保存・使用できます。

登録手順

  1. 登録したいグリッドを設定したフレームレイヤーを選択します。
  2. 右サイドバー“レイアウトグリッド”上にある「４つの点」アイコンをクリックします。
  3. グリッドスタイルと記載されたポップアップ上にある「＋」アイコンをクリックします。
  4. 新しいグリッドスタイルを作成と記載されたポップアップ上にある”名前”に設定したい名前を入力します。
  5. 「スタイルの作成」をクリックします。

使用手順

  1. 登録したグリッドスタイルを設定したいフレームレイヤーを選択します。
  2. 右サイドバー“レイアウトグリッド”上にある「４つの点」アイコンをクリックします。
  3. 登録手順4で入力した名前をクリックします。

以上です！

スタイルの階層化

スタイルの名前に「 / 」をつけることで階層化にすることができます。
なので階層化したい場合は登録手順4の名前入力時で「 / 」を入れます。

超おすすめプラグイン

基本的にスタイルの登録は一つづつ登録します。
そのため数が多いと作業に結構な時間がかかります。
そこで！一括で登録できる素晴らしいプラグインを紹介します！

Styler

  • 全てのスタイルに対応
  • レイヤー名で一括にスタイル登録できる
  • 登録しているスタイルを一括で削除できる（種別でも可）
  • 登録しているスタイルを一括でビジュアルに起こしてくれる

www.figma.com

Text Styles Generator

  • テキストと色のスタイルに対応
  • 登録しているスタイルを一括で編集できる
  • 登録しているスタイルの名前を一括で編集できる

www.figma.com

さいごに

今回紹介した「スタイル」の登録は、デザイン制作する”前”に行うことをおすすめします！
なぜならこの登録をしていないと、デザイン先で使用される設定が異なる可能性が高くなるため、デザインの一貫性を保つことが非常に難しくなるからです。

なのでぜひデザイン制作を始める前に活用してみてくださいな😆