こんにちは、WebデザイナーのERIです！
STRIXでは、デザインツールとしてAdobe XDからFigmaへの移行を進めてからしばらく経過しました。シンプルなUI、強力なプロトタイピング機能、デザインシステムの管理がしやすい点から、多くのデザイナーがFigmaを愛用していますよね。
しかし、便利な機能が多い一方で、覚えることも増え、日々試行錯誤を重ねています…汗
そんな悩みを解決するために、Figmaには数多くのショートカットが用意されています。本記事では、Figmaの時短ショートカットを紹介し、デザイン効率を劇的に向上させる方法をご提案します。
＜この記事のターゲット＞
・Figmaを利用しているデザイナーやディレクターの方
・Figmaで作業を爆速させたい方
作業を爆速させるショートカット一覧
では早速、シンプルに便利なショートカットキーを紹介していきます。
コンポーネント化
Mac：⌘ Command ＋ ⌥ Option ＋ K
Win： Ctrl ＋Alt ＋ K
選択したオブジェクトやグループがコンポーネントに変換されます。
インスタンスの切り離し
Mac：⌘ Command ＋⌥ Option ＋ B
Win：Ctrl ＋Alt ＋ B
コンポーネントのインスタンスを元のコンポーネントから切り離し、独立した要素にすることができます。
選択した部分をエクスポート
Mac：⌘ Command ＋⇧ Shift ＋ E
Win：Ctrl ＋Shift＋ E
選択したオブジェクトやフレームをすばやくエクスポートすることができます。
選択した部分をpng画像としてコピー
Mac：⌘ Command ＋⇧ Shift ＋ C
Win：Control＋shift＋C
わざわざ画像としてエクスポートすることなく、png画像としてコピぺできるので、例えばデザインする際に、隣にワイヤーフレームを置きたい時などに便利です。
フレームをコンテンツにフィット
Mac：⌘ Command ＋⌥ Option ＋⇧ Shift ＋ R
Win：Control ＋Alt ＋ Shift ＋ R
または、プロパティパネルの右上隅にある「サイズ自動調整」のアイコンをクリック。
拡大縮小（スケール）
Mac：K
Win：K
「拡大縮小」ツールを選択した状態で、オブジェクトの四隅や四辺をドラッグ&ドロップする。
※Figmaは「V」だけでは、テキストのスケールができません。
オブジェクトの置き換え（←超便利！）
Mac：⌘ Command ＋⇧ Shift＋ R
Win ：Control＋shift＋R
部分的にデザインを入れ替えたい時に超便利！オートレイアウトがされていれば、上下の余白を特に調整することもなく入れ替えが可能です。
オートレイアウトの追加
Mac：⇧ Shift ＋ A
Win：Shift ＋ A
選択したフレームやグループにオートレイアウトをすばやく適用できます。
定規
Mac：⇧ Shift + R
Win：Shift + R
フレームの左右の余白を固定したい時に便利です。
テキストデータのみのペースト
Mac：⌘ Command ＋⇧ Shift＋ V
Win：Ctrl ＋Shift ＋ V
フォーマットを保持せずにテキストデータのみをペーストできます。
※テキストをそのまま⌘+C/Vでコピペしてしまうと、元のテキストのスタイルまで一緒に反映してしまいます。
その他便利小技系
レイヤー階層を無視してオブジェクトを直接選択する
⌘Command（Mac）／ Ctrl（Win）キーを押しながら、オブジェクトをクリック。
複雑なレイヤー構造の中から特定のオブジェクトを素早く選択することができます。
オブジェクトの複数選択（上の応用）
⌘Command（Mac）／ Ctrl（Win）キーを押しながら、ドラッグ。
Command（Mac）またはCtrl（Win）を押しながらでないと、そのままドラッグするだけだとフレームも一緒にずれてしまったりします。
オブジェクト間の距離を測る
⌥ Option （Mac）／Alt（Win）キーを押しながら、オブジェクトをクリック
オブジェクト間の距離が数値で表示され、デザインの余白を調整する際に必須となるショートカットキーです。
おわりに
以上、デザインの効率がアップするFigmaの時短ショートカットについてでした。
ショートカットを使いこなすことで、デザインのスピードとクオリティが劇的に向上します。
今日からショートカットを使って、作業効率をアップしましょう！