figma-how-to-create-objective-model
公開日: 2022.11.11  | 更新日: 2022.11.11

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

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

この記事のターゲット

  • Figmaでオブジェクトモデルを使ったデザイン(OOUI設計)をしたい方

  • Figmaでデータモデリング、またはリバースモデリングをしたい方


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

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

autoflow

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

シンプルなオブジェクトモデル・コンポーネントのサンプル - Figma Community

シンプルなオブジェクトモデル・コンポーネント

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

Figmaで簡単にフローチャートや画面遷移図をつくる方法

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

figma-connect-with-arrows

FigJamのウィジェットやプラグインを利用する方法

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

Entity Modeler

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

Entity Modeler1

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

Entity Modeler2
Entity Modeler3

FigType

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

FigType1

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

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

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

FigType2

この記事を読んだ方におすすめの記事

FigJamで付箋やオブジェクトをまとめる「Section」の使い方

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

figjam-how-to-use-section

FigJamの作業が捗る便利なウィジェットの使い方

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

figjam-widgets-collection

Figmaでファイル内のテキストを検索・一括置換する方法

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

figma-text-find-and-replace-in-file

最新の記事はこちら
広告
この記事を書いた人
うえんつ

うえんつ

Twitter
SaaS・アプリ開発などWEB領域での課題解決が得意なデザイナーで、このブログのオーナーです。
今の関心事
Figma・UI/UX・空間設計・QOL・料理
広告