LOGzeudon

名古屋で働いているWebデザイナーのブログです

AdobeXDで「矢印」を生成できるプラグインFlowkitが便利

話題になっていたこちらのプラグイン、試してみたらだいぶいい感じでした!そう思ったポイントについて書きます。

良いと思ったポイント

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

http://data.rokuzeudon.com/blog/img/xd-flowkit01.gif

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

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

f:id:rokuzeudon:20200120201546p:plain
先端(ポイント)の形を8種類から選べます。

プレビュー機能はありませんが、数も少ないのであまり不便さはないかなと。

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

http://data.rokuzeudon.com/blog/img/xd-flowkit02.gif

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

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

http://data.rokuzeudon.com/blog/img/xd-flowkit03.gif

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

特に、矢印1と2に関しては、プラグインで設定できる「5」より大きくしてもいい感じになります。大きな矢印が欲しいときにも役立ちますね。

f:id:rokuzeudon:20200120220225p:plain
1、2以外の矢印は厳しいですが…!

色の変更も簡単

http://data.rokuzeudon.com/blog/img/xd-flowkit04.gif

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

終わりに

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

github.com

おまけ

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

https://useflowkit.com/

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