こんにちは、ウィルスタイルの六川です。

私は子どもの頃、ゲームを買うときは攻略本もセットで買うタイプでした。取り逃した要素や隠しアイテム、裏コースなどがないかを確認したり、ときにはゲーム雑誌や有志の掲示板をチェックすることも。攻略本には載っていない隠し要素、裏技などの情報を見つけては少し得した気分になるのも楽しみの一つでした（クリアできるかどうかはまた別の話….）。

ということで、今回はFigmaを使う上で知っているとちょっと便利な小ネタをいくつかご紹介します。タイトルには「エンジニア向け」と書きましたが、デザイナーの方にも活用いただける内容になっているかと思います。既にご存知のものもあるかもしれませんが、少しでも発見があれば嬉しいです。

※本記事で紹介するショートカットは、Macを前提としています。Windowsをご利用の方は、command を Ctrl、option を Alt に置き換えてください。

調査系

コンテンツ間の距離を表示する

基準にしたい要素を選択 + option

実装時には欠かせない機能です。ボタンやテキストの距離など、要素同士の余白やマージンを確認することができます。

ロックされている要素をクリックする

command（⌘） + 右クリック

通常、ロックされている要素はクリックできませんが、command（⌘）を押すことで直接選択が可能になります。このショートカットキーを覚えれば、レイヤーパネルからロック要素を探す必要はありません！そのままcommand（⌘） + Shift + Lでロック解除もできます。

深い階層のレイヤーをクリックする

command（⌘） + クリック

グルーピングされている複数要素の中から、対象となる要素を直接選択する方法です。グルーピングされている要素は、通常上のレイヤーから順に選択されるため、深い階層になるほど何度もクリックする必要がありますが、この方法では一回で選択することができます。

shift + Enterを押せば、選択した要素の一つ上のレイヤーを選択することもできます。

カラーピッカーを使う

control + Cもしくはi

デザインデータ内の色を素早く確認したい時に便利です。ちなみに、FigmaのカラーピッカーはFigma外からも色を取得できます。便利ですね。

移動系

ズームイン・ズームアウト

ズームアウト（画面に合わせて調整）：shift + 1
選択中の要素にズームイン：shift + 2

ズームアウトでファイル全体を俯瞰して確認、および、選択中の要素へ素早くズームすることができます。

手のひらツールを使う

Hをクリックもしくはスペースキーを押しながらドラッグ

キャンバスをドラッグして移動できます。Hキーを押すと手のひらツールに切り替わり、スペースキーを押すと押している間だけ一時的に手のひらツールになります。

私は、選択ツールのまま作業できるほうが使いやすいので、スペースキーを押して一時的に切り替える方法をよく使っています。

編集系

要素を複製する

option + ドラッグ

操作中にshiftを押すと、水平・垂直にコピーすることもできます。

複数要素を一括リネームする

レイヤー名をまとめて編集することができます。

1. 名前を変更したい要素を全て選択し、右クリック。メニューバーから「名前を変更」をクリック（もしくはcommand（⌘） + R）。
2. ウィンドウの「変更後の名前」欄に任意の名前を入力します。「昇順↑」もしくは「降順↓」をクリックすると、連番で番号を割り振ることも可能です。

不透明度を調整する

不透明度0%：00
不透明度50%：5
不透明度100%：0

要素を選択したうえで、テンキーで数字を入力すると透明度を変更することができます。

元画像を取り出す

実装時に画像の切り抜きや表示範囲を調整したい場合、トリミング前の画像をデザインデータから取得することができます。デザイナーが意図してトリミングや切り抜きを行っている場合もあるため、利用には少し注意が必要ですが、元画像をさっと確認したい場合や、トリミング前の画像を使って実装したほうが適している場合に役立ちます。
Figmaでは画像のトリミングが「塗り」もしくは「マスク」で指定されていることが多いため、それぞれの方法での取得方法をご紹介します。

塗りとして指定されている場合

1. 取り出したい画像の入った要素を選択し、option（⌥） + command（⌘） + C
2. 任意の大きさでシェイプを作成し、option（⌥） + command（⌘） + Vで貼り付け。
3. 塗りからトリミングに変更し、トリミング範囲を調整。

マスクされている画像の場合

1. 取り出したい画像の入った要素を選択し、マスクシェイプをクリック。
2. command（⌘） + control + Mで元画像表示。

その他

コメントの表示 / 非表示

shift + C

コメントの数が多くなってきたとき、一時的に非表示にすることでデザインデータが見やすくなります。

選択範囲を画像としてコピーする

command + shift + C

フレームからわざわざ書き出す必要なく、さくっと画像コピーできます。ちょっとした共有や別ツールへ簡易的に貼り付けたい時などに便利です。

最後に

今回は、Figmaで使えるちょっとした便利機能をご紹介しました。一つひとつはちいさなテクニックですが、知っておくと作業が早くなったり、操作が簡略化されたりと、日々の業務を少しずつ快適にしてくれます。

Figmaには他にも便利機能があるので、日々の制作に取り入れて、自分なりの便利な使い方を見つけてみてくださいね。