FigmaのSlotを活用したらデザインシステム管理が超絶楽になった話

2023年4月29日 14:00

いつも大学や英語の勉強についての記事を書いてますが、今回はデザイナーとして働いている私が知った技術的なことについてまとめていきたいと思います。

改めて軽く自己紹介

昨年の11月よりファインディ株式会社でUI/UXデザイナーとして働いております。ファイディで働くのはとても楽しく、また周りの優秀な人達に囲まれて自分もメキメキと成長を感じています。（ここに関しては入社半年エントリー記事で詳しく書く予定）

普段はプロダクトの魅力を高めるために様々な取り組みを行っています。その中でもデザインシステムはデザイナーだけでなくエンジニアも巻き込んで運用に向けて日々奔走しています。

ファインディデザインシステムとは

現在手掛けているのはWebエンジニアの中途転職を支援するFindyというプロダクトのデザインシステムなのですが、サービス開始から6年ほど経過し多くのデザイナー、エンジニアの手によって作られたためどうしても一貫性が保てない箇所があったり、ルールも整備しきれていない箇所がありました。

そのためデザイン、実装する際に伸びしろになる事が多く、ユーザーに提供する一貫性や実装のスピードといった様々な観点からデザインシステムをつくるに至りました。

デザインシステム管理で発生する時間的コスト

デザインシステムの構築に関しては私含め3名のデザイナーでプロダクト改善の合間に取り組んでいます。複数名で行うにあたって、なるべく誰が触ってもズレがないようなルールや管理体制が求められていました。
特にアイコン管理に関しては必要なサイズをコンポーネントのVariantで展開しており、オペレーション部分でのコストが掛かっているのが悩みでした。

Findy Design System - Icon (各アイコンをVariantでサイズ展開しており、デザイナーがそのサイズ分作成するのが地味に面倒だった)

Findy Design System - Icon （使用しているアイコンをサイズ展開したら、こんなにも多くなってしまい今後も増えることを考えたら恐ろしくなった。）

ATLASSIANのデザインシステムのアイコン管理

ATLASSIANはいつも参考にしている神的存在なのですが、神のアイコン管理はとってもスッキリしていました。何がどうなっているんだ？！と弄り倒した結果、Slotを採用していることが分かりました。

そもそもFigmaのSlotとは？

Slotとはインスタンスコンポーネントの中に任意のコンポーネントを入れることができるという裏技的なやり方です。通常、インスタンスされたコンポーネントの中には別のコンポーネントを入れることができません。そのため空のコンポーネントを予め入れておき、そのコンポーネントを差し替えることで任意のコンポーネントに入れ替えることができてしまうということです。

ATLASSIANのアイコン管理を解説

私も一度では理解できなかった神のアイコン管理を解説していきたいと思います。

このピンクになっている部分がnullという空の要素になっており、いわゆるSlot要素になります。このSlotを使用して各サイズをVariantとしてコンポーネント作成しておき、そのSlotを変更したいIconに変更することで様々なサイズのIcon展開が可能になります。と言葉だけだとちょっとよく分からないと思うのでサンプルを作って説明していきます！