Figmaのコラボレーションを使い倒す！ 〜Icon asset編〜
Figmaでのコラボはデザイナーと非デザイナー、デザイナーとデザイナー両方でとても有用なものである。今回はデザイナー間でコラボを促進する便利な環境設定についてまとめてみる。
Libraryの読み込み方を末尾に掲載しておくので使い方を知りたい方は冒頭飛ばしてください。
基本指針
- デザイナー以外にも利益がある
- 個々人の制作環境に頼らない
アイコンアセットを読み込む
Figma上でアイコンを読み込むのは主に3つの方法がある
- Editor全員にPluginを入れるように依頼する
- Local Componentとして定義済みのファイルをLibrary化し、各ファイルに読み込む
- フォントをインストールし、リガチャしたものを置いてもらう
メリット・デメリット
1. Editor全員にPluginを入れるように依頼する
メリット ： 「自分だけ使う」なら便利
Pluginをinstallするだけで利用可能になる。「自分個人だけで便利に使いたい」などはPluginに向いている用途であると思う。
デメリット ： 「みんなで使う」のは面倒
PluginはTeamになんら作用しないので、ドキュメントなどでプロジェクトに必要なPluginを羅列する必要がある。保守も考えると面倒。
2. Local Componentとして定義済みのファイルをLibrary化し、各ファイルに読み込む
メリット ： 誰でも使えるようになる
Material Design IconsやFont Awesome、SF synbolsなど、広く利用されているものは、Libraryとして読み込みやすいようにFigma Communityの有志が提供してくれている。こちらはファイルを設定しさえすれば、全員が使えるので環境設定を必要としないのが良い。
デメリット ： 限定的である、重いファイルは大変
- 有償のアイコンフォントは含まれていないため、それらを利用することはできない。
- Material Design Iconsなどは4000ほどのAssetがあるためLibrary化するのも一苦労する。
3. フォントをインストールしてテキストとして扱う
メリット ： デザイナーが何も考えず使える
デザイナーが一番ラクなのはこの方法、これまでも多くのデザインツールではそうしてきた流れなのか、私自身も去年くらいまでやってた。協業しないのであれば一番便利な方法かもしれない。Componentにtext fieldさえ置いておけばIcon + TextやText + Iconなんていうレイアウトもその場で作れる。Componentをゆるいまま運用できるのでコストも少ない。
デメリット ： フォントを持つ人しか使えない
同じフォントをインストールしていない利用者がちょっとでも触ると、謎の透明オブジェクトになったり、別のものに置きかえられたりしてしまうので、コラボには向いていない。アウトライン化すればクリアできる問題だが、自分自身も含めて、それを実践しているファイルを共有された事はない。「後でやる」は永遠に行われないのだ。
結論 ： Library化して読み込む
「多くの人が設定なしに使える」という点で、Library化が一番良いのではないだろうか。
読み込み方
とあるComponentのIconを変更する方法を見てみよう。
Before
- アイコンのIncetanceを選択している事を確認
- 右側のプロパティパネルでIncetanceを確認
- Incetaneのメニューを開くとMaterial Design IconsのLibraryを読み込んでいないので変更ができない
After
- 左側のレイヤーパネルをアセットパネルに変更
- アセットパネル右上の本のマークをクリック
- 表示されたModalから、Material Design IconsのToggleをONにする
- 右側のプロパティパネルでIncetanceのメニューを開く
- 利用するLibraryを選択する
- 利用したいアイコンを選択(動画では検索を使用)
- アイコンを変更できた！
Discussion