INDEX
目次
前の章に戻る【4-1】ショートカット
今までの解説にも表記しましたが、Figmaには多くのショートカットが用意されています。
このショートカットを使いこなす事が出来れば、効率的に作業出来るようになります。
※Figmaの操作を覚えると同時に、ショートカットも覚えれば一石二鳥になると思います。
■ Figmaでよく使うショートカット
※Macの場合、Ctrlキー > Cmdキー、 Altキー > Optionキー として置き換えてください。
基本操作のショートカット
|
キー
|
効果
|
|---|---|
|
V
|
選択ツール
|
|
T
|
テキストツール
|
|
R
|
レクタングル（四角形）ツール
|
|
F
|
フレームツール
|
|
I
|
色選択
|
|
H or Spaceキー
|
手のひらツール
|
|
Ctrl + マウスホイール もしくは
Ctrl + プラス/マイナスキー
|
画面の拡大縮小
|
|
Ctrl + A
|
全選択
|
|
Esc
|
選択解除
|
|
Ctrl + C
|
コピー
|
|
Ctrl + V
|
ペースト
|
|
Ctrl + D もしくは
Alt + マウスドラッグ
|
複製
|
|
Ctrl + Z
|
元に戻す
|
|
Ctrl + Shift + Z
|
やり直す
|
|
Ctrl + 0
|
100%ズーム
|
|
Ctrl + Alt + Enter
|
プレビュー
|
便利なショートカット
|
キー
|
効果
|
|---|---|
|
Ctrl + G
|
グループ化
|
|
Ctrl + Shift + G
|
グループ化を解除
|
|
Ctrl + [
|
レイヤーを後方に移動
|
|
Ctrl + ]
|
レイヤーを前方に移動
|
|
Shift + R
|
定規を表示
|
|
Shift + G
|
グリッドを表示
|
|
Ctrl + Shift + K
|
画像を取り込む
|
テキスト系のショートカット
|
キー
|
効果
|
|---|---|
|
Ctrl + B
|
太字
|
|
Ctrl + Shift + < もしくは
Ctrl + Shift + >
|
フォントサイズ変更
|
|
Alt + < もしくは
Alt + >
|
文字詰め
|
|
Shift + Alt + < もしくは
Shift + Alt + >
|
行の調整
|
整列系のショートカット ※複数オブジェクトを選択時
|
キー
|
効果
|
|---|---|
|
Alt + H
|
水平方向に合わせる
|
|
Alt + V
|
垂直方向に合わせる
|
|
Alt + Shift + H
|
水平方向のオブジェクトを均等配置
（オブジェクトを3つ以上選択時）
|
|
Alt + Shift + V
|
垂直方向のオブジェクトを均等配置
（オブジェクトを3つ以上選択時）
|
|
Ctrl + Alt + K
|
コンポーネント
|
|
Ctrl + Alt + B
|
インスタンスの切り離し（コンポーネント・親からの切り離し）
|
|
Shift + A
|
オートレイアウト
|
|
Shift + Alt + A
|
オートレイアウトを解除
|
■ Figma上でもショートカットの確認ができる
Figmaを操作していると右脇にキーボードのヒントが確認出来ます。
※例えば、「長方形 : R」「矢印 : Shift + L」など。
これがショートカットのヒントになっています。
※例えば、「長方形 : R」「矢印 : Shift + L」など。
これがショートカットのヒントになっています。
Figma使用時でも、ショートカット一覧を確認する事も出来ます。
下記のショートカットを入力すると、画面下に一覧が表示されます。
下記のショートカットを入力すると、画面下に一覧が表示されます。
Ctrl + Shift + ?
【4-2】ガイド（定規・グリッド）
レイアウトを組む際、ガイドを使用すれば規則性のあるレイアウトを構築する事が簡単にできます。
Figmaには「定規」「グリッド」の２種類のガイドを使う事ができます。
使いやすい方を使用しましょう。
Figmaには「定規」「グリッド」の２種類のガイドを使う事ができます。
使いやすい方を使用しましょう。
☑️ サンプルデータはこちら
ガイド.fig (66.3 KB)
※サンプルデータを開くには、ホーム画面の「インポート」より、入手した.figデータを選択。
■ 定規の使い方
定規は ”線” を配置するガイドです。レイアウトの縦軸・横軸を合わせるのに便利です。
定規は以下の2種類の出し方があります。
- 右上の倍率をクリックし、メニュー内にある「定規」を選択（消す時も同じ項目を選択）
- ショートカット
Shift + R（消す時も同じショートカット）
定規を出すと、キャンバスの左側・上側に定規が表示されます。ここからドラッグ＆ドロップする事で、定規のラインを引く事ができます。
Figma 4-2-1
この動画はデモンストレーション動画になります。
音声は入っておりません。
使用例
直感で定規を置くよりも、規則性に沿った定規の配置をする事をおすすめします。
※例えば...
①目安となる図形を作成し、横脇に配置します。
② その図形を複製し、反対側の横脇に置きます。
③ 後はその図形に沿った定規を引けば、両脇に同じ幅の定規を引く事ができます。
Figma 4-2-2
この動画はデモンストレーション動画になります。
音声は入っておりません。
Alt(Option)ボタンを押しながら、オブジェクトを選択
上記の方法で、選択しているオブジェクトの位置を知る事ができます。
この方法を上手く使う事で定規を適切に配置したレイアウトを整える方法もあります。
この方法を上手く使う事で定規を適切に配置したレイアウトを整える方法もあります。
■ グリッドの使い方
グリッドはフレームを等倍してガイドを配置する方法です。
グリッドは以下の方法で使用出来ます。
"フレーム"を選択した状態で、画面右側の「レイアウトガイド」の "+" アイコンをクリックすると、グリッド線を敷く事が出来ます。
"フレーム"を選択した状態で、画面右側の「レイアウトガイド」の "+" アイコンをクリックすると、グリッド線を敷く事が出来ます。
Figma 4-2-3
この動画はデモンストレーション動画になります。
音声は入っておりません。
ただ、この状態（グリッド8px）の状態だと解りづらいので、”グリッド8pxの左のアイコン" をクリックし、「列」を選択。適切な数値を選択する事で解りやすくなると思います。
ショートカット Shift + G でグリッドの表示・非表示が出来ます。
✅ UIデザインにおいてレイアウト作成をする際、余白をバランスよく配置する事がUIデザインの重要な基礎の１つでもあります。
ガイドを上手く利用し、バランスの取れた余白を作る事を意識してみましょう。
※詳しくは第５章以降で説明します。
ガイドを上手く利用し、バランスの取れた余白を作る事を意識してみましょう。
※詳しくは第５章以降で説明します。
【4-3】コンポーネントとは
コンポーネントとは
FigmaはUIを作成する為の多くの機能を搭載していますが、最も習得しやすく、且つ使用頻度も高いと思われるのがこのコンポーネントになります。
同じようなパーツを使いまわしたい場合、コンポーネントを使うと便利です。
☑️ サンプルデータはこちら
コンポーネント.fig (59.4 KB)
※サンプルデータを開くには、ホーム画面の「インポート」より、入手した.figデータを選択。
Figma 4-3
この動画はデモンストレーション動画になります。
音声は入っておりません。
■ 作成手順
✔ コンポーネント作成手順
1 . まず複製させたいオブジェクトを用意し、選択します。
2 . 次に右クリックから「コンポーネントを作成」を選択
※ショートカット Ctrl + Alt + K でもOK。
3 . レイヤーが紫色になり、アイコンも菱形（4つ）になっているのが確認出来ます。
これで「親」レイヤー完成です。
4 . この親レイヤーを”複製”してみましょう。すると、同じく紫色のレイヤーになっていますが、アイコンは菱形（１つ）になっています。これで「子」レイヤーの完成です。
※子レイヤーはいくらでも作成できます。
5 . 親レイヤーの中のオブジェクトを動かしてみましょう。
すると、子レイヤーのオブジェクトも同じ動きをします。
6 . 色やサイズ、テキスト、レイヤー追加など色々対応出来ます。
コンポーネントを上手く利用すれば、コンテンツ作りも容易に進める事が出来ます。
[複製について]
前章でも記載しましたが、Figmaで "複製"する方法を改めて記載します。(いずれかの方法でOK)
⭕️ Windowsの場合
- 複製したいオブジェクトを選択、
Ctrl + Cでコピー >Ctrl + Vでペースト - 複製したいオブジェクトを選択、
Ctrl + D。 Altキーを押しながら、複製したいオブジェクトを動かす。
⭕️ Macの場合
- 複製したいオブジェクトを選択、
Cmd + Cでコピー >Cmd + Vでペースト。 - 複製したいオブジェクトを選択、
Cmd + D。 Optionキーを押しながら、複製したいオブジェクトを動かす。
■ コンポーネントのもう１つのメリット - アセットパネル格納
コンポーネント化したレイヤーは、レイヤー隣のアセット（アセットパネル）に格納されます。
ドラッグ&ドロップで、アセットパネルから直ぐにキャンバスに配置する事も出来ます。
ドラッグ&ドロップで、アセットパネルから直ぐにキャンバスに配置する事も出来ます。
※他のフレームやページなど、広範囲に使い回せる為、規模のあるサイト制作時には重宝します。
【4-4】バリアント
■ バリアントとは
バリアントとは、複数のコンポーネントをひとまとめにして管理する機能です。
Figmaでは、ボタンや入力フォーム、アイコンなど、繰り返し使用する要素を「コンポーネント」として作成します。しかし、同じボタンでも「通常の状態」「ホバー時」「クリック時」「無効な状態（disabled）」など、複数の状態が存在します。
これらをすべて個別のコンポーネントとして作成すると、デザインファイルがコンポーネントだらけになり、管理が非常に大変になります。
そこで登場するのが「バリアント」です。
バリアントを使うと、これらの異なる状態を一つの「コンポーネントセット」としてグループ化し、管理することができます。
WEBに設置するボタンやアイコン等、同じパーツでも若干異なる状態を手軽に切り替えたい場合などに良く使われます。
Figmaでは、ボタンや入力フォーム、アイコンなど、繰り返し使用する要素を「コンポーネント」として作成します。しかし、同じボタンでも「通常の状態」「ホバー時」「クリック時」「無効な状態（disabled）」など、複数の状態が存在します。
これらをすべて個別のコンポーネントとして作成すると、デザインファイルがコンポーネントだらけになり、管理が非常に大変になります。
そこで登場するのが「バリアント」です。
バリアントを使うと、これらの異なる状態を一つの「コンポーネントセット」としてグループ化し、管理することができます。
WEBに設置するボタンやアイコン等、同じパーツでも若干異なる状態を手軽に切り替えたい場合などに良く使われます。
☑️ サンプルデータはこちら
バリアント.fig (79.1 KB)
※サンプルデータを開くには、ホーム画面の「インポート」より、入手した.figデータを選択。
Figma 4-4
この動画はデモンストレーション動画になります。
音声は入っておりません。
■ 作成手順
今回はバリアントを利用したボタンを作成してみましょう。
まずボタンの「お問い合わせ」のコンポーネントを作ります。
✔ バリアント作成手順
1 . コンポーネントを作成します。
2 . 右側パネル「プロパティを追加」より、バリアントを選択。
2 . 右側パネル「プロパティを追加」より、バリアントを選択。
3 . プロパティ名の決めましょう。今回は「ボタン」とします。
4 . コンポーネント下の + ボタンで複製します。
5 . 各々別のボタンを作成します。今回は「資料請求 」「入力内容を確認」 のボタンを作成します。
これで準備完了です。
5 . 各々別のボタンを作成します。今回は「資料請求 」「入力内容を確認」 のボタンを作成します。
これで準備完了です。
■ バリアント使用方法
バリアントで設定したパーツを設置した際、右側パネルで設定した「ボタン」の項目で、素早くパーツを切り替え出来ます。
【4-5】スタイル
■ スタイルとは
フォントの色やサイズ、書体をそれぞれ登録することのできる機能です。
この機能を利用する事で、統一したスタイルの構成がしやすくなります。
この機能を利用する事で、統一したスタイルの構成がしやすくなります。
■ 作成手順
✔️ スタイル作成手順
1 . 色やサイズ、書体を登録したいテキストを選択し、右側パネル「タイポグラフィー」内の右上のアイコンを選択します。
2 . “+”のアイコンを選択し、スタイルを確認・編集します。
「スタイルの作成」ボタンで登録します。※ここでは ” 背景水色用のテキスト ”とします。
「スタイルの作成」ボタンで登録します。※ここでは ” 背景水色用のテキスト ”とします。
3 . 「テキストスタイル」に追加されました。
次に利用する際は、スタイルを適用したいテキストを選択し、この欄より選択するだけでサイズや書体が反映されます。
次に利用する際は、スタイルを適用したいテキストを選択し、この欄より選択するだけでサイズや書体が反映されます。
【4-6】オートレイアウト
■ オートレイアウトとは
オートレイアウトとは、指定した複数のオブジェクトを、様々な設定により素早く規則的な整列ができる機能です。
※初めての方が使いこなすには少々難しい所もありますが、使いこなせるようになると便利です。
☑️ サンプルデータはこちら
オートレイアウト.fig (388 KB)
※サンプルデータを開くには、ホーム画面の「インポート」より、入手した.figデータを選択。
Figma 4-6
この動画はデモンストレーション動画になります。
音声は入っておりません。
■ 作成手順
✔️ オートレイアウト作成方法
1 . オートレイアウトにしたい複数のオブジェクトや、グループやフレームを同時に選択。
2 . 右クリックで「オートレイアウトを追加」を選択。
※もしくはショートカット Shift + A
3 . オートレイアウト化したレイヤーが確認できます。（アイコンが変わります）
4 . オートレイアウト化したレイヤーを選択すると、右パネルに「オートレイアウト」の欄が確認出来ます。ここでオートレイアウトをコントロールします。
以下、オートレイアウトのテクニックをいくつか説明します。
■ 縦横並べ/折り返し
画像に記載の、右パネル「オートレイアウト」方向アイコンで選択できます。
横並べ
縦並べ
折り返し
■ 間隔の調整
画像に記載の、右パネル「オートレイアウト」間隔アイコン（縦横）で選択できます。
■ 揃えの調整
画像に記載の、右パネル「オートレイアウト」揃えアイコン（9方向）で選択できます。
■ 余白の調整
画像に記載の、右パネル「オートレイアウト」パディング（縦横、及び４方向）で選択できます。
■ フレームの調整（固定 / コンテンツの内包 / コンテナに合わせて拡大）
右パネル「オートレイアウト」の 幅(W) 及び 高さ(H) を選択すると、
- 幅を固定
各固定サイズを設定できます。 - コンテンツを内包
「オートレイアウト状態のレイヤー」を選択した場合に発動できる。 → 「オートレイアウト内のオブジェクト」のサイズに応じて、「オートレイアウト状態のレイヤー」の大きさを可変することができる。 - コンテナに合わせて拡大
「オートレイアウと状態のレイヤー」を選択した場合に発動できる。
→ 「オートレイアウト状態のオブジェクト」のサイズに応じて、100%のサイズとなる。
■ フレームの最小幅（及び高さ）・最大幅（及び高さ）設定
オブジェクトの大きさに制限を決める事が出来ます。
上記と同じく、右パネル「オートレイアウト」の 幅(W) 及び 高さ(H) より選択できます。
上記と同じく、右パネル「オートレイアウト」の 幅(W) 及び 高さ(H) より選択できます。
- 最小幅（および高さ）を追加：
これ以上小さくしたくないサイズがある場合、設定できます。 - 最大幅（および高さ）を追加：
これ以上大きくしたくないサイズがある場合、設定できます。
【4-7】マスク
■ マスクとは
オブジェクトの表示領域を限定させる方法です。画像や図形の一部だけを表示させたい場合に良く使われます。
☑️ サンプルデータはこちら
マスク.fig (1.33 MB)
※サンプルデータを開くには、ホーム画面の「インポート」より、入手した.figデータを選択。
■ 作成手順
1 . 「表示するオブジェクト」と「表示するオブジェクトの表示範囲のオブジェクト」を用意します。
※今回は、写真レイヤーを、星形レイヤーの表示領域にします。
2 . レイヤー「表示するオブジェクトの表示範囲のオブジェクト（星形レイヤー）」を「表示するオブジェクト（写真レイヤー）」のレイヤーの下に配置します。
※今回は、写真レイヤーを、星形レイヤーの表示領域にします。
2 . レイヤー「表示するオブジェクトの表示範囲のオブジェクト（星形レイヤー）」を「表示するオブジェクト（写真レイヤー）」のレイヤーの下に配置します。
3 . 両レイヤーを選択し、右クリック。
※ショートカットはCtrl + Alt + M。MacはCmd + Control + M
4 . 写真レイヤーが、星形の表示領域のみに選択されました。（レイヤーの表示もマスク用に変化）
このマスクを応用すれば、色々な表現が出来ます。
このマスクを応用すれば、色々な表現が出来ます。
■ マスクパネル
マスクの種類（アルファ/ルミナンス）を変更するには、マスクグループを選択した状態で、ツールバーにあるマスクアイコンをクリックします。
- アルファ：透明度を使用してマスクの明確度を設定できます。
- ルミナンス：明るさを使用してマスクの明確度を設定できます。
【4-8】エフェクト
■ エフェクトとは
オブジェクトに影を作ったり、ぼかしたり等の効果を付ける事ができます。
手軽に付けられる便利な機能ですが、このエフェクトを多用、強調するとデザインによっては素人感が出てしまう事も多々あるので、さりげなく使う程度が良いと思います。
手軽に付けられる便利な機能ですが、このエフェクトを多用、強調するとデザインによっては素人感が出てしまう事も多々あるので、さりげなく使う程度が良いと思います。
☑️ サンプルデータはこちら
エフェクト.fig (1.81 MB)
※サンプルデータを開くには、ホーム画面の「インポート」より、入手した.figデータを選択。
■ エフェクトの設定方法
右パネル下の「エフェクト」より、選択できます。（デフォルト時はドロップシャドウ）
■ エフェクトの種類
それぞれ ”位置” や ”ぼかし範囲” 等で、細かい設定が出来ます。
ドロップシャドウ：オブジェクトの外側に影を付けます。
インナーシャドウ：オブジェクトの内側に影を付けます。
レイヤーブラー：オブジェクトをぼかします。
背景のぼかし：画像の一部分をぼかします。
※このエフェクトは、多少の手順を要します。
※このエフェクトは、多少の手順を要します。
[ 手順 ]
1 . オブジェクトを2つ用意します。
下のレイヤーに「ぼかす対象となる画像」を配置、その上のレイヤーに「画像をぼかす範囲のオブジェクト」を設置。
※ぼかす範囲のオブジェクトは、簡単な図形でOKです。
2 . 「画像をぼかす範囲のオブジェクト」の透明度を変更。
→（”塗り”項目内）透明度を1%～99%のいずれかに設定。
1 . オブジェクトを2つ用意します。
下のレイヤーに「ぼかす対象となる画像」を配置、その上のレイヤーに「画像をぼかす範囲のオブジェクト」を設置。
※ぼかす範囲のオブジェクトは、簡単な図形でOKです。
2 . 「画像をぼかす範囲のオブジェクト」の透明度を変更。
→（”塗り”項目内）透明度を1%～99%のいずれかに設定。
3 . 「画像をぼかす範囲のオブジェクト」を選択し、エフェクト「背景のぼかし」を選択。
4 . 後は、”ぼかし範囲”を設定すればOKです。
4 . 後は、”ぼかし範囲”を設定すればOKです。
【4-9】プラグイン
■ プラグインとは
Figmaの拡張機能です。フリー画像やSNSアイコンの設置やモックアップ（デザイン見本）を手早く作成したりなど、多くの便利な機能を使う事ができます。
■ プラグインの起動方法
以下3つの、いずれかの方法で起動できます。
クイックアクション（Ctrl + /）を開いて、「プラグインとウィジェット」タブでプラグイン名を直接入力します。
キャンバス上で、右クリック → プラグイン → プラグインを管理を選択。
選択後は、フォーム内にプラグイン名を入力。
選択後は、フォーム内にプラグイン名を入力。
ショートカット Ctrl + p でフォームを起動 → プラグイン名を入力。
■ 便利なプラグインを紹介
Unsplash
高品質な写真を手軽に入手できます。
フォームにテーマを入力すればテーマに近いイメージが表示され、使う事が出来ます。
高品質な写真を手軽に入手できます。
フォームにテーマを入力すればテーマに近いイメージが表示され、使う事が出来ます。
Iconify
アイコン（SNSロゴなど）を入手できます。
フォームにテーマを入力すれば、テーマに近いイメージが表示され、使う事が出来ます。
※サンプルでは、Instagramを入力しています。
アイコン（SNSロゴなど）を入手できます。
フォームにテーマを入力すれば、テーマに近いイメージが表示され、使う事が出来ます。
※サンプルでは、Instagramを入力しています。
Brush
イラストを入手できます。
このプラグインもフォームにテーマを入力すれば、テーマに近いイメージが表示され使う事が出来ます。
※一部有料の素材もあります。
イラストを入手できます。
このプラグインもフォームにテーマを入力すれば、テーマに近いイメージが表示され使う事が出来ます。
※一部有料の素材もあります。
Mockup Plugin
PCやスマートフォン等のモックアップ（見本）を簡単に作成できます。
PCやスマートフォン等のモックアップ（見本）を簡単に作成できます。
Japanese Font Picker
日本語フォントプレビューが出来ます。フォント選びに便利です。
日本語フォントプレビューが出来ます。フォント選びに便利です。
UIGradient
グラデーションを見本から付ける事が出来ます。
グラデーションを見本から付ける事が出来ます。
