AdobeXDでオブジェクトを結ぶ「矢印」を手軽に生成できるプラグインFlowkit
Updated
2022.10.15
Published
2020.01.20

話題になっていたこちらのプラグイン、試してみたらだいぶいい感じでした!
XDで矢印などのコネクタを簡単に作成、カスタマイズできるプラグイン。昨年内に公開するつもりでしたが、ようやく公開されました!画面遷移図などのフロー図作成にお役立てください。https://t.co/xV3A9uTJ0a#adobeXD #xdPlugin pic.twitter.com/G6lGo3S7IY
— 鈴木慎吾 / TSUMIKI INC. (@shingo2000) January 2, 2020
Flowkitのメリット
オブジェクト同士をいい感じにつなげてくれる

適当に配置したオブジェクトを二つ選択し、プラグインのメニューから配置したい矢印をクリックすると、自動で長さを調整して結んでくれます。
矢印の向きと先端の形を選べる

先端(ポイント)の形を8種類から選べます。プレビュー機能があるとなお嬉しいですが、数も少ないのであまり不便さはないかなと。
レスポンシブサイズ変更に対応してる

配置した矢印は、縦方向、横方向に自在に伸ばせます。ポイント(矢尻)の形やサイズは変わりません。
線幅だけでいい感じに拡大・縮小する

線の部分はストローク、面の部分はパスになっています。このおかげで、矢印のグループを選択して、「線幅」だけ変更すると、線もポイントもいい感じに太く・細くなります。
もし線の部分がストロークではなくパスになっていたら、線幅だけでいい感じにならないんですね。特に、矢印1と2に関しては、プラグインで設定できる「5」より大きくしてもいい感じになります。大きな矢印が欲しいときにも役立ちますね。

1、2以外の矢印は厳しいですが…!
色の変更も簡単

このプラグイン経由で色を変更すると、ストロークとパスを同時に着色してくれて、1発で反映できます。
終わりに
画面遷移図とか、簡単なサイトマップなどを描くときに役立つ「矢印」。複数の矢印を一括で編集できないのがちょっと惜しいですが、XDでどうしても矢印書きたいときはFlowkitがオススメです。
おまけ
Flowkitでググったら別のサービスも出てきました。
こちらも図を書くときにいい感じで矢印を引けるキットみたいです。Figmaならプラグインもあるようで気になりますね。