【随時更新予定】推しのFigma Pluginまとめ
こんにちは、株式会社アトラエでデザイナーをしています三上蒼太(@sota_mikami)です。
弊社ではデザインツールとしてSketchとFigmaを使っています。
どちらも併用していますが、個人的な好みはどちらかと言えばFigma（前職で使い倒していたので）。
この記事では、そんなFigmaの推しPluginをまとめていきます。
気分次第で随時更新予定です。
Unsplush
説明する必要もないくらいに有名なPluginです。
要素に画像を挿入できます。サービスのイメージを膨らませるための画像の仮当てにとても重宝しています。
ランダムの挿入や、 "food", "portrait" などテーマに沿ってのランダム挿入、キーワード検索して選択挿入も可能です。便利以外の何者でもない。
Content Reel
これも必須。
テキストの仮挿入が捗ります。
名前、電話番号、住所、適当な番号(フォロワー数などに)、タイムスタンプ、Loem Ipsum(長文)、Email、URLの仮挿入ができます。
しかもある程度のカスタマイズも可能です。上の動画では、スペイン人女性の名前に指定しています。
ちなみにテキスト以外にもAvatarやIconの仮あても可能なのですが、僕はあまり使っていません。
Autoflow
遷移図をさっと書くのに便利です。
現状いくらか不満もある（要素の移動に追従してくれない）のですが、アップデートも頻繁なので、きっといずれ解消されるでしょう！
Arrow Auto
Autoflowの不満を解決してくれたのがこのArrow Auto！
Autoflowと比べると線を引くのは多少面倒ですが、更新と管理に優れています。要素を移動させても、"update"を押せば...！
Map Maker
地図データを挿入するとき、みなさんどうしていますか？
スクショを取るのも良いですが、Pluginを使う手もあります。
GoogleMapから住所をコピペしてくれば、画像を綺麗に挿入できます。
ちなみにこのPluginは日本人開発者さんの作品なので、日本人のFigmaユーザーさんぜひ使いましょう🤗
なるべく現物再現したい時（挿入したい住所が明確でGoogle Mapを使いたい）に、Map Makerを使っています。
そうでなく仮挿入で良い場合は、次に紹介するものがベターです。
Mapsicle
Mapsicleはmapboxのデータしか使えないため、リアルデータ(≒GoogleMap)というわけにはいきませんが、挿入体験が非常にスムーズで好きです。
適当に検索バーに「tokyo」とでも入れれば候補を出してくれますし、プレビューマップからマウスやトラックパッドで移動、拡大/縮小ができます。
仮あての場合はこちらを使います。
Brandfetch
企業ロゴの挿入、いつもどうしていますか？Google画像から拾って貼り付けの作業、面倒ですよね。
Brandfetchを使えば、その企業ページのURLを入れるだけでそのロゴをとってきてくれます。
ただ「シンボルロゴ」「シンボル+タイプロゴ」「タイプロゴ」など複数ある場合に選ぶことはできません。一つのURLには該当ロゴが決められているようです。
SkewDat
DribbbleやBehanceにあげる時用に、作ったスクリーンをおしゃれに仕上げるためのやつです。
Vectary 3D
もっとおしゃれにするためのやつです。
Figma Walker
SketchでいうRunnerです。FrameやPageへの移動に便利。Runnerと同じようにComponentの挿入もできます。
こちらも先述の日本人開発者さんの作品なので、日本人Figmaユーザーさん（以下略
Minimap
各種Code Editorにはお馴染みの機能がFigmaにも！
ワーススペース全体の中で今どこにいるのかが把握しやすくなります。便利。
Instance Finder
各種InstanceからMaster Componentに移動することはできますが、その逆はできません。
日常的に困りはしないのですが、テストUIを作った後にComponentを整理しようとすると「これ本当に消して良いんだっけ・・・？どこかで使ってなかった？」と時々不安になります（Restoreする機能はあるものの）。
そんな時に便利なのがこれ、Instance Finder。Instanceの逆引きができます。
Google Sheets Sync
Figmaでデータベースが扱えます！つまりより本番環境に近いデザインが可能になります！！！
UserならUserのDBを、PostならPostのDBを用意しておくことで、それぞれを読み込ませてリアルなデザインを再現しやすくなります。
一つのスプレッドシートにテーブルをまとめたいところですが、現在それは対応外だそうです。アップデートに期待です。
結構いろんなことができてすごいんで、この解説とサンプルは必見です。
Notepad
メモなんてSlackでいいじゃんと思ってた時期が僕にもありました。
ただ、↑で紹介したGoogle Sheets Syncを使いだすとこのPluginの便利さを思い知ることになりました。
基本的にはそのFigmaファイルのためのメモ、というPluginです。ただのメモです。
僕はこれをデータSync用のリンク置き場として使っています。
Slackにいってリンクを検索したり、スプレッドシートを開いてコピペするよりも早くSyncができるようになります。
Find and Replace
Sketchでもあった便利PluginのFigma版です。
テキストを検索して一気に置換できます。
---
とりあえず15個紹介してみました！
他にもおすすめなものがあれば教えてください〜
（追記：2019/12/11）
素敵なPluginがたくさん紹介されていたのでこちらにも掲載をば！
（追記：2020/01/02）
・Google Sheets Sync
・Notepad
・Find and Replace
の3つを追加しました！
いいなと思ったら応援しよう！
