Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
9
Help us understand the problem. What are the problem?

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より早いし便利だと思いました。
何より画面デザインと並べて見れるのが助かります。

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
9
Help us understand the problem. What are the problem?