こんにちは。アドベントカレンダー17日目！アシスタントデザイナーの福井です。
この記事では、実務で役に立つFigmaのプラグイン・ウィジェットをまとめてみました！私が今年たくさん使用したプラグインや、最近知って使い始めたもの、neccoメンバーに教えてもらったものなどご紹介します✨
「Figmaでもう少し早く作業できないかな」「より効率よく共有できないかな」と感じている方は、ぜひチェックしてみてください！
▽Figmaプラグインをまとめた過去記事はこちら
プラグインを使う上で知っておきたいショートカットキー
1. プラグインを検索・呼び出し
⌘ + /または ⌘ + K （Windowsの場合：Ctrl + / Ctrl + K）
Figmaの「クイックアクション」を呼び出すショートカットです。プラグイン名の一部を入力するだけで、メニューから探す手間なく一瞬で起動できます。
2. 最後に使ったプラグインを再実行
⌥ + ⌘ + P （Windowsの場合：Alt + Ctrl + P）
直前に使用したプラグインを、パネルを開くことなく再実行できるショートカット。地味ですが、知っておくと作業効率が上がるのでおすすめです！
1. デザインデータを整えるプラグイン3選
フレームの高さを内包コンテンツに合わせて自動でリサイズできる「Auto Resize Height」
デザインの調整後にフッターが隠れてしまったり、逆にフッターの下に余白ができてしまった時にフレームサイズを一発で調整してくれるプラグインです！ページ数の多いウェブサイト制作の際にとても役に立ちました。
使い方
- 高さを中のコンテンツに合わせて調整したいフレームを選択（複数可）
- Auto Resize Height を実行
- フレームの上端を固定したまま自動でリサイズ完了🎉
デザインデータを自動で整理整頓された状態にする「Clean Document」
このプラグインでは、ページ全体もしくは選択した範囲で下記のことを整理してくれます。
- 非表示のレイヤーを削除
- 要素が1つしかないグループを解除
- レイヤーの位置やサイズを整数にする
- レイヤー名を自動でテキストに合わせる
- レイヤーをアルファベット順に並び変える
デザインレビューの前や、ある程度できてきた時にこちらを使用して整えるようにしています。
使い方
- ページ上で Clean Document を起動（もしくは整理したいフレームを選択し起動）
- 一番上にある「Clean Layer」を選択
- 表示されたパネルで適用したい整理機能にチェック✅
- チェックした機能が一括で適用され整理完了🎉
フレーム名・レイヤー名をルール通りに書き換える「Rename It」
複数のレイヤー名やフレーム名を、特定のルール（連番、大文字・小文字、親要素名など）に基づいて一括で書き換えることができる優秀なプラグインです。文章だけではわかりづらいので、使い方と動画を同時にご覧ください。
使い方
- 名前を変えたいレイヤーを複数選択
- Rename It を起動し「Rename Selected Layers」を選択
- 「Name」欄に「 %n（連番）」や 「*（現在の名前）」などを組み合わせて入力（キーワードタグがあったり下に例が出るので一度操作してみるとわかりやすいです）
- Renameを押して一括変更完了🎉
2. 外部データの取り込みで役立つプラグイン3選
幅4096pxより大きい画像を高解像度で取り込める「Insert Big Image」
こちらは有名なプラグインですね！Figmaでは幅が4096pxを超えると、画質が自動で落ちてしまいガビガビになってしまいます。それを、画像を分割することによって防いでくれるこちらのプラグイン！
参考調査したサイトのキャプチャを貼る時に何度も何度も使用しました！✨
使い方
- Insert Big Imageを起動
- 画像を選択（複数可）
- 画像が複数に分割されグループ化した状態でFigmaに配置完了🎉
PDFファイルを画像にしてFigmaに貼り付けてくれる「PDF to Figma」
こちらはPDFを画像にしてFigmaに貼ってくれるプラグインです！主にPDF資料を展開するときに使用します。綺麗に順番で並べてくれるので、整理しやすいのもポイントです！
使い方
- PDF to Figmaを起動
- PDFを選択
- ページごとに画像として配置完了🎉
既存のWebサイトを編集可能なデザインとしてFigmaで再現してくれる「html.to.design」
サイトリニューアルの案件で、使用している素材をそのまま使いたいときにこちらのプラグインを使用していました。すぐにコピペできて効率がいいです。
使い方
- html.to.designを起動
- 取り込みたいサイトのURLを貼り付ける
- デザインが自動で展開完了🎉
⚠️ 注意点：
無料版だとインポートできる回数は30日で10回までです！
3. 資料デザインで役立つプラグイン2選
フレーム名に合わせてフレーム内のテキストを書き換える「Text to Frame Name」
資料デザイン制作の際に、突然ページ数が変わること多々ありますよね… そんな時に、フレーム名に合わせて、フレーム内のテキスト（ノンブル）を書き換えてくれます！
使い方
- フレーム名と同じ名前に書き換えたいテキストを選択（複数可）
- Text to Frame Name を実行
- 選択したテキストがフレーム名と同じに書き換え完了🎉
⚠️ 注意点：
フレームを選択しがちですが、フレーム内の書き換えたいテキストを選択しないとエラーになるので注意！
フレーム名を配置されている順番に書き換える「Frame Sequencer」
Zの字順（左上から）に、重ね順と、フレーム名を瞬時に01〜連続した番号に変更してくれる便利なプラグインです。こちらも資料作成時にとても役立ちます。ただ番号を振る場合のみ使用しており、先ほど紹介した「Rename It」はルールがある場合に使っています。
使い方
- 順番にしたいフレームの位置を整えて複数選択
- Frame Sequencer を実行
- フレームがZの字順に01,02,03…と連番にリネーム完了🎉
4. チームで共有するのに役立つウィジェット4選
ウィジェットとは？
個人で使用するプラグインとは違い、ウィジェットは複数人で共同作業が可能です。チーム全体の作業効率をアップすることができます。直感的に操作できるのもポイントです。
共有したい内容をメモを残せる「Comment Note」
ページ上に付箋のようなメモを残すことができるウィジェットです。neccoではチーム内でデザインの意図や仕様を共有するときに使用しています。
枠の色や、ポイントの長さ、ポイントの位置など調整することが可能です。
入力したURLのファビコンとタイトルをFigmaに表示できる「Simple bookmark」
こちらはデザイナーの中川さんが使用していたウィジェットです。テキストでURLをただ貼るより、ファビコン付きでよりわかりやすく整理されて見えるのでおすすめです！
ただ大きさを変えることはできないので、目立たせたい場合にはテキストを使用した方が良さそうです。
タスク管理ツールの「Asana」とFigmaを連携できる「Asana」
こちらはエンジニアの佐藤さんが使用していたAsanaのタスクをFigma上で一覧として見ることができるウィジェットです。neccoではタスク管理にAsanaを使用しているため、連携して使うことができます。
佐藤さんは実装のタスクを確認するために使用されていましたが、最近は実績用デザインの進捗確認が誰でもわかるように、実績デザインの近くにも置くようにしはじめました。タスクが多い場合にAsanaで確認せずに済むので便利です！
手軽にタスクをリストにまとめられる「lil todo」
こちらは私が個人的にメモがわりに使っている、シンプルなTodoリストが作成できるウィジェットです！チームでは特に使用していませんが、Asanaでタスク管理を行っていない方や、タスクを依頼する際のメモ、進捗の確認などに活用できるかと思います。
最後に
参考になるプラグインはありましたか？✨ 私もまだまだ知らない機能やプラグインがたくさんあるので、またまとめて紹介したいと思います！
明日もアドベントカレンダーお楽しみに〜！
