Figmaで画面遷移図を楽に作りたい
この記事は上記の課題に向けて作成しています。
web制作では画面遷移図を作成する場合があります。
実はFigmaでは楽に画面遷移図が作成できます。
この記事ではFigmaで画面遷移図を楽に作る方法を紹介します。
この記事を読むメリット
- Figmaで画面遷移図を楽に作る方法がわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
目次
Figmaで画面遷移図を作る方法
早速Figmaで画面遷移図の作り方を説明します。
画面遷移図は「autoflow」というプラグインを使うと簡単に作れます。
手順は下記の通りです。
Figmaで画面遷移図を作る手順
- プラグイン「autoflow」を導入する
- 「autoflow」を使って画面遷移図を作る
プラグイン「autoflow」を導入する
まず始めにプラグインを導入します。
「プラグイン」→「プラグインを管理」から「autoflow」検索します。
次に「autoflow」を選択し「実行」をクリックすると導入されます。
以上でプラグインの導入は完了です。
「autoflow」を使って画面遷移図を作る
続いて画面遷移図を作ります。
「プラグイン」→「プラグインを管理」から「autoflow」を選択します。
次に遷移元と遷移先を繋ぐ矢印を作ります。下記の手順で作れます。
矢印を作る手順
- 遷移元をクリックする
- Shiftキーを押したまま遷移先をクリックする
遷移元と遷移先が自動で繋がります。
矢印の色や太さを変更することが出来ます。さらに説明コメントを追加することも出来ます。
※プラグインを閉じると矢印が追従しなくなりますが、再度プラグインを立ち上げると追従するようになります。
この機能を使えば簡単に画面遷移図が作れます。
Figmaでは簡単に画面遷移図が作れる
この記事ではFigmaで画面遷移図を作る方法を紹介しました。
Figmaでは「autoflow」というプラグインを使用することで簡単に画面遷移図を作成することが出来ます。
まだやったことの無い方は是非実施してみてください。
リンク
Figmaに関する他の記事はこちら
あわせて読みたい
Figmaで画像の背景を透過する方法を紹介！
Figmaで画像の背景を透明にしたい この記事は上記の課題に向けて作成しています。 画像の背景を透明に切り抜いて使用することがあると思います。 Figmaでは簡単に画像の...
あわせて読みたい
Figmaで円グラフを作る方法を紹介！
Figmaで円グラフの作り方を知りたい この記事は上記の課題に向けて作成しています。 Figmaでは円グラフを簡単に作ることが出来ます。 作り方はわからない方は是非この記...
あわせて読みたい
【Figma】コンポーネント化を解除する方法！
Figmaのコンポーネント化を解除する方法を知りたい この記事は上記の課題に向けて作成しています。 Figmaで制作中にコンポーネント化した要素を解除したい場合がありま...