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

URL: https://webrandum.net/figma-plugin-autoflow/
公開日: 2022-04-20
更新日: 2022-04-19
カテゴリー: デザイン
タグ: Figma, Figmaプラグイン
出典: Webrandum（著者: サイトウ マサカズ）

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

## Autoflow

![Autoflow](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_1-9.png)

[![](https://www.google.com/s2/favicons?domain=www.figma.com)Figma![](https://s.wordpress.com/mshots/v1/https%3A%2F%2Fwww.figma.com%2Fcommunity%2Fplugin%2F733902567457592893%2FAutoflow?w=160)Figmahttps://www.figma.com/community/plugin/733902567457592893/AutoflowFigma Community plugin — Autoflow makes it easy to draw flows. Simply select 2 objects and a line will be magically drawn between them.Run AutoflowSelect any 2 shapes whille holding down ⇧SHIFT and a line will be drawnKeep selecting until you're all wired up!Made by Yitong Zhang (@zhayitong) and David Zhao (@davidtzhao)](https://www.figma.com/community/plugin/733902567457592893/Autoflow)

Autoflowは図形やフレーム間を、簡単に矢印で接続できるプラグインです。

1度接続すると、フレームを動かしても矢印が追尾してくるので、非常に便利です（Autoflowを起動している必要があります）。

## 基本的な使い方

Figmaのメニューバーで［Plugins］→［Autoflow］を選択して、「Autoflow」パネルを表示します。

このパネルで線の色や太さ、開始位置と終了位置のあしらいを設定します。

![Autoflowパネル](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_2-15.png)

あとはこのパネルを表示した状態で、開始位置のフレームを選択し、その後終了位置のフレームをshiftを押しながら選択します。

すると選択したタイミングで自動で線が引かれます。

![線の追加](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_3-14.png)

この手軽さが非常に気持ちよくて、フレームをどんどん選択していくだけであっという間に線が引き終わります。

パスの細かい調整も必要なくなるのでかなりラクになります。

### フレームの移動

「Autoflow」パネルを表示した状態であれば、フレームを移動させても線は自動で追従してくれます。

![フレームの移動](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_4.gif)

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