Figmaでちょっと複雑なグラフィックを作りたい時に便利な操作とプラグイン

## これは何

Figmaは無料で使えてサクサク動くため、UIの制作だけでなくちょっとした画像の作成にも使うことが多いです。
自分がQiitaを書くときに使用している画像もほとんどFigmaで作成しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/7849f03b-369f-e021-d3c3-7acfdc77e303.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/a0a08470-bb1a-3441-c2a9-37316ffcc560.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/fe3aded6-c95a-59f9-e65e-c4eeb50f8cea.png)
-|-|-
スクリーンショットを加工したり| UIのモックを作ったり | 図解をしたり

こうしたグラフィックの作成をする時に便利な機能やプラグインを整理してみました。

## 編集

### 拡大縮小

Figmaではそのまま要素を拡大しようとすると、テキストのサイズやサイズが固定されているオブジェクトは拡大されません。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/c846453e-e0e3-c534-1514-d7f68579d7bc.png)

こうした設定を無視して、オブジェクトの拡大縮小を行いたいときは、「K」で`Scale`ツールに切り替えると、テキストサイズやサイズが固定されているオブジェクトも関係なく、拡大縮小ができます。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/15710b30-eaeb-ed84-0b20-5d59a1cbb59b.png)

### オブジェクトをフラットにする

マスクを使ったりパスをいじったりしてベクターオブジェクトをいじっていると、いつの間にか角度の値が変な値になっていたり、バウンディングボックス（オブジェクトを選択した時に出てくる青色の線）の形状が水平で無くなったりすることがあります。

これらをフラットな状態にしたい時は、「⌘+E」でオブジェクトをフラット化します。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/b892cfbb-2d16-f5f0-0784-49a2697c367f.png)

Selectionの効果や角丸など、Figma上で設定したいろいろな効果が全て効果ではなくベクター状態になるので、再編集がしづらくなる点にお気をつけください。

### 矢印キーで移動する量（Nudge）を変更する

グラフィック作成をしていると、0.1px単位で細かい調整をしたい時や、100px単位で要素を並べたい時など、さまざまなスケールでの調整をすることが多いです。

こうした時に「Preference -> Nudge amount...」から`Nudge`の値を変更すると、矢印キーでオブジェクトを移動したり数値を増減させる時の単位が変えられるのでとても便利です。

`Small nudge`で通常の矢印キー操作時の変更量、`Big nudge`で「Shift」を押しながら矢印キー操作時の変更量を設定できます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/14738d4b-5c5e-764d-d079-e4c17865bf39.png)

### Effectsでオブジェクトを加工する

`Effects`の機能では、オブジェクトにさまざまな加工をすることができます。

`Layer blur`ではオブジェクト全体をぼかすことができます。
`Drop shadow`ではオブジェクトの外側に影を追加できます。
`Inner shadow`ではオブジェクトの内側に影を追加できます。
`Background blur`では、オブジェクトの後ろにあるものをぼかすことができるので、画像の一部だけぼかしたい時などに便利です。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/488c5492-b813-f30d-d02e-4a4622c134a9.png)


## プラグイン

### SkewDat

SkewDat、オブジェクトを「歪ませる」ことができるプラグインです。
画像を作成していると、オブジェクトを歪ませたいことがたまに良くあり、わざわざ他ツールでやるほどでもないな...という時にとても便利です

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/7db8b076-d1ae-6951-3536-a1f8c7e19481.png)

https://www.figma.com/community/plugin/741472919529947576/SkewDat

### RemoveBG

Figma上で画像の背景を削除できるプラグインです。他ツールをわざわざ起動するのが面倒な時にさっと編集できて便利です。

⚠︎使用するにはremovebgでアカウント取得が必要です。

https://www.figma.com/community/plugin/738992712906748191

## Isometric

文字通り、アイソメトリック画像を作れるプラグインです。
オブジェクトを選択して起動するだけで、簡単に適用できます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/c617c8bd-82eb-efb0-498a-7cdb27b0a116.png)

https://www.figma.com/community/plugin/741184519069077841/Isometric

### oblique

オブジェクトに斜めの影をつけられるプラグインです。
影の長さや角度を調整でき、ちょっとしたグラフィックなどを立地にしたい時に便利です。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/f1c073f7-be55-64d5-c6c8-759a937d48a3.png)

https://www.figma.com/community/plugin/876352455198080607/oblique

### Wave & Curve

さまざまな形状の波線を簡単に作成できるプラグインです。
ちょっとした装飾を追加したい時などに便利です。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/bcd3d94a-c455-2d53-8832-dea5119eed3a.png)

https://www.figma.com/community/plugin/745971189153303901/Wave-%26-%D0%A1urve