［個人開発］Figma&FigJam ウィジェット『Entity Maker』をリリースしました🎉

Figma&FigJam対応、エンティティを簡単に生成するウィジェットを制作しました。既に似たような機能があるかと思いますが、日本語用にシンプルなユーザーインターフェースにこだわってデザインしました。

Figma : https://www.figma.com/community/widget/1601520778268503122/entity-maker

GitHub : https://github.com/lateen-sail/entity-maker

♦︎ UXで工夫した点

① クリックで切り替える仕様にしています。型は選択肢が多く少し悩みましたが、クリック時の反応がかなり速かったので、最大4回くらいなら体感的にも問題ないと判断しました。

② 削除機能も操作スピードが十分早かったため、一括削除はあえて入れず、1行ずつ削除する形にしています。

③ テキストエディタなどで整理するケースを想定し一括追加の機能も追加しました。ただ、オプションまで含めたインポートは工数的に厳しかったのと、①②の操作スピードで問題なさそうと判断したことから、属性名のみをテキストベースでインポートできる仕組みを用意しました。

④ 一括追加を途中でやめられるように「閉じる」ボタンを追加しています。また、現状は属性の並び替え機能がないため、その代わりとして「現在のデータ取得」をクリックすると、下部のInputフィールドに反映される機能を追加しました。

♦︎ UIで工夫した点

⑤ 短くて馴染みのある、シンプルなマイクロコピーにしています。

⑥ 属性の追加時にカラム数がなんとなく把握できるよう、プレースホルダーに連番が表示されるようにしました。

⑦ クリック切り替え時に幅が毎回変わって視覚的ストレスにならないよう、幅は固定しています。

⑧ 未設定を表す「-」の時は、意識せずに済むように不透明度を高めています。

⑨ 一括追加中はアクティブカラーに切り替え、マイクロコピーも動詞ベースに変更しました。

⑩ 一括操作時以外はモノトーン寄りにして視覚的刺激を抑え、情報整理に集中できる配色にしています。

♦︎ 活用シーン

がっつりテーブル設計をするというよりも、要件定義の段階でなんとなく必要そうなデータやその関係を把握するといったシーンを想定しています。そのため、英語よりは日本語で整理するケースを考えており、日本語フォントでも違和感のないように文字色や太さを調整しました。

関連付けの機能がないためFigJamで使用することをオススメします。

♦︎ 使用したツールやライブラリ

Cline, ChatGPT, Figma, VSCode, lucide-react

Clineのサポートのおかげで、自分がほしいと思う機能を簡単に開発できることは本当にとても楽しいです！次はコードの読みやすさや運用のしやすさを考えて、時間のある時にリファクタリングしようと思います😌