本記事は『Figma 開発 Advent Calendar』2日目の記事になります。

半年ほど前ではありますが『Simple Markdown Note』というマークダウンでメモを取れるFigma Widgetを作りコミュニティで公開しました。
ありがたいことに12,000人近いユーザーに利用してもらい、130以上のLikeを頂いています。

Figma Widgetとは？

UIデザイン用途で主に使われるFigmaは近年シェアを拡大してほぼ標準ツールと言ってもいい立ち位置を気づきあげました。シェアを奪った理由としては共同編集が大きいと思いますが、コミュニティから提供されるプラグインも一役買ったと思います。
サードパーティ開発者が作れるFigma拡張には2種類あります。1つは従来からあったFigma Pluginと、もう1つはFigJamで登場し2022年6月Figmaでも使えるようになったFigma Widgetです。

Figma WidgetはFigmaのキャンバス上にインタラクティブなインターフェースを持つ拡張です。代表的なものに直接編集出来るメモウィジェットや、投票ウィジェットなどがあります。

使い方

1. ToolbarからResourceをクリック

2. Widgetを選択し『Simple Markdown』で検索

3. 「Simple Markdown Notes」をクリックし、遷移した画面で「Add」ボタンをクリック

Widgetが表示された後、Widgetをクリックすると上部にメニューが表示されるので「Edit Content」をクリックします。
表示されたテキストフィールドにMarkdownでメモが書けます。書き終わったら「Update」ボタンを押すと内容がWidgetに反映されます。

※ 後述の反省ポイントでも言及しますがWidgetの作りが悪く、複数人で同時に編集すると編集中にエディタが閉じられることがあります。メモアプリとして「データが安全に保存される」ことを担保できていないのは、非常に情けないと思っています。

開発の動機・経緯

普段FigmaでUIを作る際、画面を作る上で考慮することや対応すべきTODOをマークダウンでメモをする癖がありました。
もともとエンジニア出身でGitHubやesa.ioといったマークダウンで記述できるウェブサービスを多用していたため、プレーンテキストで表示されるのにも関わらずFigmaでもマークダウンでメモを行っています。

FigmaでWidget対応されたというツイートを見たときに思いついたアイディアの1つに「マークダウンを適切なレンダリングに出来るのでは？」というものがあり、検証したところ出来そうだったので作りました。（検証当時マークダウンのWidgetは存在していましたが、自分にとって使いやすいものではありませんでした。）
また、「短い期間で作り上げないと飽きる」という自分の悪癖も自覚しているので、1日で作りきった分までをコミュニティにリリースしました。

開発のポイント

Figma開発、というテーマなので開発に関するポイントをいくつか紹介します。

Create Figma Plugin

FoF Tokyoでも紹介したFigma Plugin開発の便利ツールキット『Create Figma Plugin』を使って開発を行っています。特に何も考えずに開発の準備が整う点が非常に気に入っています。
個人開発のやる気は鮮度が大事なので、スキップ出来る箇所はスキップすることを意識しています。（仕事の場合は長く保守することや他の人が触れることを意識すべきなのでちゃんと考えた方がいいです。）

マークダウンの扱い

マークダウンを適切にレンダリングするには、マークダウンをパースする必要があるのでマークダウンのASTであるmdastに変換しています。mdastに変換したものをWidget上でレンダリングを行いました。

このウィジェットは、雑に言えばマークダウンのレンダラーです。しかし、マークダウンのタスクを管理できる点だけは特殊なものになっています。
実はCommonMark（マークダウンの標準的な仕様）にはタスクはなく、GitHub flavored Markdown（GitHubで使えるマークダウン、通称GFM）で拡張されたものになっています。ただし、こういった拡張を利用するプラグインは大体揃っているので、導入するだけで動きました。

インタラクション

Figma Developersにはベストプラクティスの記載もあり、その中で「可能な限りキャンバス上でインタラクションを行えるようにすること」とあります。
このWidgetではCanvas上でタスクのOn/Offを行うインタラクションを用意しました。タスクを書いておけばワンクリックで変更できるので、簡単なものではありますがタスクの管理が行えます。

反省ポイント

開発を行っていてすべてが順調にいったわけではなく、前もって考えておけばよかったことも紹介します。

挙動の確認不足

このWidgetは作りが悪く、複数人で同時に編集すると編集中にエディタが閉じられることがあります。これが最大の反省点です。
Widget開発はモチベーションを重視したため、ドキュメントにさらっと目を通しただけで開発を進めてしまいました。
Widgetで管理されているデータ（この場合はマークダウンのメモデータ）が更新されると、ウィンドウが自動的に閉じられる仕様をWidgetをリリースした後に知りました。

ドキュメントを読んでいればこういった挙動を防げたわけではありません。そもそも1つのウィジェットに対して長いインタラクションは想定していない感じがします。ただし、ドキュメントにはもう少し目を通してから開発を行えばよかったと思っています。

データの持ち方

このWidgetではマークダウンのメモをそのままデータとして保持するのはなく、ASTに変換した状態でデータを持っています。メモを編集する際はASTから自動でフォーマットされたものを復元しています。
そのため、人によっては書いた状態とは別のフォーマットや改行が含まれるメモを編集することになります。
ここはもう少しなんとか出来たかもしれません。

まとめ

反省点もありましたが、Figmaでは自分のユースケースに対して便利なWidgetを作ることが出来ます。ぜひFigma PluginやFigma Widgetの開発に取り組んでみてください。
具体的に開発を進めたいと思ったのであれば、Calendar1日目@seyaさんの『現場で活躍する Figma API、プラグイン、ウィジェット』に目を通すといいと思います。