今回はFigma内でより管理しやすく、調整しやすくする機能を解説します。

デザインファイルまでの作成は前回紹介しましたので参考にしてください。

関連記事: Figmaの使い方〜基礎編１〜 / Figmaの使い方〜基礎編２〜

本記事の完成デザインは下画像になります。

完成デザインのプレビュー

カラースタイルの作成

前回までで画面内のパーツは揃ったので、色の登録を行って再利用しやすくしていきます。

まずはヘッダーの背景色を登録します。

カラースタイルの作成

Point

  1. 色の登録をしたい要素を選択
  2. 右ナビゲーション内のFillという項目を見つける
  3. Fill項目の右に・が4つあるアイコンがあるのでクリック
  4. 出てくるColor Stylesの右にある+アイコンをクリック
  5. モーダル内の入力欄に登録したい名前を入力
  6. Create styleをクリック

これで色の登録ができました。


色の登録は他の要素で同色を利用している箇所で使用すると嬉しいことがあります。

ヘッダーの背景色はフッターの背景色でも利用しているので、フッターに先程登録した色を適用します。

カラースタイルの適用

Point

  1. 登録色を適応したい要素を選択
  2. 右ナビゲーション内のFillという項目を見つける
  3. Fill項目の右に・が4つあるアイコンをクリック
  4. 出てくるColor Styles下の適応したい色をクリック

これでフッターに登録した色を適用できました。


このように各色をColor Stylesに登録し、各箇所に登録すると色を変えたい時に便利です。

下gifは他の色、要素全てColor Stylesで適応した状態でmain色を編集しています。

カラースタイルの編集

Point

  1. 何も要素が無いところをクリック
  2. 右ナビゲーション内のColor Stylesという項目を見つける
  3. Color Styles項目の編集したい色までカーソルを持っていく
  4. 右に調整アイコンが表示されるのでクリック
  5. カラーコードが下に表示されるのでクリック
  6. カラーピッカーで任意の色を選択

デザインが煮詰まっていくにつれ、色を微調整する機会も増えていくので先行して色登録するのがオススメです。

またどの色をどんな役割で何個使用しているかもColor Stylesで把握できるので、変な色を使う可能性が減るメリットもあります。

フォントスタイルの作成

色登録のような機能はフォント設定も同様に存在します。

フォントスタイルの作成

Point

  1. フォントの登録をしたい要素を選択
  2. 右ナビゲーション内のTextという項目を見つける
  3. Text項目の右に・が4つあるアイコンがあるのでクリック
  4. 出てくるText Stylesの右にある+アイコンをクリック
  5. モーダル内の入力欄に登録したい名前を入力
  6. Create styleをクリック

これでフォントスタイルも登録できました。

フォントスタイルの適応、編集はColor Stylesと同様です。

影の設定

ここまでは管理性の向上でしたが、今度は要素に影を付けていこうと思います。

試しにカードの枠に影を付けます。

影の設定

Point

  1. 影を付けたい要素を選択
  2. 右ナビゲーション内のEffectsという項目を見つける
  3. Effects項目の右に＋アイコンがあるのでクリック
  4. Effects項目の右に太陽のアイコンがあるのでクリック
  5. Drop shadow項目下の数値の変更をして指定したい値まで変更
  • 方向キー↑↓で1ピクセル変更可

これでカードの枠に影を付けられました。


この影も他と同様にスタイルを登録できます。

エフェクトスタイルの作成

Point

  1. フォントの登録をしたい要素を選択
  2. 右ナビゲーション内のEffectsという項目を見つける
  3. Effects項目の右に・が4つあるアイコンがあるのでクリック
  4. 出てくるEffect Stylesの右にある+アイコンをクリック
  5. モーダル内の入力欄に登録したい名前を入力
  6. Create styleをクリック

これで影のスタイルも登録できました。

影のスタイルの適応、編集はColor Stylesと同様です。

コンポーネントとオートレイアウトの組み合わせ

Web上に表示してあるボタンはクリックした瞬間色が変わったり、表示が変わったりします。

その状態変化をFigmaで表現したい時はバリアンツ機能が便利です。

今の状態だとバリアンツ機能が使いにくいので、バリアンツ機能の下準備としてオートレイアウト化してあるボタンをオートレイアウト機能を保持したまま別コンポーネント化していこうと思います。

このセクションには元素材としてコンポーネントとオートレイアウトを組み合わせる操作の GIF アニメーション (約 32 MiB) がありましたが、ホスティング (Cloudflare Pages) のファイルサイズ制限のため省略しています。実際の挙動は Figma 公式ドキュメント を参照してください。

Point

  1. コンポーネント化したい要素を選択
  2. フレーム外まで移動
  3. ［コンポーネント / オートレイアウト / 要素］ の順に加工
    • 要素のトップがフレームの場合はオートレイアウト化
  4. 子コンポーネントを1の元の場所まで移動

操作が複雑ですがこれでオートレイアウト機能を保持したままコンポーネント化できました。

バリアンツの作成

フレーム外にコンポーネントとしてボタンを用意できました。

ここからはボタンの状態変化をバリアンツ機能を用いて表現していきます。

バリアンツの作成

Point: バリアンツの適応

  1. オートレイアウト化したいコンポーネント化された要素を選択
  2. 右ナビゲーション内のVariantsという項目を見つける
  3. Variants項目の右にある+アイコンをクリック
  4. Variant2など表示されている入力欄に、サブ状態で登録したい状態名を入力
  5. 登録したい状態名の中の要素を選択
  6. 色などを変更

Point: バリアンツ状態の変化

  1. 状態を変化せたい要素を選択
  2. 右ナビゲーション内のコンポーネント名が書かれた項目をみつける
  3. Property1などと書かれた右のドロップダウンをクリック
  4. 変化させたい状態名を選択

バリアンツ機能は適応するとコンポーネントの周りに点線が表示され、要素が複製されます。

そしてその複製された要素を編集することによってサブ状態が表現できる機能です。

ただしバリアンツ機能はコンポーネント化された要素のみ適応できるので注意です。


現状バリアンツに登録できるのはデフォルトの他１種類しか登録できないので、状態を追加します。

バリアンツの追加

Point: 始点の変更

  1. 追加したいバリアンツ要素を選択
  2. 近くに＋アイコンが表示されるのでクリック

追加される場所は選択した要素の直下なので、なるべく一番下のバリアンツ要素から選択するのがオススメです。

完成

完成デザイン

以上今回はFigmaの基礎編３を解説しました。

今後もスキル関係についての記事を投稿するのでお楽しみに！