デザインシステム -アイコン Figma ファイルを公開しました-
エクサウィザーズのアイコンライブラリの Figma ファイルを公開しました。
個人や商用利用に関わらず、どなたでも自由に使用できますので、ぜひご活用ください！
👇こちらのリンクからアクセスできます
アイコンライブラリについて
exaBase Design System は、エクサウィザーズが開発・運用しているデザインシステムで、その一部として、汎用的でシンプルかつ自然なデザインをコンセプトに開発したアイコンライブラリを一般公開しています。
過去の note でもアイコンのデザインルールやなぜ公開するのかについて紹介していますので、よろしければ併せてご覧ください。
今回は、そのデザインデータである Figma ファイルを Figma Community に公開しました。
Figma ファイルのコンテンツの紹介
公開しているコンテンツの一部をご紹介します。
アイコンデザインガイド
アイコンデザイン時にデザイナーが守るべきガイドラインがまとめられています。
アイコンデータチェックリスト
デザインガイドはアイコンの形に関するガイドラインですが、Figma でコンポーネント化する際に守るべきルールも定められています。
アイコンコンポーネント一覧
現在、500個のアイコンが用意されています。
カテゴリー分類
アイコンを探しやすくするために、カテゴリーに分類しました。
アイコンのカテゴライズ
アイコンを使うデザイナーやエンジニアが目的のアイコンを見つけやすくするため、アイコンをカテゴリーに分類しています。このカテゴリーの設計には苦労しました。
私たちは以下の進め方でカテゴライズを行いました。
他社の代表的なアイコンセットを 5 つピックアップする（Material Symbols, SF Symbols, 絵文字 など）
それらのアイコンセットで使われているカテゴリーを一覧化する
2つ以上のアイコンセットに登場するカテゴリーを選別する（Media, Commerce など）
選別したカテゴリーで試しに分類してみる
ここまでやってみたところ、次のような問題が出てきました。
同じアイコンでも、人によって分類するカテゴリーが異なる
アイコンの数が少ないカテゴリーがある
どのカテゴリーにも分類できないアイコンが多数存在する
特に、1つ目に挙げた「同じアイコンでも、人によって分類するカテゴリーが異なる」については悩みました。カテゴリーを何度見直しても適切なカテゴリーセットを作ることができませんでした。
例えば、こちらの鉛筆アイコンの適切なカテゴリーは何でしょうか？
おそらく答えがなく、アイコンを1つのカテゴリーに分類することが間違いだと気づきました。そこで、アイコンが複数のカテゴリーに属することを許容することで、アイコンの分類をスムーズに行えました。
また、カテゴライズの他に、各コンポーネントの Description にラベルを付けることで、検索性を向上させています。
Description の管理をしやすくするため、Description を一覧化するようなプラグインを開発して使用しています。
アイコンライブラリの更新
アイコンライブラリを公開してから、11ヶ月 で 105 個の新しいアイコンを作成しました。デザインシステムの使い勝手をより良くするためだけでなく、デザインシステムを整備しただけでメンテナンスされていないような状況を避けるため、毎月 10 個のアイコンを追加することを目標にしています。
Figma で制作したアイコンは、社内に Figma のライブラリとして公開したり、今回のように Figma Community で公開するだけでなく、最終的には SVG, CSS, Font に書き出して、npm リポジトリやウェブサイトにも公開する必要があります。
公開作業は複雑で、手作業で行うのは大変なので、以下の処理を GitHub Actions として登録し、ボタンを押すだけでリリースできるような仕組みを整えています。
Figma API を使用して Figma ファイルから最新の SVG を取得し、Pull Request を作成する
npm パッケージとしてリリースする
まとめ
今回、アイコンのデザインデータを Figma Community に公開しました。
世界中にはたくさんのオープンソースのアイコンセットが存在するため、私たちのアイコンを使用いただくことはあまりないかもしれませんが、日本発のアイコンセットとしてノウハウを公開することで、日本のデザイナーのみなさまの参考に少しでもなれば幸いです。また、このような取り組みや思想を発信することで、エクサウィザーズのお客様へのデザインに関する説明責任の一つになると考えています。
最後になりますが、エクサウィザーズでは一緒に働く人を募集しています。興味のある方はぜひ以下のリンクから採用情報をご覧ください！
筆者: 吉田 (UI/UXデザイナー)