SF Symbolsのカスタムシンボルを変数テンプレートでつくる

変数（Variable）テンプレートでカスタムシンボルをつくるときに起こった問題や手順についてです。

使用しているツール

使用しているツールは次のとおりです。Affinity Designerを愛用していますが、AppleのOS向けにアセットを作る場合はSketchを使うほうが作業しやすいかもしれません。

この件とあまり関係がないので含めていませんが、Continuousな角丸を作るツールとしてFigmaを使用しています。

はじめに

手順はAppleのドキュメントとWWDCの動画が参考になりました。Sサイズで3つのウエイトだけデザインすれば、残り24パターンはシステムが生成してくれます。

どうやってそれを実現しているかというと、パスの構造を見ているようです。したがって、以下のルールを守らなければならないようです。

SF Symbolsアプリで検証エラー

カスタムシンボルのデザインが完成し、ほこらしい気持ちでベクター編集ソフトが書き出したSVGをSF Symbolsアプリで検証したらエラーになりました。このあと何度もこのエラーを見ることになります。

エラー：1個のカスタムシンボルに問題が見つかりました。提供されたバリエーションは付加できません。

前述のとおり、パスの構造が一致していないとvariants間で同期が取れずエラーになります。これがやっかいなエラーで、どこをどう直せばいいのかは教えてもらえません。

ウエイト差を表現するためにストロークの太さを調節してからパスに変換すると簡単に全パターン作れそうですが、パスの構造が変わるのでダメでした。

同様に、輪郭のオフセットを作ってパスに変換すると、余計なノードが増えてパスの構造が変わるのでダメでした。

次の画像にある点線はオフセットです。ぱっと見ではノードの数が一致しているように見えますが、不要なノードが隠れているかもしれません。そしてパスの向きが逆まわりになってしまっています。

始点は同じように見えるが、内側のパスは反時計まわりで外側にあるオフセットのパスは時計まわりになっている。

Affinity Designerでノードの数や種類をそろえてもエラーになることがありました。どうやらSVGを書き出すときに気をきかせてくれたみたいで、不要なノードが削除されていました。SVGの<path>に含まれるLineToや3次ベジェ曲線などの順序や数がそろっていないとエラーになります。

そこで、SVGの<path>を整形し、どこのノードが削られているのかを調べました。そして該当するノードの座標にダミー値として0.001を加えることによって、SVGを書き出すときに該当ノードが削除されなくなりました。

また、どこでエラーになっているかを調べるために、オブジェクトをできるかぎり分解して入れ替えながらSF Symbolsアプリで検証しました。

ベクター編集ソフトによってはシンプルな図形が<rect>や<circle>で書き出されることがあります。その場合も0.001のようなダミー値を角度なり座標に設定する必要がありそうです。

とにかく最終的にはベクター編集ソフトが書き出すSVGのパス構造がそろっていれば検証にとおります。

たどり着いた手順

輪郭のオフセットをそのまま使って不要なノードを削除するようなアプローチも試して成功しましたが、とりあえず以下の手順で安定して作ることができています。

  1. Regularのデザインを作成してパスに変換する
  2. そのパスをコピーしてBlackなどの土台にする
  3. 輪郭のオフセットをガイドにして、ノードを1つずつガイドに合わせて調整する
  4. ハンドルも1つずつガイドに合わせて調整する
  5. ベクター編集ソフト上でノードの数、種類、ハンドル、パスの方向、始点をそろえる
  6. それでもエラーになるときはSVGをテキストエディタで比較して異なるノードをさがして修正する

Regularのデザインはできるかぎり線をシンプルにしてノード数を少なくしておくと、調整やチェックが楽になります。

もちろん既存シンボルのパスを流用できる場合は、そのまま使えばパスの構造が正しいのでとても楽です。