こんにちは。デザイナーのこばやしです。
弊社でも最近figmaを使ったデザインを導入し始めました。
初めての方が「これどうやるんだ？」と困ったり、知っていたら便利な機能を紹介したいと思います。

• 1.キーボードショートカット一覧表示
• 2.任意のオブジェクトまで瞬時に移動
• 3.深い階層のオブジェクトのダイレクト選択
• 4.任意のデザインのみプロトタイプを共有する
• 5.テキストやオブジェクトを斜めに変形してくれるプラグイン「skew」
• 6.PC内の日本語フォントのみを一覧表示してくれるプラグイン「JP Font Switcher」
• 7.塗りつぶし背景のタイル表示
• 8.フレームの「コンテンツを隠す」による画像マスク
• 9.使用中のコンポーネントから違うコンポーネントへの変更
• 10.STUDIOにfigmaのデザインを反映してくれるプラグイン「figma to STUDIO」

1.キーボードショートカット一覧表示

Ctrl+Shift+?（/）

迷ったときはこちらの一覧からショートカットを確認できます。
個人的に「/」より「?」で覚えていたほうが忘れなかったのでお勧めしたいです。
一覧に載っているショートカットたちは実行すると色が青色に変わるので、ショートカットを覚えるのに便利です！
最初のころは整列ショートカットが全く覚えられなかったのでとても助かりました。
キーボード入力が「かな入力」になっているとショートカットが効かないので注意が必要です。

個人的によく使うショートカット

• 左揃え　alt+A
• 右揃え　alt+D
• 上揃え　alt+W
• 下揃え　alt+S
• 中央揃え（縦）　alt+V
• 中央揃え（横）　alt+H
• 等間隔に分布（縦）　alt+Shift+V
• 等間隔に分布（横）　alt+Shift+H
• テキストのみペースト　Ctrl（macはコマンドキー）+Shift+V
• スタイルのコピー　Ctrl（macはコマンドキー）+Alt+C
• スタイルのペースト　Ctrl（macはコマンドキー）+Alt+V
• オートレイアウト　Shift+A
• フレーム化　Ctrl（macはコマンドキー）+Shift+B
• PNGとしてコピー　Ctrl（macはコマンドキー）+Shift+C
• てのひらツール　スペースキー

2.任意のオブジェクトまで瞬時に移動

移動したいオブジェクトのレイヤー左側アイコンをダブルクリック

Figmaでデザインするとどんどんオブジェクトが増えてしまい移動が大変なので便利です！

3.深い階層のオブジェクトのダイレクト選択

Ctrl（macはコマンドキー）+クリック

オートレイアウトなどでついついデザインの階層が深くなりがちなので、この機能はXDと同じで個人的に助かりました。

4.任意のデザインのみプロトタイプを共有する

figmaの右側メニューの共有ボタンからプロトタイプを共有すると、ページ内にあるすべてのフレームが共有されてしまいます。
以下の手順で自分が共有したいデザインだけをプロトタイプで共有することができます。

1.右側メニューのプロトタイプを選択
2.フローの開始点横の＋ボタンを選択

3.出てきたテキストボックスに適当な名前を入力
4.再生ボタンを選択

5.プロトタイプ画面の右上にある「プロトタイプを共有」を選択することで共有リンクや設定をすることができます。

5.テキストやオブジェクトを斜めに変形してくれるプラグイン「skew」

無料プラグイン：skew（※2025年3月31日時点）
https://www.figma.com/community/plugin/1219749104610050886/skew

テキスト斜めにしてくれます。日本語を斜体にしたいときなどとても助かっています。

6.PC内の日本語フォントのみを一覧表示してくれるプラグイン「JP Font Switcher」

無料プラグイン：JP Font Switcher（※2025年3月31日時点）
https://www.figma.com/community/plugin/1222407847928087305/jp-font-switcher

日本語を見失ったときに便利です。
自分のPC環境にある全ての日本語フォントが出てくるわけではないっぽい点だけ注意が必要です。

7.塗りつぶし背景のタイル表示

塗りのタイル機能を使うことでfigma内だけでドット柄やストライプ柄などおのパターンを作ることができます。

8.フレームの「コンテンツを隠す」による画像マスク

長方形（角丸つき含む）のみになりますが、フレームの「コンテンツを隠す」をチェックするとフレーム内に入れたオブジェクトをマスクできます。

9.使用中のコンポーネントから違うコンポーネントへの変更

見出しレベルが違うときなど、コンポーネントを変更するとテキストを差し替えずに済むので助かります。コンポーネントで設定できるバリアントでもテキスト情報などを引き継げるので便利です。

10.STUDIOにfigmaのデザインを反映してくれるプラグイン「figma to STUDIO」

無料プラグイン：figma to STUDIO（※2025年3月31日時点）
https://www.figma.com/community/plugin/1274345780965443906/figma-to-studio

ノーコードWeb制作プラットフォーム「STUDIO」（https://studio.design/ja）にfigmaで作成したデザインを簡単に反映してくれる素敵なツールです。
STUDIOの階層上限が12～15のためfigmaのデータ上での階層構造にも気を付ける必要があります。（STUDIOの階層上限に関する参考記事はこちら）

figmaのデータ上でオートレイアウトや余白などをきちんと設定しておくと結構きれいにSTUDIOに反映してくれるので、この機能を使いたい場合はデザインデータを丁寧に作ることをおすすめします。
figma上でレイヤー名に <img> とつけると以下のレイヤーを丸ごと画像データとして処理してもらえるので便利です。

おわりに

Figmaはできることが多く、また、開発スピードも速いのでどんどん進化していっているように感じます。他の人がどのようにデザインを作っているかなどもっと勉強していきたいと思います！