search
LoginSignup
10

More than 1 year has passed since last update.

posted at

updated at

FigmaのAutoflowを使って画面遷移図を書く

はじめに

Figmaを使う機会があったのでメモとして残します。
Figmaはデザインツールですが、画面デザインと一緒に画面遷移図も見れたらいいなと思って調べてみると「Autoflow」というプラグインがあったので使ってみました。

前提

  • Figmaのデスクトップ版をインストール済み
  • コンポーネントを作れる

Autoflowのインストール方法

メニューの[Community]->[Plugins]を選択します。
1.png
「Autoflow」を見つけて[Install]します。
2.png
以上

実際にやってみる

まずは画面名を書く箱をコンポーネントで適当に作ります。
3.png
画面遷移図を書きたいPageでコンポーネントからコピーしたいくつかの画面を並べます。
4.png
右クリック->[Plugins]->[Autoflow]でAutoflowのウィンドウを出します。
5.png
Shiftを押しながら繋げたいボックスを選択すると
6.png
勝手に矢印を引いてくれます。
7.png
自由度はあまりなさそうですが、シンプルで素早く作れるので便利です。
8.png

最後に

Figmaを使っていて、シンプルな遷移図やフローを書くならExcelより早いし便利だと思いました。
何より画面デザインと並べて見れるのが助かります。

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
10