公開日: 2022.11.11 　|　更新日: 2022.11.11

Figmaで効率的にオブジェクトモデルを設計する方法

今回は、FigmaやFigJamでオブジェクトモデル（概念モデル）やクラス図を表現する方法を紹介します。データモデルを設計したい場合や、既存の画面からデータモデルをリバースモデリングしたい場合に役立ちます。

Figmaで独自コンポーネントを作成する方法

タイトルとプロパティを入力できるテキストを組み合わせたコンポーネントを作成し、オブジェクト同士を線で結ぶことができるプラグイン「Autoflow」などを利用することで、シンプルなオブジェクトモデルを表現することができます。

上記の画像で使用しているデモファイルをFigma Communityに公開していますので、作り方の参考にしてみてください。

また、Autoflowの使い方については、以下の記事も参考にしてください。

今回は、Figmaで図形やフレームを追従する矢印でつないで、簡単にフローチャートや画面遷移図をつくる方法を紹介します。サイトマップ作成やアプリケーションのUXを検討する際に、画面同士を矢印で繋ぐことで動線を検討したり、概念モデルを整理するのに役立ちます。 ... 続きを読む

FigJam上で利用できるウィジェットやプラグインを利用することで、よりリッチなオブジェクトモデルを設計することもできます。

Entity Modelerは、エンティティのタイトルとプロパティ名と値を指定してカード化できるウィジェットです。

色の変更やプロパティの入れ替えといった操作も直感的に行うことができ、FigJam標準の矢印でカード同士を接続することで、効率的にデータモデルを表現できます。

FigTypeは、エンティティのタイトルとプロパティ名と値に加え、プロパティのタイプ（text、boolean、Numberなど）を設定してエンティティをカード化できるウィジェットです。

こちらも、同様にFigJam標準の矢印で接続できます。

プロパティの入れ替えや編集は、各カラムごとに指定して行う操作感なので、やや手間ではありますが、データモデルのタイプまで指定できるのが強みだと思います。

タイプはプロパティ追加時に指定したものに固定され変更できないため、少々操作が難しい箇所がある印象です。

今回はFigJamで付箋など様々なオブジェクトをグルーピングできる「Section」機能の使い方を紹介します。miroで言うところの「Frame」と同じような使い方ができ、グループしなくてもまとまりで扱いやすくなります。 ... 続きを読む

今回は、FigJamで2021年10月19日にアップデートで公開された新機能のウィジェットについて紹介します。ウィジェットは、ToDOリストのような機能をコンポーネントとして呼び出せるツールで、ディスカッションやブレインストーミングに役立ちます。 ... 続きを読む

今回はFigmaのファイル内のオブジェクト名やコンテンツ内のテキストを検索・置換する方法を紹介します。ファイル内で特定の文言を一括で置き換えたい場合や、UIコンポーネントをテキスト検索で引き当てたいときに便利です。 ... 続きを読む