[figma]フローチャート作るマン

やっていく。

そのままでも作れるっちゃ作れる

長方形とかを作って線で繋げばいい。

アナログ的手法でやっていける。

プラグインを使う

autoflowってやつがある。

Autoflow | Figma Community
Automagically draw flow arrows in Figma! Illustrate user flows, diagrams, or graphics in a hand-drawn or minimalist styl...

動画の説明もあるんで分かりやすい。

プラグインを入れて有効化した状態でオブジェクトを2つ選択すると線が生成される。

作った線はオブジェクト化されるので普通に選択して削除が可能。

デフォルトだと矢印なんだけど、最初に選択したオブジェクトから次に選択したオブジェクトに向かう感じ。Autoflowの設定内で変更も可能。

曲線にするとか色をどうするとか太さとか、オブジェクトのどこから生やすかも設定できる。

一度作った線をカスタムしたい場合は、線を選択すればプラグインのウィンドウが生成時のそれに切り替わるので、とりあえず線で繋いでおいてから後で調整することも可能。

注意点

プラグインがアクティブだとオブジェクトを選択した時点で自動的に発火される。Ctrl+Zで戻れるけどめんどくさいので気をつける。

プラグインで線を生成した組み合わせであっても、再度選択するとまた線が生成されることがある。デフォのままだと同じところに線が重なって気づきづらいので、無駄にリソースを増やしたくない場合は特に注意する。

このプラグインは「オブジェクトをつなぐ」だけの機能なので、1つの親から複数の子を生やしたい場合は1個ずつ繋いでいくことになる。このとき線は其々に生成されるわけで、1本の線が分岐するようにはならない。だけども線が生える位置を同じ場所に指定すればいい感じに重なってくれる。

Autoflowで生成した線は、コピーするとプラグインの影響を受けないただのオブジェクトに変換される。線の前後のオブジェクトを含めてコピーしても同じ。コピー自体がネックになる。プラグインの影響下にあるときはオブジェクトを移動したら矢印も追従する。それがなくなる。この違いが痛手になる場合もあるので注意。

コメント

タイトルとURLをコピーしました