Figmaでよく使うコマンドリスト

n番煎じかとは思いますが、こういう記事はいろんな視点でいくつもあって良いかなと思ったので投稿します！

## これだけ覚えておけばOKなやつ

この記事で色々書いていますが、Figmaはサービス内に便利なクイックアクションととても見やすいショートカットリストが用意されています！

そしてクイックアクションさえ開ければ、検索でメニューを見つけたり、「Shortcut」と検索してショートカットリストにアクセスし、ショートカットを確認することが出来ます。

なのでこの記事では「コマンドを覚える」というよりは「こんなコマンドあるんだな」と「こんな風に使うと便利なんだな」を知っておく場として使ってもらえると良いかなと思います！

### クイックアクションを表示する

`Command` + `/`

:::note
あれ？〇〇ってどうやるんだっけって思ったらとりあえずコマンドパレットを開いて検索すれば大体出てきます
直近使ったメニューやプラグインも候補に出てきて便利です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/9d927bba-4a16-b391-54dc-f7a73088d7c3.png)
:::

## 便利小技系

### ショートカットを確認する

`Control` + `Shift` + `?`

:::note
ショートカットが確認できます
使ったことのあるコマンドの色が変わるというゲーム性もあるのでつい制覇したくなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/50a26f44-2fbd-ef94-341e-c83eb332e18f.png)
:::

### サイドバー（UI）を非表示にする

`@`

コードなどと並べておいていると画面サイズが小さくなり、UIが見にくい時があります。
そんな時は`@`でサイドバーを非表示にすると非常にみやすくなります。

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

`Command` + `Shift` + `C`

:::note
ちょっとした画像を作成した時やUIの状態を共有する時に便利です
:::

### オブジェクト間の距離を測る

基準となるオブジェクトを選択し、`Option`を押しながら距離を測りたいオブジェクトにHoverする

:::note
CSSを書くときに要素間の距離を測るのに便利です
:::

### ファイル内検索

ファイル内のレイヤー名やテキストを検索でき、置換もできます

`Command` + `F`

細かく検索条件を指定したい場合は「[Similayer](https://www.figma.com/community/plugin/735733267883397781)」というプラグインが便利です :)

### リンクをコピーする

`Command` + `L`

Figmaのリンクを共有する機会は何かと多いので、ショートカットを覚えておくと時短になります

## 選択系

### レイヤー階層を無視して直接オブジェクトを選択する

`Command`を押しながら選択したいオブジェクトをクリック
`Command`を押しながら`ドラッグ`で複数選択もできます。

:::note
通常オブジェクトをクリックをするとレイヤー階層が上のものから選択されるので、階層が深いものを選択したいときに便利
:::

### 選択しているオブジェクトの子レイヤーを選択する

オブジェクトを選択した状態で`Enter`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/b145da3a-ec07-5906-613b-2321012a5e95.png)

:::note
このFrameの中身を全部`Fill container`にしたいんだよなとかって時に便利です
:::

### 選択しているオブジェクトの親レイヤーを選択する

オブジェクトを選択した状態で`Shift` + `Enter`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/acc1fbb3-0a8f-b028-d1f4-969261c8fe33.png)

:::note
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/e9514be6-c69b-b2ff-0e5a-fdd0a62eccf7.png)
↑こういうコンポーネントを選択したいときに、「テキストかアイコン部分を`Command` + `Click`で直接選択して一個上に移動する」みたいな選択方法ができて便利です
:::

## 編集系

### `Big nudge`単位でプロパティを変更

`Shift`を押しながら矢印キーで移動やサイズ変更する

:::note
`Big nudge`の値は`Preference` > `Nudge amount...`から設定できます
私は、基本UI上の数値を `4` or `8` の倍数にするため`Small nudge`を`4`、`Big nudge`を`8`にしています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/46746fb0-f0ff-553a-9f56-e5bdde0aa4de.png)
:::

### オブジェクトを前面/背面に移動する

前面に移動： `Command` + `]`
最前面に移動： `]`
背面に移動： `Command` + `[`
最背面に移動： `[`

### レイヤーをリネームする

`Command` + `R`

:::note
レイヤーを複数選択した状態だと、リネームメニューのモーダルが開いて、インデックスを追加したりテキストの置き換えをしたりテキストを追加したりできます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/1a7ab81a-9c13-d0a6-c4cc-2620f59d063e.png)
:::

### 選択しているレイヤーをロック/ロック解除する

`Command` + `Shift` + `L`

### ロックされているオブジェクトを選択する

`Control`を押しながらクリック

### オブジェクトを整列する

#### 上下左右揃え

`Option` + 上揃え : `W` / 左揃え : `A` / 下揃え : `S` / 右揃え : `D`

:::note
ぱっと見上下左右覚えるの大変そうと思ったけど、「WASD」になっててゲームの移動と同じになってるので覚えやすいです:video_game:
:::

#### 中央揃え

`Option` + 縦揃え : `V`（Vertical） / 横揃え : `H`（Horizontal）

### オブジェクトを等間隔に配置する

`Control` + `Option` + `T`

### 入れ替えてペーストする

`Command` + `Option` + `Shift` + `V`

または

`Command` + `Shift` + `R`

:::note
AをBに入れ替えるという作業が1クリックで済むので地味にめちゃめちゃ便利です
複数選択した状態で一括で入れ替えもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/6423bf06-8fc8-6823-2f8e-e2901ed13201.png)
:::

### `Auto layout`を適用する

`Shift` + `A`

解除は`Option`を追加

### 選択したオブジェクトをFrameで囲う

`Command` + `Option` + `G`

:::note
Groupのコマンドもあるけど、Figmaでは基本Frameを使うことが多いので
:::

解除は`Option`を追加

### コンポーネント化する

`Command` + `Option` + `K`

### インスタンスを解除する

`Command` + `Option` + `B`

## ツール系

### 移動ツールを選択

`V`

### テキストツールを選択

`T`

### コメントツールを選択

`C`

## UI系

### UI（ヘッダー・サイドバー）を隠す/表示する

`Command` + `.`

:::note
確認作業をしたり画面共有をする時にさっとUIを非表示にできて便利です
:::

### コメントを隠す/表示する

`Shift` + `C`

### グリッドを隠す/表示する

`Shift` + `G`

### レイヤーパネルの階層を閉じる

`Option` + `L`

:::note
レイヤー階層が増えすぎて見通しが悪くなってきた時に便利です
:::

## おまけ

使用頻度は高くないけど好きなやつです

### 左右/上下反転する

左右反転：`Shit` + `H`
上下反転：`Shift` + `V`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/a7e4ec80-4d5b-4d8b-cadf-952236e6d068.png)

:::note
UIという観点ではあまり使わないけど、簡単なグラフィックを作成する時とかは便利かも
:::

### カーソルにメッセージを表示する

`/`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/f72bbddc-66d8-ab36-b337-1597261d1bd5.png)

:::note
楽しいです
:::