Figma でアイコンコンポーネントを作るときのデータ構造

## この記事の概要

世の中にはいい感じのアイコンライブラリがたくさんありますが、どうしても自分達のサービスに合うものがなくて自作する場合もありますよね。

Figma でアイコンコンポーネントを作成するにあたって、気をつけた方が良いデータ構造についてまとめました。

## 前提

アイコンコンポーネントを作るといっても色々なシチュエーションがありますから、最初に定義しておきます。

- 1 つのアイコンだけでなく、複数のアイコンを作る
- アイコンの色はオーバーライドを許容する
- 以下のどちらかを採用する
    1. アイコンが 1 色のみ
    1. アイコンに 2 色以上を使う

## 絶対に実施すること

アイコンの色数に関わらず実施することから記載します。
以下の 2 点は常に守りましょう。

- レイヤーの数を揃える
- レイヤーの名前を揃える

具体的な例を示します。
スクリーンショットにあるように、レイヤーの数が 1, 2, 3 とすべて違い、レイヤー名もすべて違うアイコンを作りました。[^1]

[^1]: アイコンの領域が分かりやすいように `#fff` で塗っていますが、実際には不要な塗りです。

|  | アイコン 1 | アイコン 2  | アイコン 3 |
| --- | --- | --- | --- |
| 1 つ目のレイヤー名 | Rectangle 1 | Rectangle 2 | Rectangle 3 |
| 2 つ目のレイヤー名 | なし | Rectangle 3 | Rectangle 4 |
| 3 つ目のレイヤー名 | なし | なし | Rectangle 5 |

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/4e7fc2f1-a845-0da9-87ad-f18e67accff2.png)

レイヤー数 1 のインスタンスの色をオーバーライドしてみます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/4504c8ad-9150-f267-c28b-8f4dc0fe1e38.png)

この状態で、レイヤー数 2 のインスタンスに swap します。
すると、変更した色が反映されていません。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/8c7a9a57-69e4-2502-d2a6-618eecda9da3.png)

レイヤー数 3 のインスタンスに swap した際も同様に、色は変わらないままです。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/19af15f2-511c-c3b9-470a-c19358db10e7.png)

それでは、レイヤー数が違うまま名前だけ揃えるとどうなるのでしょうか。
すべてのレイヤー名を `Rectangle` に統一しました。

|  | アイコン 1 | アイコン 2  | アイコン 3 |
| --- | --- | --- | --- |
| 1 つ目のレイヤー名 | Rectangle | Rectangle | Rectangle |
| 2 つ目のレイヤー名 | なし | Rectangle | Rectangle |
| 3 つ目のレイヤー名 | なし | なし | Rectangle |

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/f10ebb90-358f-cd40-f01e-b53e8f397041.png)

この状態で、レイヤー数 2 のインスタンスに swap します。
すると、1 つのレイヤーは色の変更が反映されましたが、もう 1 つのレイヤーには反映されていません。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/b34fc415-814c-5609-f415-743107926e78.png)

レイヤー数 3 のインスタンスに swap した際も同様に、1 つのレイヤーにだけ色の変更が反映されています。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/735af0d6-b070-73a0-80d7-861ede301feb.png)

今度はレイヤー数も揃えます。
具体的には、複数のレイヤーがあるアイコンは Union にしてしまい 1 つのレイヤーとします。
そのままでは `Rectangle` と `Union` という 2 種類の名前が生まれてしまうので統一します。
ここでは `Rectangle` に揃えます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/1baaaa2e-09a4-9fb0-908f-0f343b8949bb.png)

この状態で、レイヤー数 2 のインスタンスに swap します。
無事、すべての要素に色の変更が反映されました。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/2cda714c-3825-becb-a163-b13fca2b2e10.png)

レイヤー数 3 のインスタンスに swap した際も同様に、すべての要素に色の変更が反映されました。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/72b20e82-be6b-66d2-e708-bdc78d492a32.png)

## 条件にあわせて実施すること

### アイコンが 1 色のみ

- レイヤー枚数は 1 枚にする
- どのアイコンでもレイヤーの名前を統一する

つまり、先ほどの例と同じです。

レイヤーの名前は `Vector` や `Path` など、アイコンに使われていても不自然でないようなものにしておくのがいいでしょう。

### アイコンに 2 色以上を使う

アイコンに 2 色以上使う場合は少し気をつけることが増えます。
ただし、2 色以上であれば 3 色でも 4 色でも変わりません。

簡単な例として、図形（バツ印）だけのアイコンと、背景付きのアイコンを作るとします。
Main component の時点では黒と白だけを使っています。
黒をオーバーライドしたら他のバージョンでも黒い部分の色が変わり、白をオーバーライドしたら他のバージョンでも白い部分の色が変わる、という挙動を実現しようとしています。

以下に示したのは **ミスをしている例** です。

レイヤー名を揃えるにあたり、バツ印を `Vector main`、背景色を `Vector sub` と名付けています。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/195b6462-85b2-ac05-aa02-9d2c085fc900.png)

この状態で色をオーバーライドし swap すると、次のように「背景色は変わらず」「バツ印の色が変わる」という状況になります。

図形をベースに名前を共通化してしまったので、意図せぬ色の保持をしてしまいました。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/4240df7b-c28a-e12f-eb9c-0f980d3201d3.png)

そうではなく、同じ色同士のレイヤーを同じ名前に統一します。

ここでは、黒が使われているレイヤーを `Vector main` に、白が使われいてるレイヤーを `Vector sub` に変えました。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/5342a22d-a0cd-c030-df48-22e001ef3366.png)

これにより、オーバーライドが意図した通りの保持をしています。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/34fdc0cf-2e0f-e9ad-ae52-784eedf2c26c.png)

## まとめ

オーバーライドが前提のアイコンコンポーネントセットを作る場合、以下の点に気をつけましょう。

- レイヤーの数を揃える
- レイヤーの名前を揃える
    - 複数色のアイコンを作る場合、形状ベースで名前を揃えるのではなく、色ベースで名前を揃える