SUZURI事業部シニアデザイナーの @putchom です。先日Figma主催のConfig 2022というグローバルカンファレンスに「One design system for multiple brands」というタイトルで登壇させていただきました。
今回は登壇までの準備や当日の様子をお伝えできればと思います。
登壇内容
GMOペパボは様々なサービスをそれぞれ異なるブランドで提供する企業です。その中で、本当に意味のあるデザインにリソースを回せるようにすることを目指し、独自の共通基盤デザインシステム「Inhouse」を構築しています。
「Inhouse」の特徴として、複数のブランドを一つのデザインシステムでサポートするために、デザイントークンという概念を活用し、共通のコンポーネントをブランド特有のスタイルで上書きできるようにしています。
Figmaはこのコンセプトを実現するための重要なツールであり、本セッションではその経験を共有させていただきました。
より詳しい内容は今回はFigmaの公式YouTubeチャンネルでアーカイブが公開されているのでそちらをご覧ください。
また、スライドもFigmaのコミュニティで公開していますのでこちらもあわせてご参照ください。
きっかけ
きっかけとしては designsystems.tokyo というイベントを主催している @nobsato さんから、弊社宛てに本イベントをご紹介いただきました。
その折、ちょうど私がペパボの共通基盤デザインシステム「Inhouse」のFigmaコンポーネントを複数ブランド向けに設計していて、その知見を共有できるとよさそうと考えたため、応募させていただきました。
Notion上に用意した申し込み要項。英語が得意な同僚に添削を依頼した。
その結果、見事採用され、登壇することが決定しました 🎉
準備
準備に関してはFigmaからのサポートが手厚く、Designer AdvocateのTomさんからオンラインで2回レビューをいただきました。しかし、私は英語があまり上手に話せないため、英語が話せる同僚やFigma Japanの皆さんにサポートしていただきながら登壇内容のブラッシュアップを行いました。（本当にお世話になりました）
まず、1回目はNotionで作成したアウトラインを共有し、おおむね良さそうというフィードバックをいただきました。 また、このタイミングでFigmaから資料作成に使えるスライドテンプレートが配布されました。
アウトラインを用意。日本語とDeepLで翻訳した英語を併記した。
Figmaから配布されたスライドテンプレート。
そして2回目はスライドを通しで説明し、もう少しFigma上のデモを見せてほしいというフィードバックをいただきました。（この時点ではデモは入れていませんでした。）
2回目に共有したスライド資料。
リハーサルには2回目のレビューで提案をいただいていたデモを用意して望みました。また、発表に関するアドバイスをいただける方も参加し、マイクや照明の設置に関するアドバイスをいただきました。
それらの準備を経て、ついに撮影本番を迎えました。用意したデモがリアルタイムでうまくいくか不安だったのですが、思ったとおりに進めることができました。
また、Tomさんから用意したデモがとても良かったと言ってもらえたのが嬉しかったです。
撮影本番の様子。弊社オフィスにて。
そして、すべての準備工程を通して、Designer Advocateの方々から毎回モチベーションが上がるメールが送られてきたため、とても楽しく準備することができましたし、コミュニケーションデザインとして学ぶことも多かったです。
We will brainstorm and develop your presentation together and create Config magic from there! (あなたのプレゼンテーションを一緒に考え、そこからConfig magicを作りましょう!)
当日
当日、東京ではTokyo Config Watch Partyというイベントが開催されました。このイベントはFigmaの日本進出を記念し、日本のFigmaコミュニティをさらに盛り上げたいという思いでFigmaが公式で開催するイベントです。 来場特典として日本未展開のSWAG （Figmaオフィシャルグッズ）のプレゼントもありました。
FigmaのSWAG
当日は前方のスクリーンに自分のセッションが映し出され、およそ200人と一緒に見るという貴重な体験をしました。
発表のあとのインタビューやネットワーキングでたくさんの方から共感していただき、複数ブランドにおける単一のデザインシステム運用の需要があることを感じました。
「デザイントークンのKeyとValueを正しく定義することはデザインの本質」#Config2022#TokyoConfigWatchParty pic.twitter.com/4YX00pWCha
— 林大輔 | デザイナー 兼 PdM＠経理DXスタートアップ (@HayashiDaisuke) May 11, 2022
「同じプロダクトと向き合う人たち全員が同じ言葉を同じブランドを持つこと、意味や言葉を大事にする」 デザインシステムの本意だなあ #TokyoConfigWatchParty
— mimi (@miminari) May 11, 2022
Figma のトークンをコードで管理しておいてFigma Tokensで適用してあげるのかなりよさそう◎
— \\ uto-usui // (@uto_ao) May 11, 2022
#TokyoConfigWatchParty
デザインシステム警察と言われて疎まれないように、社内に浸透して使われるにはどうしたらいいか？
— こにたん (@konitanasa) May 11, 2022
👇
触れる人に対して最適なインターフェイスで提供している。（ライターさんならnotionのように）
まだまだ模索中ではある#Config2022 #TokyoConfigWatchParty
まとめ
グローバルカンファレンスに登壇したことで、今まで遠くに感じていた世界が近くに感じました。また、自分が普段考えていることを「世界中の人がわかりやすいか」という視点で言語化する必要性が生まれ、さらにデザインシステムに関する解像度が上がりました。
イベント終了後。Tokyo Config Watch Party 運営スタッフのみなさんと。
今後もFigmaのコミュニティで自分のデザインシステムの知見を共有していきたいと考えています。日本のFigmaコミュニティに興味がある方はDiscordサーバーが用意されているのでぜひ参加してみてください。
余談ですが、登壇するにあたって2,000USDの講演料をいただいたのですが、デザインシステムのコミュニティに還元できるとよいと考え、お世話になっているStorybookに寄付させていただきました。いつもありがとうございます。
また、ペパボの共通基盤デザインシステム「Inhouse」に関してもまだまだやることがいっぱいあるので、「一緒に共通基盤デザインシステムを作ってみたい！」という方はぜひこちらからご連絡いただけると嬉しいです🙏