あなたの表現力と生産性を爆上げしてくれるFigma Plugin12選

Figma Pluginついに解禁！

8月1日 深夜、ベールに包まれてきたFigma Pluginがついにお披露目となりました。今はこちらのLivestreamingをみながらこのブログを書いています。。。！

これまでFigma公式が各ディベロッパーたちと連携を取りながら進めてきただけあって、リリースされているプラグインはどれも最初からクオリティが高く、ワクワクが止まりません！

実際に自分で触ってみて、これは便利だ！と感じたプラグインをまとめていきたいと思います。

生産性爆上げ系

SpreadSheetsに書きためたデータをデザインに反映してくれるプラグイン。これは使い方次第では超便利です...!
1. SpreadSheetsでデータテーブルを作る
2. Figma上でデータを読み込みたいレイヤーの名前を「# + "Table名"」とする
eg. 列の名前が「Name」ならレイヤーは「#Name」と名付ける
3. データを読み込みたいコンポーネントを選択してプラグインを実行

Time for another @figmadesign plugin sneak peek I've been working on...

Sync info from Google Sheets directly into Figma. It works with components & images too.

Not long until the official Figma plugin launch! 🔥 #figmaplugin pic.twitter.com/38zd37vYGv

— Dave Williames (@DavidWilliames) July 31, 2019

繋げたいレイヤーを選択してプラグイン起動
→　あとは alt + cmd + P キーで繰り返し実行できるのでラク

PS @zhayitong has been working on an autoflow plugin, making drawing flows quick and easy. ⚡️ #figmaplugin https://t.co/cUynL6ZNKr pic.twitter.com/aO1zAMpD9K

— Figma (@figmadesign) July 25, 2019

③　Content Buddy：テキスト検索・置換

テキスト置換機能です。選択したレイヤーの中で同じテキストがあればまとめあげて、テキスト置換できます。プロダクト全体で表記揺れがないか確認するのに非常に便利です。

④　Content Reel：テキスト・アバター・アイコンの自動ランダム割り当て

Sketchで言う所のCOntent Generator的な立ち位置のプラグイン。レイヤーを選択して実行すると、勝手にいい感じのテキストや写真で埋めてくれます
※ アバターイメージは後日サポート予定で今はテキスト保管のみ

表現力爆上げ系

①　Figmotion

個人的に一番激アツだったのはこのプラグインでした。
座標やシェイプ、スケールなど、figma上で操作できる要素は大体アニメート可能で、animation curveの指定もLinear, easeIn, easeOut, easeInOutの中から選べます。
書き出し機能もついていて、CSS（?!）とJSONに書き出すことが可能でした。この手のプラグインは他にも開発してる人がいたので他にも出てくるかも

② パラメトリックデザインメーカー（未リリース）
簡単なjsとグリッドシステムを使ってジェネラティブな絵柄を作れる
これは未リリースなのですが公開が楽しみです

Working on a system that allows for flexible n-dimensional parametric designs. I'm hoping to integrate this into a #figmaplugin so that it generates actual text/shape/image nodes in your document.

Testing it so far with some basic noise + grid functions: pic.twitter.com/v5lbs0uCqE

— Matt DesLauriers (@mattdesl) July 8, 2019

③　Roto　：3次元図形生成

シェイプパスツールで書き出した図形を立体化してくれる。ロゴ作りなんかに便利そうです。複合シェイプは事前にOutline加する必要があるのでご注意を。生成されたシェイプはレイヤーがすんごい数になります（笑）

Been working on a @figmadesign plugin that rotates and extrudes shapes in 3D. It's called Roto and it's built with three.js. Excited to see this out soon once the #figmaplugin system is out of private beta pic.twitter.com/c42HmpChjS

— Carlo Jörges (@carlojoerges) July 19, 2019

④ Map Maker

レイアウトをカスタマイズしてマップ生成できます。
Mapbox使ってるのでレイアウトのカスタム性は高いです

⑤　p5.jsジェネレーター（未リリース）
p5.jsのコードを投げ入れるとレンダリングしてくれます。Sketchでもこんなのありましたね。

I’ve been working on a @figmadesign plugin that allows you to take any p5.js processing code and convert it to the Figma canvas pic.twitter.com/zVIKvoqhAm

— Jordan Singer (@jsngr) June 26, 2019

かゆいところに手が届く系

① Sort It
散らかったレイヤーをアルファベット順に並び替えてくれます

②　Image tracer：JPG/PNGをベクターパスでトレース

イラレでよく使うベクターパスのトレースが可能になりました！

Here's a sneak peak at a @figmadesign plugin I've started working on. It traces a black & white bitmap image, and turns it into a vector layer.

Lot's more plugin ideas coming soon... pic.twitter.com/gvWyyMJ3ki

— Dave Williames (@DavidWilliames) June 26, 2019

③　Blend：オブジェクトブレンドツール

こちらもイラレでよく使うパスに沿ってオブジェクトの配列を繰り返すツール。なんでなかったんだろう。。。

Here is a demo of my plugin called Blend for @figmadesign! ✨

At the moment it allows you to copy any object along specified vector path. Can't wait to see how much plugins in Figma will change the game! 🤩

Watch with sound ON 🎶 https://t.co/wPsVf9wLxS pic.twitter.com/eH4pCzjB7d

— Gleb Sabirzyanov (@zyumbik) July 20, 2019

④ Sketchの cmd + Kが帰ってきた！数字指定でscale
Sketchからfigmaに移行して「この機能がないなあ」と寂しい思いをしていた人も多かったのではないでしょうか。でも、もう寂しくない！

Scale by numbers in Figma just like Sketch pic.twitter.com/nbZcYD7ucm

— Jordan Singer (@jsngr) July 1, 2019

いかがだったでしょうか。

どれもクオリティ高くて、プラグイン開発者の皆様には頭が上がりません！

まだチラ見せだけで、公開されてないプラグインもたくさんあるので今後のアップデートが楽しみですね！