Sketchでフォントをアウトライン化する方法

Sketchでフォントをアウトライン化する方法

Adobe XDに続きSketchでフォントをアウトライン化する方法です。

個人的によく使うデザインツールがAdobe XDとSketchで、コーディングをすると毎回必ずSVGを使う必要が出てきます。

特にアニメーションを作るときはSVGファイル自体を編集することもよくあります。

なので、フォントのアウトライン化を覚えておいて損はないはず。

Sketchでexport書き出しをした場合

フォントをパス化又は、アウトライン化せずに書き出した場合はどうなるでしょう?

コード貼ったらjsonエラーがでたので、画像でお届けします。

若干AdobeXDとコードは違いますが、同じようにフォントファミリーの指定がされるだけになります。

ユーザーの環境にフォントが読み込まれていないと表示が崩れてしまいます。

Sketchでフォントをアウトライン化する

アウトライン化はとても簡単で、テキストレイヤーを選択した状態で「右クリック→ Convert to Outlines」をすることでアウトライン化されます。

右クリックして一番下にあるやつ
上部メニューのLayerの中にもある

めちゃくちゃ簡単ですね。