ワークフローを高速化するための 11 の便利な Figma ショートカット

Figma は強力なデザイン ツールであり、ほとんどの UX/UI デザイナーがデザイン プログラムとして最初に選択するものです。Figma 内で非常に多くのことが作成でき、習得が容易なプログラムです。

デザイナーとして、私たちは時間を節約しようとすることが多いため、貴重な時間をメニューを探し回るよりも良い作品を作成することに費やしています. ワークフローを合理化する便利な Figma ショートカットのリストをまとめました。

1.スケールツールを選択

このシンプルなワンキー ショートカットは、アイテムをすばやくスケーリングする方法です。Kキーを押してから、サイズを変更する必要があるオブジェクトを選択します。1 つのアンカー ポイントをクリックしてドラッグするだけで、必要に応じてサイズを変更しながら、オブジェクトのサイズを維持できます。

2. フレーム ツールを選択します。

フレーム ツールは、プロトタイプ デザイン用に複数のフレーム ボードを作成するときに、Figma でよく使用されるツールです。キーボードのFを押すと、1 回タップするだけでツールが表示され、フレームをすばやく描画したり、サイズを変更したりできます。

カーソルをクリックしてドラッグすることでフレームを直接描画できます。または、フレーム ツールを選択したら、右側のフレーム メニューの寸法ボックスに目的のサイズを入力できます。

3. 設計モードとプロトタイプ モードを切り替える

Shift + Eショートカットを使用すると、デザイン モードとプロトタイプ モードを切り替えることができます。どのモードから開始してどのモードに切り替えるかに関係なく、同じショートカットが機能します。これらのモードの違いについては、Figma の初心者向けガイドをご覧ください。

または、この目的のためのより具体的なショートカットがあります。Alt (Windows) / Option (Mac) + 8を使用してプロトタイプ モードからデザイン モードに切り替えることができ、Alt (Windows) / Option (Mac) + 9を使用してデザイン モードからプロトタイプ モードに戻すことができます。明らかに、Shift + Eの方が簡単ですが、オプションがあると便利です。

4.ワンクリックで最も内側の要素を選択する（ディープセレクト）

複数のレイヤーまたは埋め込まれた画像でデザインする場合、1 つの要素をすばやく選択するのが難しい場合があります。一番下のレイヤーを選択するために何十回もクリックするような時間を節約するには、代わりにこのショートカットを使用します。

Mac ではCmd +要素をクリックし、Windows ではCtrl +クリックを押します。単純なキーを 1 つ使用するだけで、最下層の要素を選択するために無意識にクリックする時間を節約できます。

5. 最も内側の要素を選択した後、レベルを移動する

デザインの最も内側の要素を選択できたら、もう 1 レベル近い要素を選択したいと思うかもしれませんが、それは簡単なことです。一番内側の要素を見つけたら、Shift + Enterを押してレベルを戻します。すべてのレベルでこれを行うことができます。

6.すべてのレイヤーを折りたたむ

Figma でデザインすると、特に HTML を Figma デザインに変換するときに、レイヤー パネルが拡大し始め、少し乱雑に見える可能性があります。レイヤーを折りたたむには、Alt + L (Windows) またはOption + L (Mac) を押します。

このショートカットの使用中に要素が選択されている場合、その要素を含むレイヤーは開いたままになります。アートボード以外の場所を選択してすべての要素の選択を解除し、ショートカットを使用してすべてのレイヤーを折りたたみます。

7. レイアウト グリッドの表示または非表示

レイアウト グリッドを使用することは、デザインが特定の比率に達し、さまざまなデバイスに正しくスケーリングできるようにするための最良の方法です。それらは役に立ちますが、常にグリッドを表示したいわけではありません。

レイアウト グリッドのオンとオフの切り替えは、Mac と Windows では異なります。Mac では、Ctrl + Gを押してオンとオフを切り替えます。Windows を使用している場合、これは 3 つのキーのショートカットです。Ctrl + Shift + 4 . それらは異なりますが、同じことをします。

8.一度に複数の写真を配置する

画像用のプレースホルダー形状を備えたレイアウトをデザインした場合、画像を 1 つずつ挿入するのは面倒です。このショートカットを使用すると、複数の写真を配置し、プレースホルダー (またはアートボード上の任意の場所) を選択するだけで、個々の写真を配置できます。

Mac ユーザーの場合は、Cmd + Shift + Kを押してダイアログ ウィンドウを開き、画像を見つけます。Windows では、Ctrl + Shift + Kで、複数の写真を検索して Figma デザインに配置できます。Figma でマスター テンプレートを作成する場合、これは非常に便利なショートカットです。

9. 任意の画像を PNG としてコピー

Figma デザインで画像を使用する場合、さまざまなファイル形式があるかもしれませんが、クライアントが PNG を必要とする場合があります。元の形式に関係なく、任意の画像を PNG としてコピーできます。

選択した画像を選択し、Mac ではCmd + Shift + C 、Windows ではCtrl + Shift + Cを押して PNG としてコピーします。特に Figma でプレゼンテーションを作成している場合は、このショートカットを使用して高標準の画像形式を簡単に確保できます。

10. どこからでも色を点眼する

色のスポイトは、デザインのある部分から別の部分に色を移す場合に便利な機能です。このクイック キーボード ショートカットを使用すると、スポイトをすぐに引き上げて、アートボードのどこからでも色をスウォッチできます。

Mac ではCtrl + Cを押し、Windows では文字キーI を押します。キーボード ショートカットを押したら、スポイト ターゲットを使用する色の上に移動し、1 回クリックして色を見ます。

11. [リソース] タブを開く

Resources タブは、Components、Plugins、および Widgets メニューのホームです。これらのメニューを個別に開くためのショートカットはありませんが、リソース ショートカットを使用すると時間を節約できます: Shift + I . プラグインを使用してモックアップを作成し、Figma デザインに追加できます。

Figma ショートカットで時間を節約

デザイナーは通常、時間とエネルギーを節約するために仕事でショートカットを使用しますが、Figma での作業も例外ではありません。これらの Figma ショートカットは、プログラムで使用できるショートカットの表面をなぞるだけです。

これらの近道は明白ではなく、簡単に見つけることもできないため、新たに学んだことを Figma に取り入れて、多くのデザイナーが理解するのに数か月または数年かかる情報を大いに楽しんでください。