Figmaで画面遷移図(フローチャート)を作る方法！

web制作では画面遷移図を作成する場合があります。

実はFigmaでは楽に画面遷移図が作成できます。

この記事ではFigmaで画面遷移図を楽に作る方法を紹介します。

この記事を読むメリット

• Figmaで画面遷移図を楽に作る方法がわかる

Figmaで画面遷移図を作る方法

早速Figmaで画面遷移図の作り方を説明します。

画面遷移図は「autoflow」というプラグインを使うと簡単に作れます。

手順は下記の通りです。

Figmaで画面遷移図を作る手順

1. プラグイン「autoflow」を導入する
2. 「autoflow」を使って画面遷移図を作る

プラグイン「autoflow」を導入する

まず始めにプラグインを導入します。

「プラグイン」→「プラグインを管理」から「autoflow」検索します。

次に「autoflow」を選択し「実行」をクリックすると導入されます。

以上でプラグインの導入は完了です。

「autoflow」を使って画面遷移図を作る

続いて画面遷移図を作ります。

「プラグイン」→「プラグインを管理」から「autoflow」を選択します。

次に遷移元と遷移先を繋ぐ矢印を作ります。下記の手順で作れます。

矢印を作る手順

1. 遷移元をクリックする
2. Shiftキーを押したまま遷移先をクリックする

遷移元と遷移先が自動で繋がります。

矢印の色や太さを変更することが出来ます。さらに説明コメントを追加することも出来ます。

※プラグインを閉じると矢印が追従しなくなりますが、再度プラグインを立ち上げると追従するようになります。

この機能を使えば簡単に画面遷移図が作れます。

Figmaでは簡単に画面遷移図が作れる

この記事ではFigmaで画面遷移図を作る方法を紹介しました。

Figmaでは「autoflow」というプラグインを使用することで簡単に画面遷移図を作成することが出来ます。

まだやったことの無い方は是非実施してみてください。