Figmaで簡単なアイコンを作ったはずなのに、
「リサイズすると線が崩れる」
「SVGを書き出したらパスが汚い」
といった問題に遭遇したことはありませんか？
私はデザイナーではありませんが、PMとして
・画面提案用のモックを素早く作りたい
・既存のアイコンでは表現できない
という場面がよくあります。
この記事では、Figmaの減算（Subtract）操作を使って、線が崩れないSVGアイコンを素早く作る方法を、デザイン未経験の目線でまとめます。
Step 1: ベースとなる形状を選ぶ
今回はユーザーをブロック風なアイコンを作りたかったので、基本的なユーザーアイコンとキャンセルアイコンをベースにしました。
今回のデモに利用した無料アイコンパッケージはこちら
元のSVGをアップロードすると、Figmaがフラットなベクターに変換してくれるので編集しやすくなります。そのため、アイコンパッケージからコンポネントをコピペより、SVGをダウンロードしました。
Step 2: 切り抜き用の形状を作る
ブロック風のアイコンSVGを参考にし、欲しいサイズに調整して、同じサイズの円を作成しました。
Step 3: 形状を選択してSubtract
形状のレイヤー順は重要です。
切り抜きたい肩部分のベクターの上に円を置き、頭のベクターは一番上に配置しました。
基本的には「切り抜きたい形状の上」に切り抜き用の形状を置くと意図通りに動作します。
両方の形状を選択し、減算を実行します。
その後、ブロック風アイコンを設置する。
ブロックアイコンそのままを使うと綺麗ならないので、両方の形状をカッターとして使います。
Step 4: SVGの仕上げ
グループ化した形状をアウトライン化するか、そのままSVGとしてエクスポートします。
これでカスタムアイコン用のSVGが完成です。
注意点
これはデザインスキルがない人向けの、モックアップ用の簡易的な方法です。
実プロジェクトで使う前に、エクスポートしたSVGは必ず確認した方が良いです。
確認ポイント：
- リサイズしても崩れないか
- 線アイコンの場合、意図しない白塗り部分がないか
- 透明部分が正しく透過されているか
その他のBoolean操作
Figmaには他にも便利なBoolean操作があります。
カスタムアイコン以外でも使えるので、公式ドキュメントを参照してください。
https://help.figma.com/hc/en-us/articles/360039957534-Boolean-operations