こんにちは。

なないろのデザイナーのOです。

AdobeXDには、テキストをアウトライン化するというメニューがありません。

テキストのまま書き出すと、こんな風に余白ができてしまってこまってしまいますよね。

変な余白をなんとかしたい

XDの使い始めのころは、どうしたらいいのかわからず、余白付きで書き出されたものをPhotoshopなどでトリミングするなど、とても面倒なことをしていました。
そこで、いろいろ調べたりやってみたりした結果、これがいちばん楽かな？という「テキストをパスのように扱う方法」にたどりつきました。

AdobeXDでテキストをパスのように扱う方法

テキストよりひとまわり大きい長方形を描きます。

長方形がテキストの下になるように重ね順を変更します。

Illustratorのパスファインダーのようなアイコンのうち、「交差」というアイコンをクリックするとさっきの長方形がテキストの形にマスクされます。

塗りや線の色を変更すると、元のテキストがアウトライン化されたようになります。
元の色を覚えておいたり、あとで変更するのが面倒なら、型抜きする長方形に先にテキストと同じ色をつけておけば一発でこの形になります。

これを書き出すと、余白のない素材が出来上がります。

またこの方法なら、グラデーションの塗りもできます。

もとに戻せるので「_ol」付きの別データは要らない

マスクされているだけなので、テキストにもどしたいときにいつでも戻せるのも便利ですね。

この方法がベストなのかどうかはわかりませんが、現時点でみつけた方法です。