Figmaで画面遷移図やフローチャートをつくるときに線を自動で引いてくれるプラグイン「Autoflow」

Figmaで画面遷移図をつくりたいときは、「Autoflow」というプラグインを使うと、すばやく遷移の線を追加できて便利です。
Autoflow

Autoflowは図形やフレーム間を、簡単に矢印で接続できるプラグインです。
1度接続すると、フレームを動かしても矢印が追尾してくるので、非常に便利です(Autoflowを起動している必要があります)。
基本的な使い方
Figmaのメニューバーで[Plugins]→[Autoflow]を選択して、「Autoflow」パネルを表示します。
このパネルで線の色や太さ、開始位置と終了位置のあしらいを設定します。

あとはこのパネルを表示した状態で、開始位置のフレームを選択し、その後終了位置のフレームをshiftを押しながら選択します。
すると選択したタイミングで自動で線が引かれます。

この手軽さが非常に気持ちよくて、フレームをどんどん選択していくだけであっという間に線が引き終わります。
パスの細かい調整も必要なくなるのでかなりラクになります。
フレームの移動
「Autoflow」パネルを表示した状態であれば、フレームを移動させても線は自動で追従してくれます。

パネルを閉じてしまっていると追従しなくなりますが、再度「Autoflow」パネルを開いてフレームを移動させると、現在のフレーム位置に更新されます。

Figmaに独自のショートカットキーを割り当てる方法
Figmaのプロトタイプ機能の基本|作成したデザインに実際に画面遷移を設定する
FigmaのSearch Menuを使用して必要なメニュー・コマンドをすばやく実行する
記事内の画像にマウスホバーした時に画像が半透明になる意味はあるのか?
Figmaでカラーやテキストのスタイルをまとめて登録するプラグイン「Styler」
13インチのMacBook Proでのモダンブラウザごとのサイト表示領域のまとめ
Sketchの整列をショートカットキーを使ってすばやく行えるようにする方法
Figmaで作ったスマホデザインを「Mirror」機能を使ってリアルタイムに実機確認をする
Figmaでテキストの一括置換を行うプラグイン「Find and Replace」
Figmaの画像周りの基本操作|画像の追加方法や色補正、切り抜き方法まで
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Vue CLIでVue.jsの開発環境をセットアップするまでの流れ
高速なzshのプラグインマネージャー「Zplugin」の導入方法
Figmaの画像書き出し方法
Gitで1行しか変更していないはずのに全行変更した判定になってしまう
HTTP通信をラクに実装できる「axios」の基本
Figma × Keyboard Maestroでどこまで効率化できる?
Ulyssesで原稿を修正前の状態に戻せるバージョン管理機能やバックアップ機能
Path Finder 10がリリース!Big Surに完全対応したり、AirDropが使えるように!
Delay StartでMac起動後にアプリを遅延起動する
1PasswordのWatchtowerを使って、脆弱なパスワードを管理する