OldAppが消える前にマスターしたい、NewAppでのフォントファイル生成手順！
こちらが新しいAppの画面です。
左上の「Import」を押すとファイル選択の画面になりますが、複数アイコンを格納したSVGファイルをアップロードするとこのようにエラーになりました。「New」を押すと「untitled-project」一つ増えます。
不要なプロジェクトを削除したい時は、正しくプロジェクト名を入力するとdeleteが活性化して消せます。
頻繁に消すものじゃないし、丁寧でよいUIだと思う。
①中央にあるプロジェクトの「Load」をクリックして編集画面へ
さて、これまでのIconの編集画面に行くためには中央に表示されているプロジェクトの「Load」をクリックします。
するとこんな画面に↓
②SVGファイルをアップロード
左側の青く囲まれた「Select or Drop Files」というところからSVGファイルをアップロードすると、格納されていたアイコンがこんな感じで表示されます。
試しにMingCuteのSVGアイコンファイルをアップロードしてみました。
③リニューアル版はここでアイコンの編集ができる！
アイコンを1つ選択した状態で、ツールバーの編集アイコンをクリックすると
こんな感じでアイコンの編集がこの場でできちゃいます！
アイコンをクリックすると上のようにパスが表示され、イラレのベジェ曲線と同じようにいじれちゃいます。すごい！
デフォルトのカラーや線の形式など、SVGの設定もいじれるみたいです。
④移動のUIがちょっと変わりました。
一覧に戻ってこれまでできていたことの操作感を確認したいと思います。
※アイコンの編集画面からは、左上の「< Glyphs」という導線から戻れます。
移動は複数同時でもいけます。
結構見慣れない画面になったので最初は戸惑ったのですが、これは旧appよりかなり分かりやすいです！
アイコンの間に表示されている細長い棒みたいなやつにhoverすると黒くなるので、選択したアイコンを置きたいところでクリックします。
以前はドラッグで頑張って移動させなきゃいけなかったけど、「このアイコンとこのアイコンの間！」と確実に選べるのでアイコンが迷子になることもなくさくっと移動できます◎
⑤アイコンの追加は左のアップロードエリアから
アイコンを追加したい時は、最初に使った左サイドの「Select or Drop Files」からアップすれば先頭に追加されます。
⑥複数選択はShiftかCtrlを押しながら
Windowsとか昔からよくある仕様で、「連続した範囲選択の場合はShiftを押しながら」「飛び石で複数選択したい時はCtrlを押しながら」、何もキーを押さずに選択すると単一の選択になります。
⑦フォントファイルの書き出しは右上の「Export」から
デフォルトでこれまで同様に「Font」「SVG」のフォーマットが使えるようになっていますが、いろいろ追加して使えるようになったようです。
トグルを開いていくと、これまで同様にPrefixなどの細かい設定もできるようです。
名前をUntitledのままにしていると、ダウンロードしたファイルがUntitledになっちゃうので名前は付けた方がよいかと思います。
※ちなみにこのファイルたちが入った状態でダウンロードされるzipファイルの名前はプロジェクト名になります。
⑧「Download」ボタンをクリックしてダウンロード
Downloadをクリックするとダウンロードが始まります。
ちょっと時間がかかります。
サークルが一周してからも、最後の処理でもうひと待ち。
アクティブにしているフォーマットがzipでまとめてダウンロードされるので、fontだけでよい場合は「Formats」のところでSVGは外しておく必要があります。
まだよく分かってない機能がたくさんありますが、ひとまずOldAppでできていたことはできるようになった気がします。