はじめに
社内の「デザイン標準化プロジェクト」の活動の一環として、FigmaでSVGアイコンをエクスポートするためのテンプレートを作成しました。
プロジェクトの目的などは下記の記事で紹介しているので、興味がある方はぜひご覧ください。
SVGアイコンをエクスポートする際の最適化がめんどくさかった
エクスポートの工程そのものは下記の記事で紹介しています。
こちらにも記載しているように、大前提としてデータが最適化されている必要があります。
この最適化はツールがFigmaでもIllustratorでも他のものでも、Webやアプリ、DTPなどにおいても共通の基礎的な概念です。
本来であればデザインの工程で行われるべき処理ですが、担当者のリテラシーが不足していたり外部から提供された素材などで最適化されないまま展開されることもままあります。
そういった状態で展開された場合、そのままでは使えないので自分で手動で調整を行う必要があり、非常に手間がかかっていました。
Material Symbols & IconsとかFont Awesomeのように何も考えず楽に使いたいだけなのに、長年に渡って謎の作業が発生してしまうのは非常にストレスでした。
最適化の目的
そもそもとして、アイコンの最適化を行う目的は何でしょうか。
主に下記が挙げられます。
容量・ゴミの削減
ものによりますが、不要なレイヤーやパスを削減することで軽量化が図れます。
複数の色情報が含まれていたり単純な形状の場合は逆に容量が増える可能性があります。
変更容易性の担保
1つのパス、あるいは色ごとの「塗り」を変更するだけでよくなったりします。
レイヤーの構造がシンプルになるので不要な選択や情報が減り、認知負荷が軽減されます。
機密情報漏洩の防止
稀にレイヤー名などにメモが入っていたりするのですが、これがそのままソースコードへ組み込まれることを防ぎます。
そもそもとして経緯やリファレンスなどはプロジェクトのタスク管理ツールのチケットやWikiなど然るべき場所へ記載（共有）するべきではあります。
ツールでの意図しない処理の防止
FigmaではSVGのエクスポート時に線（stroke）が塗り（fill）として処理されます。
このとき、正しく処理されずベクター画像データとして破綻してしまうことがあります。
大半の場合はデータを健全な状態に保てば正しく処理されます。
健全な状態とは、主に下記が挙げられます。
- パスが領域を保っている（正確に閉じられている）
- ベクター画像データとして成立している
- 回転していない（不要なトリミングの処理などが発生しない）
- マスクを利用していない（ツールの仕様に依存していない）
- パスの構造が複雑でない
- パスの結合や統合、アウトライン化がされている
- アートボード（カンバス）ぎりぎりのサイズになっていない（上下左右端から1px以上の余白がある状態）
アイコンに限らず、基本的には元データをFigmaではなくIllustratorなど専門のツールで作成し、Figmaではレイアウトのみに集中するのがあらゆる面において無難です。
データの作成から標準化した
エクスポートの工程自体は前述の記事のとおりなので、その前工程であるデータの作成から標準化することにしました。
上記の最適化はもちろんですが、扱いやすいようにサイズや構造を統一するフローにしたり、たくさんの名だたるデザインシステムを参考にしつつFigmaのコンポーネントを活用して、デザインデータでも再利用しやすいFigmaデザインファイルのテンプレートを作りました。
詳細は下記の記事で紹介していますが、結果的に67%の時間短縮と品質向上を実現できました。
まとめ
テンプレートを導入することで、FigmaでのSVGアイコンのエクスポートが爆速かつ高品質になりました。
反面、Figmaのコンポーネントにハードルを感じて導入が進まないプロジェクトもあります。
そういったハードルを下げるためにテンプレートの導入方法や活用方法を社内で共有し、啓蒙活動を行っています。
今後も標準化できる部分を見つけて、デザインの品質向上と効率化、そしてデザイナーとエンジニアの連携を強化していければと思います。
Discussion