
Figma に欠かせないプラグイン10選
こんにちは、NewsPicks UIデザイナーの早河です。
GWはいかがお過ごしでしたか?
私は Figma プラグインの整理をしていました。

増えすぎた Plugins
とりあえずインストールしてみたものの、使わなかったり / 存在すら忘れていたものを削除して、浮かび上がったいつもお世話になっている選りすぐり10個のプラグインをこの機会に紹介させていただければと思います。
普段の業務やワークフローによって、必要となるプラグインは違うと思いますが、Figma を使って UI デザインする上で必要不可欠だと思うものを選出してみました!
Autoflow
シンプルなフローを書いて、画面遷移を説明する際に使っています。(プラグインウィンドウ表示した状態であれば、矢印が画面に追従してくれる…!)
Better Font Picker
illustrator ライクなフォントピッカー。サンプル見ながらフォント選べて便利です。(標準で欲しい機能です)
Content Reel
Microsoft 謹製。ダミーのテキスト / 画像を画面に流し込む際に使います。
データセットを自前で作成・登録することも可能なので、日本語姓名登録して使っています。
Downsize
Figma上で画像の圧縮やリサイズができます。
画像が増えると読み込み速度やメモリ使用量に影響があるので、いつも70~80程度の圧縮をかけています。(圧縮しすぎに注意)
Figma to HTML, CSS, React more!
指定したURLの画面を、Figmaデータに変換できます。
運用中のサービスで「この画面デザインデータないなぁ」ということがたまにあるので、そのような時に便利です。(なかなかの精度。文字情報取り出したい時にも便利)
Image tracer
ビットマップをベクターに変換してくれます。サービスロゴやアイコンなどサクッとデザインに反映させたい際に使っています。(前はillustrator でトレースして Figma に持っていっていました)
Measure
デザイン仕様をエンジニアさんへ伝えるときに使います。デザイン確認して「ここを◯◯ ptでお願いしますmm」という時に便利です。(Figma でスペック見ることも可能ですが、グループ化されていたりすると選択しづらかったりするので)
Nisa Text
複数行の原稿をコピペして、1行ごとに分割する際に使います。(Excel などからデータを引っ張ってくる際に便利です)
Pixel Perfect
「K」のスケールモードで拡大/縮小したオブジェクトのサブピクセルの解消に使っています。(他に似たのもありますが、名前がカッコいいから使っています)
Unsplash
画像を探して、保存→デザイン反映という面倒な作業を削減することができます。ダミーであっても見栄えの良さにはこだわりたい!(この記事のカバー画像作成にも使いました)
以上になります。全てのプラグイン開発者の方に感謝します。
5/10-11 に開催される Figma Config 2022 にて発表の Figma Community Awards の投票が受付中です。よく使うプラグインも最終選考にノミネートされていたので、Vote しました!
みなさんのおすすめのプラグインなどありましたら、ぜひ教えてください。
ありがとうございました。