点線を描画する、図形の枠線を点線にする

Adobe XDで点線を描画する方法、図形の枠線を点線にする方法を紹介します。

点線を描画する

アートボードに[線]ツールで線を描画します。


右側のパネルの[アピアランス]のセクションの[線分]と[間隔]の値を変更すると点線になります。
[線分]の値を"4"に設定してみます。自動で[間隔]の値も変更されます。

描画した線が点線に変わりました。線と間隔の幅が同じ点線になります。


[間隔]の値を変更すると、線と間隔の幅が異なる点線を描画できます。

図形の枠線を点線にする

図形の枠線を点線にする場合も、点線の描画と同様の操作になります。
アートボードに図形を描画します。今回の例では、[長方形]ツールを利用して長方形を描画しました。

右側のパネルの[アピアランス]のセクションの[線分]と[間隔]の値を変更すると点線になります。
[線分]の値を"4"に設定してみます。自動で[間隔]の値も変更されます。

図形の枠線が点線に変わりました。線と間隔の幅が同じ点線です。


[間隔]の値を変更すると、線と間隔の幅が異なる点線を描画できます。

点線の描画と、図形の枠線を点線にする手順を紹介しました。

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。 最近は生成AIの画像生成の沼に沈んでいる。