技術の力でSparkle Designの可能性を広げるー専用プラグイン「Sparkle Design Theme Settings」の裏側

「Sparkle Design」みなさん触っていただけましたでしょうか？
それは、グッドパッチが手がける“デザインシステムのためのデザインシステム”。

今回はその中でもFigma Pluginとしてリリースされた「Sparkle Design Theme Settings」の開発の裏側を、Sparkle Designチームのエンジニアである藤井（とうよう）がご紹介します。

なお、この記事では実現に関する技術的な詳細はお話ししません。技術観点に関しては昨年投稿したこちらの記事で基本的なところを紹介しているのでぜひあわせてご覧ください。

Sparkle Designチームへの参画
「誰でも使える」から「誰でも素早く”いい状態で”使える」へ
Reactを使った理由と、AI活用
今後の展望
おわりに：エンジニアがデザインシステムに関わること

Sparkle Designチームへの参画

まずプラグイン自体を語る前になぜ自分がSparkle Designチームに参加したのか、その経緯をお話しします。 Sparkle Designは、もともと社内の有志メンバーで開発されていたところから、正式に会社の取り組みとなり、UIデザイナーチームが担当として割り振られて完成したものです。自分はモバイルアプリエンジニアとして、Sparkle Designの初期を外から見ながら「モバイルの視点も盛り込めたら面白い」「デザインから開発までの接続をもっとスムーズにしたい」と考えており、Slackでもそのような発信をしていました。そんなある日、Sparkle Designチームのマネージャー・甲斐田さんから声をかけてもらい、唯一のエンジニア職としてチームに加わることになりました。

チーム外にいる時に社内timesでこんなことをぼやいていました
（※ SparkleはSparkle Designの初期のプロジェクト名です）

当初は個人開発で自分自身UIデザインをしていた経験を活かし、UIデザイナーと同じく肩を並べてエンジニア視点で議論に参加したり、効果検証の被験者としてFigmaをいじったりしていました。一方で次第に、エンジニアがチームに加わっているからこそできることもあるよねという話になり、Figma Plugin開発に着手することになりました。

「誰でも使える」から「誰でも素早く”いい状態で”使える」へ

Sparkle Designは「誰もがいいデザインを生み出せるように」を目指して作られています。これを達成するためにはもちろんコンポーネントやガイドライン自体のクオリティも大事ですが、一方で簡単にカスタマイズできることが重要になってきます。クオリティが高くても、カスタマイズできなければ、どのプロダクトも似たような見た目になってしまいます。これは往年のマテリアルデザインやBootstrapで起こっていたことかと思います。一方で、カスタマイズ性が高すぎるというのも難しいところで、Sparkle Designとしてはカスタマイズ性を担保しつつ「いいデフォルトを提供すること」が目標になりました。

プラグインを使うことによってコントラスト比やグレーの色味なども一括で変更することができ、Figmaファイル全体のクオリティを担保できます。

そこで考案されたのが専用プラグインという手段です。トークン管理のプラグイン自体は世の中さまざまありますが、あえて設定できる項目を絞り、プライマリーカラーの変化に対してグレーを置き換えるといったように変化後の状態も含めてきちんと“デザイン”することで、カスタマイズしても破綻しにくい構成にしました。カラーパレットのドキュメントなども自動で更新されるようにしており、このプラグインを使うだけで、その人オリジナルのSparkle Designのデザインシステムファイルを構築することができるようになります。

Reactを使った理由と、AI活用

プラグイン開発の技術選定ではUI部分をReactで実装できることを重視していました。これはいずれ予定しているReactコンポーネントを活用することで設定値の実装プレビューなどの機能を追加したくなったときも対応しやすくなるようにと考えたためです。結果コード管理も楽になり、UI実装のコストを大幅に下げることができました。

また外部リリース前にはClaude Sonnet 4での大規模リファクタリングをしてもらったことなど、AIを活用した開発も積極的に試しました。普段の業務はクライアントワークですぐにはこういった検証はなかなか難しいので、実験場でかつユーザーに価値を届けやすい存在というのが一石三鳥のプラグインだったと思います。

今後の展望

今後はどのバージョンのSparkle Designでも使えるように、メタプログラミング的なアプローチを取り入れていくつもりです。現状だとどうしてもFigma上の情報も書き換えに行くのでバリアブルの構造の変更に弱いのですが、そこをどのバージョンでも使えてなおかつプラグインのサイズも小さいまま、という状態を目指していきたいと考えています。

同時に、現在進行中のReact Componentsとプラグインの連携もスムーズにしたいと思っています。これによっていいデフォルトでのカスタマイズを実プロダクトにも反映していけるようになるでしょう。