Figmaでコマンドやプラグインを使ってよくやる小技をシチュエーション付きで紹介する

## これは何

私がFigmaでコマンドやプラグインを使ってよくやる小技をシチュエーション付きで紹介しています。

## レイヤーをコマンドで閉じてサイドバーをスッキリさせる

### シチュエーション

作業している間にレイヤーツリーが大量に増えてきて、構造がわからなくなった時

これを|こう
---|---
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/e3d9f68e-9f0a-2f43-ea8e-c22c20ebe205.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/d6878276-e4dd-1e36-3b18-bb68486ccb9e.png)

### やること

`Option + L`でレイヤーを閉じる

## コマンドでレイヤーを自由自在に移動する

### シチュエーション

キャンバス内でオブジェクトをクリックするのが面倒な時
レイヤー構造が複雑で、選択したいオブジェクトをうまく選択できない時

### やること

- 下位レイヤーに移動する
    - `Enter`
- 上位レイヤーに移動する
    - `Shift + Enter`
- レイヤーツリー上で下のレイヤーに移動する
    - `Tab`
- レイヤーツリー上で上のレイヤーに移動する
    - `Shift + Tab`

## 複数のオブジェクトを一括で命名変更する

### シチュエーション1

きちんと命名しないで作ったFrameでたくさんコピーを作成してしまい、きちんと命名し直したいとき

|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/ad0a1beb-813e-02ea-ca94-04c4dc076f0d.png" width="300px" />|
|:-:|
|似たようなFrameが`FrameXX`でいっぱいある状態|

### やること

- プラグインの[Similayer](https://www.figma.com/community/plugin/735733267883397781)を使って、同じコンポーネントを一括で選択する
    - 今回の場合は全てサイズと色が同じなので`Fill`と`Size`を選択します
      <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/0b9bbab5-388b-7038-e0a5-72873245063f.png" width="300px" />
- レイヤーを選択できたら、選択したアイテムを一括でリネームします
    - `Command + R`でRenameのメニューを開き、変更したいテキストを2つ目のテキストボックスに入れて`Rename`をクリック
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/fbe8cac8-8988-83f4-ff58-95f36106a412.png" width="300px" />
- リネーム完了




### シチュエーション2

後から命名が変わって一括で変更したい
Ex `Header`を`Global menu`にしたい

### やること

1. プラグインの[`Find/Focus`](https://www.figma.com/community/plugin/739978920241977182/Find-%2F-Focus)で変更したい名前が含まれるレイヤーを一括選択する
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/eafbe48e-8792-7199-0ee8-42941311c4ec.png" width="240px"/>
1. `Command + R`で`Rename selections`のメニューを開き、`Match`に変更したいテキスト、`Rename to`に変更後のテキストを入れる
    - （`Preview`で変更のプレビューが確認できます）
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/97a981bd-a760-6df4-b26d-e15004c2639b.png)
1. `Rename`をクリックすると、一括でリネームできます

## Similayerでインスタンスの同じ部分を一括選択して、一気にダミーデータを入れる

### シチュエーション

インスタンスを大量に作成したときに、それっぽいダミーデータを入れたいとき

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/ab2f0d31-cac9-b246-4899-911762b02a00.png)|
---|


### やること

- プラグインの[Similayer](https://www.figma.com/community/plugin/735733267883397781)を使って、同じコンポーネントを一括で選択する
    - 今回の場合は全てレイヤー名が同じなので`Name`を選択します
    - 下の「Limit selection within root frame」にチェックを入れておくと、選択範囲をルートフレーム（一番親のFrame）内に絞り込めます
      <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/97f20a7b-9a9a-8ea1-3fc5-f6423d0e0d42.png" width="300px" />
- 選択した要素にダミーデータを一括で流し込む
    - 画像は[Unsplash](https://www.figma.com/community/plugin/738454987945972471/Unsplash)、テキストは[dummy-text-ja](https://www.figma.com/community/plugin/946692694904143875)や[Japanese Dummy Text
](https://www.figma.com/community/plugin/884977600755027488)がおすすめです
- それっぽい画面が完成
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/e2dabfc6-dfa2-be80-da63-ea3e3adc4e6e.png)