「Figma(フィグマ)」とは、UI（ユーザーインターフェース）やUX（ユーザーエクスペリエンス）のデザインに特化ししたウェブベースのデザインツールです。リアルタイムでのコラボレーション機能を備えており、複数のデザイナーが同時に同じプロジェクトにアクセスし、同時編集作業を簡単に進めることができます。また、「Figma」はクラウド上で動作するため、アプリをインストールせずにどこからでも利用でき、変更内容がすぐに共有されます。主にプロダクトデザインやウェブ、アプリのUIデザインに使用され、デザインからプロトタイピング、フィードバックまで一貫して行えるのが「Figma」の特徴です。
本記事では、そんなブラウザ上で簡単に使用できるデザインツール「Figma」の初心者目線で絶対に使える便利なショートカットキーをレベル別に紹介していきます！！
ショートカットキー 一覧表
まずはじめに。
「Figma」には、どのようなショートカットキーがあるのでしょうか。
Figmaでは、ショートカットキーを一覧で簡単に確認することができます。
Control + Shift + ?
Control ＋ Shift ＋ ？ で、ショートカットキー一覧を表示することができます。
画面下に、ショートカットキー一覧が表示されました。
「基本」「ツール」「表示」など、種類別にまとめられていて使いやすい一覧画面です。
上の画像のように、一度でも使ったことがあるショートカットは、水色で表示されます。
知らなかったショートカットを探して、使ってみるのもいいですね。
ショートカットキーを使わずに、一覧を表示する。
一覧を表示するショートカットを忘れてしまった場合も、一覧を表示させることができます。
メニューバーの『ヘルプとアカウント』→『キーボードショートカット』
または、右下の『？アイコン』→『キーボードショートカット』を選択します。
この表示方法も覚えておけば、ショートカットキーを忘れてしまっても安心です。
レベル：★☆☆ ツールの変更
まずは、初心者目線で一番に紹介したいのは、「ツール変更」のショートカットキーです。
Figmaでは、作業の第一歩である「フレームを追加」「図形を追加」「テキストを追加」といったツールを活用してデザイン制作を行います。
ツールの変更とは…
ツールの変更とは、言い換えるとマウスの機能の変更です。
ショートカットキーを使わない場合は、メニューバーで選択することで、ツールを変更させることができます。
マウスで選択するだけの単純な動作ですが、ツールは利用頻度が多いので、ショートカットキーを利用することでデザイン作業を格段に早くすることができます。
そこでツールの変更を簡単に行うことができるおすすめのショートカットキーを紹介します。
ツール変更 ショートカットキー おすすめ６選！
それでは早速、おすすめのツール変更のショートカットキーを6つ紹介します。
F：フレームツール
『F』を押すと、すぐにフレームを新規追加できる状態になります。
該当場所をクリックするだけで、フレームが追加されました。
作成されたフレームは右側のフレームから編集することが可能です。
T：テキストツール
『T』を押すと、すぐにテキストを新規追加できる状態になります。
該当場所をクリックするだけで、カーソルが表示され、テキストを入力することができます。
テキストの編集も同様に、右のテキスト欄から編集可能です。
R、L：図形ツール
図形ツールには、それぞれの図形にショートカットキーが存在します。
- 『R』 長方形の新規作成
- 『L』 直線の新規作成
- 『⇧L』 矢印の新規作成
- 『O』 楕円の新規作成
- 『⇧Command K』 画像の配置
作成した図形は右のデザインにおいて、縦横のサイズ、角の丸まり、角度、塗りつぶし、線の色を編集することができます。
C：コメントツール
『C』を押すと、すぐにコメントを新規追加できる状態になります。
コメントしたい場所をクリックするだけで、入力欄が表示され、コメントを追加することができます。また、絵文字、メンション、画像なども投稿することができます。
V：移動ツール
『V』を押すと、任意のフレームやコンテンツを移動できるカーソルに変更することができます。
K：拡大ツール
『K』を押すと、任意のフレームやコンテンツを拡大できるカーソルに変更することができます。右の拡大から大きくする割合を選択することができます。
ツール変更用ショートカット一覧
以上６選を含む、ツール変更用のショートカットキーは
先ほど紹介した『ショートカットキー一覧』の『ツールタブ』で確認することができます。
「Control + Shift + ?」 → ショートカットキー一覧表示
よく使うものを覚え、作業効率化を目指しましょう!
レベル：★★☆ 基本的なショートカットキー
ツール変更をショートカットキーで行えるようになりました。
続いては、作業でたくさん使える基本的なショートカットキーを紹介します。
Command + +/- ：ズームイン／ズームアウト
- Command + + ズームイン
- Command + – ズームアウト
Figma以外と同様に、Commandを押しながらマウスのホイールを動かすことでも可能ですが、キーボードのみで作業をしたい場合に便利なショートカットキーです。
Command + D ：複製
- (フレームを選択した状態で) Command + D 選択したフレームをその場に複製
- Option + ドラッグ 選択したフレームをスライド移動して複製
すぐ隣に複製したい時は「ドラッグ」、複数回複製を繰り返したい時には、「D」など、場合に応じて使い分けることで、より作業を早く行うことができます。
] [ ：最前面／最背面に移動
] または [ は、選択したフレームを最前面、最背面に移動させます。
- 「[」 最背面に移動
- 「]」 最前面に移動
- 「Command + [」 ひとつ背面に移動
- 「Command + ]」 ひとつ前面に移動
ショートカットを使わない場合も、『フレームを選択して右クリック』→『最前面／最背面へ移動』で可能ですが、ショートカットキーを使うとかなり単純に作業を行うことができます。
さらに、右クリックメニューから、ほとんどの項目にショートカットキーが設定されていることが分かります。
使用頻度に応じて、少しずつ使用し覚えていくことで、作業が早くなること間違いなしです！
Option + カーソル ：距離の測定
- 「Option + マウス移動」 選択したフレームからカーソル位置までの距離の測定
押した状態で矢印キーを押せば、距離を確認しながら調整することが可能です。
この機能は、余白を調整する時にとても便利ですので、使ってみることをおすすめします。
レベル：★★★ 更に作業を速めるショートカットキー
さて、基本的なショートカットを使えるようになりました！
最後に、さらに作業が早くなるもう一歩先のショートカットキーを紹介します。
Shift ＋ A ：オートレイアウト
オートレイアウトとは、余白やレイアウトを設定すると自動で余白やサイズを調整してくれる、Figmaデザインには欠かせない便利機能です。
- (対象のフレームを選択した状態で) 「Shift ＋ A 」 オートレイアウト
- (対象のフレームを選択した状態で) 「option + Shift + A 」 オートレイアウトの解除
通常は、フレームを選択した状態で右メニューバーにある『オートレイアウト』をクリックして追加するため、かなり簡単にオートレイアウト化が行えるようになります。
Option + Command + K ：コンポーネント
コンポーネントとは、複数のデザインに利用するオブジェクトを一括で編集できる、Figmaデザインに欠かせない便利な機能です。
- (親コンポーネントとして再利用したいオブジェクトを選択し) 「Option ＋ Command + K 」 親コンポーネントの作成
- 「Option + Command + B 」 子コンポーネントの切り離し。これによって自由に編集できます！
まとめ
この記事では、「Figma」でデザインを行う際に便利なショートカットキーを、初心者目線で紹介しました。
| コマンド | 内容 |
| Control + Shift ＋？ | ショートカットキー一覧の表示 |
| F | フレームツールの新規作成 |
| T | テキストツールの新規作成 |
| R | 長方形の新規作成 |
| L | 直線の新規作成 |
| ⇧L | 矢印の新規作成 |
| O | 楕円の追加 |
| ⇧ + Command + K | 図形の配置 |
| C | コメントの新規追加 |
| V | 移動カーソル |
| K | 拡大ツール |
| Command + + | ズームイン |
| Command + – | ズームアウト |
| Command + D | その場に複製 |
| option + ドラッグ | 移動で複製 |
| [ | 最背面に移動 |
| ] | 最前面に移動 |
| Command + [ | ひとつ背面に移動 |
| Command + ] | ひとつ前面に移動 |
| Option + マウス移動 | 選択したフレームからカーソル位置までの距離の測定 |
| Shift ＋ A | オートレイアウト |
| Option + Shift + A | オートレイアウトの解除 |
| Option ＋ Command + K | 親コンポーネントの作成 |
| Option + Command + B | 子コンポーネントの切り離し |
今回、紹介したもの以外にも便利なショートカットキーはたくさんあります。
作業を行う中で、使用頻度の高いものについては、ショートカットキーを一覧で調べ、どんどん使っていくことで、少しずつ作業を効率化させ、素敵なデザインを作成しましょう！
関連記事：Figmaをマスターしよう！これでカンペキ！基本操作記事まとめ
こちらの記事では「Figma」の基本操作から覚えておくと便利な機能まで、解説記事をまとめております！
これを一読しておけばFigmaの機能についてマスターした！といっても過言ではないので、ぜひご覧ください！
コメント