デザイン効率UP! よく使うFigmaの最強ウィジェット&プラグイン
はじめまして、株式会社アクトビのExperience Unit Manager 兼 デザイナーの和田です!
今回、私たちのデザインチームがFigmaでデザインを作る上でこれめっちゃ便利〜最強〜となっているウィジェットやプラグインをご紹介いたします🙌
Comment Note
Comment Noteは『仕様・作業者メモ・修正・レビュー・要確認』の分類でデザインファイルにコメントを残しチームメンバーと共有できるウィジェットです。
https://www.figma.com/community/widget/1168789542647357646/comment-note
「このデザインは完了状態なの?」「ここの仕様って・・?」のような、デザインを見ただけではわからない情報がComment Noteを使うことでステータスや仕様を簡単に管理できます。
実際に使ってみて、Figmaのコメント機能はデザインが確定するまでのレビューを残すという点ではスレッド形式でコメントしていけるのでスピード感もあって便利だと思いますが、コメントが多くなりすぎると全体を把握しづらくなる気がしています...
それに対し、Comment Noteはある程度仕様やデザインが固まった段階で一目見て状態がわかるようにしておくメモとしても便利で、最近では使っていないデザインファイルがないほど最強ウィジェットです!
Material Symbols
Material SymbolsはGoogleが提供する最新アイコン2,500を超える種類の中からFigma上でデザインにアイコンを追加できるプラグインです。
https://www.figma.com/community/plugin/1088610476491668236/material-symbols
ユーザーが直感的に理解できるUIデザインを作る上で必要不可欠なアイコン。
プラグインなのでアイコンをダウンロードしてFigmaに取り込む作業が必要ないので超便利です!
デザインのテイストに合わせて線の形状や太さ、塗りつぶしなどスタイルも変更できます。
2,500種類以上あるので使いたいアイコンが見つからない...みたいなことはほとんどないです。
Sprit Obejct
Sprit Objectは水平方向と垂直方向の分割数とそれぞれの隙間のサイズを指定することで、オブジェクトを簡単に分割できるプラグインです。
https://www.figma.com/community/plugin/1213372340497135821/split-object
ある一定の幅に対して並べる要素を等分割したい場合に頭の中もしくは計算機を使って計算するのが意外と面倒なのでこのプラグインも使用頻度が高く、めちゃくちゃ助かってます。。
計算ぐらいプラグイン使わずにちゃちゃっとやっちゃえば...みたいなところもありますが、個人的にデザインを考える上で頭のリソースはデザインに全振りしたいので、作業のちょっとした場面ですら効率化できるものは全力で自分以外の力に頼ってます。
Cursor
Cursorはデザインにマウスカーソルを追加し、さまざまなインタラクションやユーザーシナリオに合わせて異なる状態を示すことができるプラグインです。
https://www.figma.com/community/widget/1388380585248468756/cursors
マウスホバーやドラッグアンドドロップ、テキスト入力、拡大縮小などユーザーの操作に合わせたデザインの変化はシステムとユーザーとのコミュニケーションを確立する上で必須です。
そんなときに、チームのメンバー間で例えば『入力オブジェクトにマウスがフォーカスされたらオブジェクトの枠線を青に』を伝えるのにテキスト入力時のマウスカーソルを追加できるので、どういう状態のときにデザインがどう変化するのかをよりわかりやすく伝えることができます。
Aspect Ratio
Aspect Ratioは画像やFigmaで作成したオブジェクトのサイズを指定した比率で調整してくれるプラグインです。
https://www.figma.com/community/plugin/1062971732939729883/aspect-ratio
こちらもわざわざ自分で計算するより、16:9や4:3などよく使う比率を入力するだけで自動でサイズを変換してくれるので超便利です。
さいごに
今回ご紹介した私たちが愛用しているウィジェットやプラグインは、デザインの質を向上させるだけでなく、チーム内のコミュニケーションを強化し、デザインプロセスの効率化にも大きく貢献しています。
Figmaには他にも多くの便利なプラグインが存在し、それぞれが異なるニーズに応じてデザインプロセスをサポートしてくれるのでこれからも積極的に活用してデザインの可能性を広げていきたいと思います🪐
Discussion