FlowLine — フローの接続線を引く
Figma上で画面遷移図やフローチャートの「接続線」を、つなぎたいレイヤーを選ぶだけで引けるプラグイン。線は図形に追従し、形・色・矢印・ラベルまで細かく調整できます。
線を引く手間を、選ぶだけに。
画面遷移図や業務フローをFigmaでつくるとき、地味に時間を奪うのが「接続線を一本ずつ引く」作業です。FlowLine は、つなぎたいレイヤーを2つ選ぶだけで線を自動で作成します。接続元・接続先のフレームを動かすと線も形を変えて追いかけるので、あとから画面を並べ替えても引き直す必要がありません。
つくられるのは特別なオブジェクトではなく、Figmaの通常のレイヤーです。プラグインを閉じても線は残り、ほかのメンバーもそのまま閲覧・編集できます。ツールはできるだけ気配を消して、フローそのものに集中できることを大切にしました。
ツールの気配を、消すために。
設定より、まず一本引ける。
目的は「線引きの手間を消す」こと。だから最初の操作を"2つ選ぶだけ"に絞り、細かな調整は引いた後に回しました。使い始めの負荷を最小にする判断です。
特別な線ではなく、通常のレイヤーで。
線を独自オブジェクトにせず、Figmaの通常レイヤーとして生成。プラグインを閉じても残り、他のメンバーがそのまま閲覧・編集できます。チームで使えるツールであることを優先しました。
繰り返しを、畳んでおく。
フロー図は同じ種類の線を何本も引きます。色とラベルの組をプリセットに保存できるようにして、反復の手間そのものを設計で減らしました。
できること。
選ぶだけで接続
つなぎたいレイヤーを2つ選ぶと、自動で接続線を作成。3つ以上を順番につなぐこともできます。
図形に追従
接続元・接続先のフレームを動かすと、線も形を変えて追いかけます。
スタイル調整
L字／直線、色、太さ、実線／破線、両端の矢印を自在に設定できます。
ラベル
線に見出しチップ（タップ・送信・ログインなど）を添えられます。
プリセット
「色＋ラベル」の組み合わせを最大20個まで保存し、ワンタップで適用できます。
既存の線も編集
キャンバス上の線を選び直して、あとからスタイルを変更できます。
つくり方。
自分がフロー図を描くときの「線引きが面倒」という実感から出発し、必要な操作だけに絞ってUIを設計しました。実装はAIを活用しながら、Figma Plugin API で接続線の生成とフレームへの追従、プリセットの保存までを一つずつ組み立てています。
不便を、プラグインにして解く。
自分の作業のなかの不便を見つけ、企画から設計・実装・公開までを一人でかたちにしました。「使う人の手数をどこまで減らせるか」。その一点を軸に判断を重ねる練習になっています。