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

Updated

2022.10.15

Published

2020.01.20

話題になっていたこちらのプラグイン、試してみたらだいぶいい感じでした!

Flowkitのメリット

オブジェクト同士をいい感じにつなげてくれる

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

矢印の向きと先端の形を選べる

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

レスポンシブサイズ変更に対応してる

配置した矢印は、縦方向、横方向に自在に伸ばせます。ポイント(矢尻)の形やサイズは変わりません。

線幅だけでいい感じに拡大・縮小する

線の部分はストローク、面の部分はパスになっています。このおかげで、矢印のグループを選択して、「線幅」だけ変更すると、線もポイントもいい感じに太く・細くなります。

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

1、2以外の矢印は厳しいですが…!

色の変更も簡単

このプラグイン経由で色を変更すると、ストロークとパスを同時に着色してくれて、1発で反映できます。

終わりに

画面遷移図とか、簡単なサイトマップなどを描くときに役立つ「矢印」。複数の矢印を一括で編集できないのがちょっと惜しいですが、XDでどうしても矢印書きたいときはFlowkitがオススメです。

shingo2000/xd-plugin-flowkit

おまけ

Flowkitでググったら別のサービスも出てきました。

Flowkit – Userflows right inside your favorite design tool. Available for Figma, Sketch, and Adobe XD.

こちらも図を書くときにいい感じで矢印を引けるキットみたいです。Figmaならプラグインもあるようで気になりますね。

ろくデブログ

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

written by

Genta