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

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

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

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

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

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



Abstractで「Failed to open “○○”」「An unexpected problem occurred, try again?」と表示されるときに確認すること
Sketchの整列をショートカットキーを使ってすばやく行えるようにする方法
Figmaで文字色と背景色のコントラスト比をチェックするプラグイン「Contrast」
Figmaで図形の分割をして簡単にレイアウトを作成する拡張機能「Split shape」
Figmaでチーム共有用のメモや注釈素材が使える「Annotation Kit 2.0」
Figmaの画像書き出し方法
Figmaのパス周りの基本操作|基本的な描画方法からペンツールと直線ツールの細かい違いまで
Sketchの画像を図形でマスクしたり、グラデーションマスクをする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
macOSの効率化に関するDiscordコミュニティ「CMD-F」を立ち上げました
1Passwordの開発者向け機能(SSH Agent / Environments / 1Password CLI / Developer Watchtower)
Default Folder Xで保存ダイアログ内のファイルリストにフォーカスする方法
Obsidianで整理した知識をAnkiで定着させる方法
Figma × Keyboard Maestroでどこまで効率化できる?
マウス操作の完成度が高いウインドウリサイズアプリ「Magnet」
Macで複数ディスプレイを使っている場合に便利な設定集
AppCleanerでMacアプリを関連ファイルごと完全に削除する
操作に没頭できる!Firefox版 Arcのようなブラウザ「Zen Browser」
chezmoi(シェモア)で始めるdotfiles管理