Figmaのバリアントプロパティでアイコンの色まで制御したい

こんにちは！SaaS・DX事業部デザイナーの鍜治本（@KAJIJI_design）です。
SaaSではtoB向けツールのUIを作成するにあたり、デザインシステムを設計したり、独自のコンポーネントを活用しています。
今回はその中の一つであるButtonにフォーカスして、発見したFigmaのTipsを共有します！🙌

デザインシステムって？
Buttonをバリアントで切り替える
アイコンがデフォルトの色から変わってくれない
- 原因を探してみる
  - ①パスやシェイプの名称が一致していない
  - ②パス・シェイプが複数に分かれている
まとめ

デザインシステムって？

日本の行政機関で初めてデジタルに特化したデジタル庁では、デザインシステムについて次のような記載をしています。

構築と推進の目的
デザインと開発を効率化し、利用者の課題解決に集中する
大規模なサービスで素早く改善サイクルを回す
一貫性を担保し、行政サービスを使いやすくする
開発チームの円滑なコミュニケーション
デジタル庁デザインシステムより引用 www.digital.go.jp

制作側、特にデザイナーにとっては「一貫性を担保」や「開発チームの円滑なコミュニケーション」がメリットになると思います。
SaaSは今までデザイナーがひとり体制だったので、ある程度伴走しながら設計していく運用でなんとかなっていました。今年からインターン生が増えたり、チームとしてより活発に回り始めたこともあり、誰が作ってもズレのない表現ができるデザインシステムの構築を進めています。

Buttonをバリアントで切り替える

これはSaaS・DX事業部で提供している「KUROTEN」というツールで使われているボタンの一部です。
Componentsの仕組み自体はGoogleのMaterial Design3を参考にしていますが、マウスホバー・押下といった状態変化をバリアントのグループにしています。

テキストとアイコンを組み合わせられるプロパティにしているので、アイコンを任意で表示/非表示の切り替えができるようにしています。

さらに、インスタンスの入れ替えプロパティを使ってアイコン自体も入れ替えができるようにしています。今回はここのアイコン変更について悩んでいた事象を解決しました。

アイコンがデフォルトの色から変わってくれない

アイコン自体は #3F4B5B のカラーを指定しており、Filled ButtonのPrimary でアイコンを使用する場合には #FFFFFF に変更しています。
本当であれば、バリアントを入れ替えた時に色まで変わってくれると便利なのですが…

なぜかうまく反応せず、エクスポート（右斜め上矢印付きのもの）アイコンではデフォルトカラーが残っていたり、クエスチョンアイコン（？マークのもの）に至っては色が全く変わりません。

原因を探してみる

インスタンスの入れ替えで変わるもの・変わらないものがあったことから、アイコン側に原因があると仮説しました。そして、アイコン自体の構造を見直しながら切り替えたところ、2つの原因が見えてきました。

①パスやシェイプの名称が一致していない

アイコンをレイヤーから見てみると、それぞれのパスやシェイプが一致していない場合があります。今回で言うと、closeアイコンは「Vector」、external linkアイコンは「Union」になっていました。
アイコン作成時にAdobe Illustratorを使ったり、Figmaのシェイプで描画することで、最終的な名称のズレが生じてしまうようです。