Figmaでオリジナルアイコンを作成した際に起こった問題点と解決策

はじめまして！Monoxer, Inc.でデザイナーをしております、moyoです。
普段はWEB、アプリのUIや体験をデザインしたり、エンジニアさんと協力しながらデザインシステムの運用を行なっています。

アドベントカレンダー初参加！初Qiitaです

#この記事の要約

• Figmaでアイコンを作成し、いざ実装したらいくつかの問題が発生
• Figma側の処理や設定変更で解決できた
• プラグイン「Fill Rule Editor」が便利！

#Figmaでアイコンを自作！
Sketchを利用していた頃は、Illustratorでアイコンを作成してからSketchに取り込んでいたのですが、Figmaへの移行を機に、アイコンもFigmaで作成するようになりました。

こんな感じ↓　

これらのアイコンを、エンジニアさんが以下のライブラリを使って実装してくださったのですが、

いくつか問題が発生したので、Figma上での解決方法を紹介できればと思います

#起こった問題と解決策
##1.アイコンの線が2重になってしまう
###問題
Figmaではベタ塗りのオブジェクトが、実装すると二重枠になってしまう。

###解決方法

1. パーツが全て結合されているかを確認する
   
2. 結合したオブジェクトに、Command + Shift + O でアウトラインをかける
   
3. (おまけ)アウトラインしたオブジェクトのConstraintsをScaleに変更
   

##2. アイコンがカクカクしてしまう
###問題
なぜか一部のアイコンがカクカクしてしまう

###解決方法
解像度を上げるため、アイコンのどれか1つを512pxのsvgにする
（エンジニアさん曰く、なぜかそれで他のアイコンもカクカクしなくなったそうです）

ライブラリ側の設定でfontHeightを指定したら、強制的に解像度をscaleして解決できたのことです！

svgicons2svgfonts: {
   normalize:　true,
   fontHeight: 1000,
}

##3. アイコンが塗りつぶされてしまう
###問題
アイコン内の線やオブジェクトが塗りつぶされてしまう

###解決方法

1. プラグイン「Fill Rule Editor」をインストール
   https://www.figma.com/community/plugin/771155994770327940/Fill-Rule-Editor

2. 「Fill Rule Editor」をアクティブにし、アウトライン済みのアイコンを選択
   

3. オレンジの部分をクリック（Non-zero Ruleに変わります）
   

4. 矢印をクリックし、一番外側を右周り、塗りつぶさない所は左周りに変更
   

##4. 作ったアイコンの数と、実装されたアイコンの数が合わない
###問題
作ったアイコンの数に対して、実装されたアイコンの数が少ない

###解決策
アイコンの命名に重複がないかを確認する。
（特に発展途上のプロダクトは、できるだけ状況依存的な名前を避けるのがベターだと思います。△Favorite ○Star）

#まとめ

1. 結合、アウトライン化を忘れずに！
2. Constraintsの設定をScaleにしましょう！
3. プラグイン「Fill Rule Editor」をインストールしましょう！
4. 丁寧な命名を心がけましょう！