SF Symbols.appを活用してカスタムシンボル（オリジナルアイコン）をデザインする by emim

SF Symbolsが発表されてからしばらく経ちますが、私の所属組織ではいまだPDFでのアイコン作成／iOSアプリへの取り込みが主流でした。また開発観点から見ても、5,000以上の多様なアイコンをあらかじめ揃えたSF Symbolsの活用は、スピードの求められるグロース開発とも相性がいいことがわかっているのに、適用の下準備が整っていませんでした。

そこで今年、開発側のSF Symbols利用の土台作りとともに、デザイン側のカスタムシンボル作成のワークフロー整備をおこないました。

このポスターセッションでは、カスタムシンボルを使ったオリジナルアイコンの作成方法や、SF Symbols.appへのSVGデータの取り込み／加工のデザインワークフローの作成、更にデザイナーとエンジニア間のデータのやり取り方法を整備した事例を紹介予定です。

実際にデザイナーがSF Symbols.appを利用してみると思わぬ落とし穴にハマったり、想定外の動きをしたりしました。また、アイコン作成者（デザイナーごと）に依存する形状のブレが生じないよう、Adobe Illustratorのガイド機能を利用したプロセス調整なども行っています。これらの整備をする上で、SF Symbolsに込められたVariablesの思想なども見えてきたため、Tipsもまとめます。