見出し画像

Figmaで使えるやや高機能な付箋Widgetを作りました

Hiroki Tani

そもそもWidgetって？

Figma WidgetはFigmaのホワイトボードツールであるFigJamで使えてた機能です。Pluginとは異なり、Figmaのファイル上にコンポーネントのひとつのように表示することができ、自分以外のユーザーからみても閲覧・操作ができるものです。

多くのWidgetが公開されていて利用できる

このWidgetがFigJamでしか使えなかったのですが、2022年6月からFigmaでも使えるようになりました。

Annotation Sticky Notes

今回つくった『Annotation Sticky Notes』はFigJamの標準機能にある付箋を模して作成した付箋Widgetです。次のような機能があります。

  • 自動で付箋の作成者のアバターと名前が表示される 

  • 10色から色を選べる

  • 八方にくちばしをつけられる（吹き出しのような形にできる）

  • 作成日を自動で表示する

Widgetにしたモチベーションとして一番大きかったのは、自動で付箋の作成者のアバターと名前が表示されるという点です。
元々付箋に関してはチーム内で使えるようにComponentにして使えるようにしていたのですが、「誰が書いた付箋か？」というのを手動で書く必要がありました。これが地味に面倒というか、実質わざわざ名前を書く人も少ないので微妙だなと感じていました。

WidgetはAPIを使って、Figmaやユーザーのデータを扱うことができるので、今回自動で作成者（正確にはログインユーザー）の情報を取得することができるということです。

またPluginと同じくJavaScript、もといWidgetに関してはReactでの開発になるので、作成日を自動で表示するというのも実現できました。これにより、ちょっとしたログを残すのにも役立ちそうです。

内容の記録とあわせて、作成日の日付が自動ではいる

Widgetを開発して思ったこと

Pluginの開発とは異なり、あらかじめReactのComponentが用意されているので、ReactとJavaScriptの知識は少々必要なものの、かなり開発のハードルは低いと思います。

公式でSampleコードも公開されているので、それらをアレンジしていけばほしいものは作れるんじゃないでしょうか。

一方で、Pluginよりも開発の自由度が低いところもいくつかあります。それらは今後にAPIがアップデートされていく可能性があるので、しばらくは他のWidgetのアイデアを考えながら楽しみに待っています。
またWidgetの開発についてもいつかどこかで書ければ…と思います。

明日の元気の素になります。