Adobe XDでも文字のアウトライン化しておいた方がいい場合がある
PhotoshopからXDへ使用するデザインツールを移行した場合、文字のアウトライン化についてちょっと注意が必要なように思います。Photohopと同じ感覚でいたら失敗しました。
フォントが自分の環境に無かったらどう表示されるのか？よく使うAdobeのツールとの比較
まずデザインでよく使う他のAdobeツールではどう表示されるか見ていきましょう。
Photoshopでフォントが無い時の表示
編集できないが見た目は元のフォントのままで表示される。そのまま書き出す分にはフォントが無くても支障ないはず…
Photoshopは見た目の表示はそのままで、環境に無いフォントはレイヤー上で「！」アイコンがついている。
Illustratorでフォントが無い時の表示
フォントが環境に無い旨表示される。そのため最初にフォントが無いことを認識しやすい。
Illustratorでは最初にこのウインドウが表示される
Adobe XDでフォントが無い時の表示：気付きにくい！
Adobe XDではフォントが自分の環境にインストールされていなくても、そのフォントが「Adobe Fonts」に存在していれば自動でアクティベートして表示されます。
しかしAdobe Fontsにも存在していない場合、Illustratorのようにフォントが無い事を示すメッセージは表示されず、自動で代替フォントに置き換わった状態で表示されます。
サイレント置き換えなのでフォントが足りていないことを意識しにくいです。
この仕様を知らないと本来の正しいデザインの状態で表示されていないことに気が付かない可能性があります。
実際、データを渡す方も渡される方もこれを知らずに失敗したことがありました。（フォントが置き換わった状態のデザインを正としてコーディングされ、チェック時に気がついたがお互いなかなか話も通じなかったというもの）
Adobe XDではどこでフォントが足りていないことを確認できるか
フォントの置き換わりは「ドキュメントアセット」で確認しよう
ファイルを開いたら、画面左にある「ライブラリ」アイコンをクリックして「ドキュメントアセット」を表示。
そこで「環境にないフォント」名を確認することができます。
具体的にデザイン内のどこが置き換わっているのか確認したいとき
フォント名の上で右クリックし、次に「キャンパスのハイライト」をクリック。
該当箇所に青い枠が表示されます。
他者が作ったXD製のデザインデータを受け取ったときは、まず「ドキュメントアセット」に「環境にないフォント」欄があるかどうか確認した方がよいでしょう。
コーディングする方は環境に無いフォントがあった場合、必要であればフォントのインストール、またはデザイナーにアウトライン化の依頼が必要になってくると思います。（開発者用プレビューなども共有されていればそちらで対応可能かもしれませんが）
Adobe XDでのテキストのアウトライン化の方法
Adobe XDでもテキストのアウトライン化は可能です。
画像化するテキストがある場合は、エンジニアに共有する前にアウトラインをとったデータも用意しましょう。
ツールバー「オブジェクト」 → 「パス」 → 「パスに変換」
ショートカット
| mac | Command + 8 |
| windows | Ctrl + 8 |
XDファイル内でのテキストのアウトライン化で注意したほうが良いこと
テキストが他の要素とグループ化されている場合、グループの中に入って個別に選択しないとアウトライン化は実行できません。
対象テキストが含まれているグループ自体を選択して変換を実行しても、そのテキストはアウトライン化されないので注意が必要です。
