これは何
Figmaは無料で使えてサクサク動くため、UIの制作だけでなくちょっとした画像の作成にも使うことが多いです。
自分がQiitaを書くときに使用している画像もほとんどFigmaで作成しています。
 |
 |
 |
|---|---|---|
| スクリーンショットを加工したり | UIのモックを作ったり | 図解をしたり |
こうしたグラフィックの作成をする時に便利な機能やプラグインを整理してみました。
編集
拡大縮小
Figmaではそのまま要素を拡大しようとすると、テキストのサイズやサイズが固定されているオブジェクトは拡大されません。
こうした設定を無視して、オブジェクトの拡大縮小を行いたいときは、「K」でScaleツールに切り替えると、テキストサイズやサイズが固定されているオブジェクトも関係なく、拡大縮小ができます。
オブジェクトをフラットにする
マスクを使ったりパスをいじったりしてベクターオブジェクトをいじっていると、いつの間にか角度の値が変な値になっていたり、バウンディングボックス（オブジェクトを選択した時に出てくる青色の線）の形状が水平で無くなったりすることがあります。
これらをフラットな状態にしたい時は、「⌘+E」でオブジェクトをフラット化します。
Selectionの効果や角丸など、Figma上で設定したいろいろな効果が全て効果ではなくベクター状態になるので、再編集がしづらくなる点にお気をつけください。
矢印キーで移動する量（Nudge）を変更する
グラフィック作成をしていると、0.1px単位で細かい調整をしたい時や、100px単位で要素を並べたい時など、さまざまなスケールでの調整をすることが多いです。
こうした時に「Preference -> Nudge amount...」からNudgeの値を変更すると、矢印キーでオブジェクトを移動したり数値を増減させる時の単位が変えられるのでとても便利です。
Small nudgeで通常の矢印キー操作時の変更量、Big nudgeで「Shift」を押しながら矢印キー操作時の変更量を設定できます。
Effectsでオブジェクトを加工する
Effectsの機能では、オブジェクトにさまざまな加工をすることができます。
Layer blurではオブジェクト全体をぼかすことができます。
Drop shadowではオブジェクトの外側に影を追加できます。
Inner shadowではオブジェクトの内側に影を追加できます。
Background blurでは、オブジェクトの後ろにあるものをぼかすことができるので、画像の一部だけぼかしたい時などに便利です。
プラグイン
SkewDat
SkewDat、オブジェクトを「歪ませる」ことができるプラグインです。
画像を作成していると、オブジェクトを歪ませたいことがたまに良くあり、わざわざ他ツールでやるほどでもないな...という時にとても便利です
RemoveBG
Figma上で画像の背景を削除できるプラグインです。他ツールをわざわざ起動するのが面倒な時にさっと編集できて便利です。
⚠︎使用するにはremovebgでアカウント取得が必要です。
Isometric
文字通り、アイソメトリック画像を作れるプラグインです。
オブジェクトを選択して起動するだけで、簡単に適用できます。
oblique
オブジェクトに斜めの影をつけられるプラグインです。
影の長さや角度を調整でき、ちょっとしたグラフィックなどを立地にしたい時に便利です。
Wave & Curve
さまざまな形状の波線を簡単に作成できるプラグインです。
ちょっとした装飾を追加したい時などに便利です。
