デザインツールのひとつである「Figma」。
有料ソフトも必要なく、デザイナー、コーダー、ディレクターなど複数人で編集・共有ができて便利です。
課金しなければ利用できないこともあったりはするのですが、無料で使える範囲でも事足りてしまうのは魅力的です。
そのため、ウェブ制作における定番になりつつあります。

以前からwebデザイナーをされてる方などは、まだ機会がなくて使ってないんだよな…という方もいるんじゃないかなと思います。

操作に関して言えば、今までのフォトショップの知識や感覚で使えるところは多いです。
また、XDを使ったことがある方ならよりスムーズに使えると思います。

そんなFigmaですが、今まで使用していたデザインツールよりもショートカットを駆使する必要がありそう！と私は感じています。
なので、今回は便利な機能を呼び出すショートカットキーをご紹介！
作業効率が上げるためにしっかり覚えていきましょう。

ショートカット一覧（control+shift+?）

ショートカットは便利！と言いつつ、忘れてしまうこともありますよね。
Figmaでは「control+shift+?(macOS) /control+shift+?(Windows)」で一覧を表示できます。
Macの方はcommandではなくcontrolなので注意してください。
（うっかりcommandにしてて開かないなんてことを私がしてしまうこともあるので…）

画面下部にショートカット一覧が表示されます。
いくつかのタブに分かれていて見やすいですね。
使ったことのあるショートカットは色（水色）が付き、使ったことがないものは色が付いていません。
タブ内の全ての項目を使ったことがあれば、タブ名にも色がつくようです。
色をつけたくて、どんどんショートカットを覚えちゃいそうですね。

一覧の呼び出しショートカットキーを忘れてしまった場合は右下の「?」アイコン、もしくはメニューバーの［ヘルプ］→［キーボードショートカット］からも開くことができます。

また、［レイアウト］タブからキーボードレイアウトを設定できます。
ご自身が使っているキーボードの配列に合わせて設定できます。
※この記事ではJISキーボード（日本語（かな）配列）を使用しています。

レイヤーの階層順序を操作（command+]または[）

レイヤーを選択し、command+]または[(macOS) /control+]または[(Windows)でレイヤーの階層順序を上下に操作できます。

また、最前面にしたい場合は ] を、最背面にしたい場合は [ を押すだけ。
合わせてこのコマンドも覚えておくと便利ですね。

レイヤーの検索、置き換え（command+F）

command+F(macOS) /control+F(Windows)でレイヤー名やテキストレイヤーの文字を検索できます。
レイヤーの種類による絞り込みも可能です。

また、検索だけではなくテキストレイヤー内のテキストを置換することも可能です。
レイヤー名を置換することはできないですのでお気をつけください。

オブジェクトをリサイズ（command+矢印キー）

オブジェクトを選択し、command+矢印キー(macOS) /control+矢印キー(Windows)を押すとリサイズが行えます。
shiftキーを一緒に押すと10px単位でリサイズしてくれます。

マウスで調整することも多いですが、細かい調整がしたい時には重宝すると思います。
矢印キー、矢印キー+shiftを押した際のピクセル数の設定は変更することができるので、カスタマイズしてみるのもいいですね。

［Figma］→［基本設定］→［ナッジ］から設定を行います。
「小さな調整」には矢印キーの値を「大きな調整」には矢印キー+shiftの値を指定します。

拡大縮小（K）

拡大縮小は地味に多用したりするので覚えて損はないと思います。
グループに含まれていたり、画像単体レイヤーだったりする場合は初期の設定の「移動（V）」で問題なく拡大縮小されます。
ですが、フレームで包まれているときは移動（V）だとフレームの大きさだけ変更されて中の画像はそのままになってしまいます。

そんな時は「拡大縮小（K）」に変更すれば中身も合わせて拡大縮小してくれます。
グループ内に背景レイヤーを置かず、フレームに塗りを設定するやり方もあるので、その時はこの「拡大縮小（K）」が重宝するかと思います。
「移動（V）」と「拡大縮小（K）」セットで覚えておくのがいいと思います。

また、テキストも「拡大縮小（K）」にすることで文字の大きさを同じように変更できます。
「移動（V）」だと、枠の大きさを変更するだけで幅に収まらなかった文字はそのままのサイズで改行されます。

レイヤーの複製コマンド（command+D）

レイヤーを選択した状態で、command+D(macOS) /control+D(Windows)すると、レイヤーの複製ができます。

また、このコマンドは直前の動作も含めて複製してくれるので下方向への複製も行えます。
最初の段階では、複製は右側にしていってくれます。
下方向に複製し続けてほしい場合は、一度下にコピペした動作が必要になります。
作業としては以下の通りです。3段目以降から複製で素早く足していくことができます。

・command+D(macOS) /control+D(Windows)でレイヤーを複製
・コピーしたいレイヤーを選択（複数でも可）
・option(macOS) /alt(Windows)を押しながら下方向へコピー
・再度command+Dすると下方向にレイヤーが複製される

素早く等間隔の繰り返しのレイアウトを実装できるので覚えておきたいショートカットです。

均等配置（control+option+T）

複数のレイヤーを選択状態にした上で、control+option+T(macOS) /alt+shift+T(Windows)を押すと均等配置が行えます。

均等配置されたオブジェクト間の余白はハンドル操作（余白にある ｜部分 ）や数値入力で一括編集が可能になります。
また、オブジェクトの中心に表示される丸印をドラッグアンドドロップすると、余白を維持したままオブジェクトの入れ替えができてとても便利です。

PNGとしてコピー（command+shift+C）

レイヤーを選択し、command+shift+C(macOS) /control+shift+C(Windows)または、右クリックで開かれるメニューからPNGとしてコピーが行えます。

この状態でSlackやチャットワークなどに画像をペーストできます。便利！
書き出す手間も短縮できて本当に助かる機能です。

また、右クリックで開かれるメニューからは［コードとしてコピー］や［SVGとしてコピー］も選択できます。
［コードとしてコピー］でcssを選び、どこかにペーストしてみるとcssのスタイルがずらり。
コードの調整が必要な時もあるとは思いますが、こちらも時間短縮につながると思います。

［SVGとしてコピー］でコピーしたものはレイヤー情報も保持するので、別デザインツール（XD等）に移植したいという場合に便利です。
単純な構造のものは問題ないことが多いですが、マスク等を使用してる場合はコピー元を完全に再現できない（ずれたりはみ出したりする）こともあるのでその点は注意が必要です。

ペーストして置き換え（command+shift+R）

レイヤーをコピーした後に、置き換えたいレイヤーを選択した上で、command+shift+R(macOS) /control+shift+R(Windows)でペーストして置き換えが行えます。
置き換えているので前にあったレイヤーを削除する手間が省けます。

この機能はオートレイアウトの中身を入れ替えたいときに便利です。
オブジェクトを消したり、並び替えを行うという手順が不要になります。

ショートカットを覚えて作業効率を上げていこう！

今回はfigmaのショートカットをいくつかご紹介しました。
まだまだ紹介しきれなかった便利なショートカットも存在します。
ぜひ、ご自身に必要なショートカットをどんどん覚えてFigmaを使いこなしていってください！