はじめに
Figmaさんのイベントには度々オンラインで参加しているのですが、ネットワーキングがあるとのことで初めて現地参戦してきました。
参加申し込みをした際、応募人数が多い場合は抽選とのことで一緒に申し込んだ同僚は見事に落選。笑
私はネットワーキング初参戦なので１人は不安でしたが、これも試練だと思ってドッキドキで臨みました！
Design Systems with Figma について
デザインシステムを構築・運用し、組織に浸透させていくための知見を得られる場で、Figmaの最新機能のアップデートとデモ、各企業のデザインシステム実践事例の紹介がありました。
開催場所は、東京(2/19)・福岡(3/3)・大阪(3/6)の３箇所です。
それぞれ実践事例の登壇者は違いましたが、私は東京のイベントのみ参加してきました！
アーカイブも配信される予定のようなので、詳しくはそちらを御覧ください。
開場・受付
受付ブースには大きなFigmaのモチーフが！
来場者の皆さんが写真を撮っていました。受付から流石のワクワク体験です。
受付時にガチャガチャができるというコインを貰いました。
貰ったコインを入れて回すとシールが貰えました！これまた楽しい！
そして、あまりの人の多さに驚きました。
キーノート + 新機能デモ
FigmaJapan谷さんによるセッションです。
近日リリース予定の機能説明などを、デモを交えておこなっていただきました。
特にアツかったのは、以下の3つです！
- Slots
- Check Designs
- Claude Code to Figma
Slots
FigmaDesignユーザーなら誰しも困っていたであろう、コンポーネントのインスタンスに対する拡張を可能にする機能です。
FigmaDesignでコンポーネントを作成すると、インスタンスを生成した際にインスタンス内部に対する要素の追加はおこなえないため、バリアントやバリアブルを駆使して表現する必要がありました。
私が本イベントに参加した時はまだEarlyAccess（正式リリース前に特定のユーザーへ限定して先行公開すること）だったのですが、3/5からオープンベータ開始となっています。
楽しみです！！
Check Designs
設計したUIに対してレビューをしてくれる機能です。
指定されたコンポーネントが使われているか、カラーコードがベタ書きでないか、などのチェックに加え、UIの提案などもしてくれる機能のようです。
レビュー後はワンクリックで修正などが可能で、デザインシステムと連携することでより効果が最大化されます。
こちらもEarlyAccessの段階でしたが、オープンベータの案内はまだ無いようです。
早く使いたいですね・・・！
Claude Code to Figma
Claude Code to Figma で、コードからFigmaDesignに変換して自由に編集できます。
また、Figma MCPサーバーを使えば、逆にFigmaDesignで作成したUIのリンクとプロンプトをClaudeに投げるだけでコーディングしてくれます。
この往復により、デザインとコード間のワークフローがよりスムーズになること間違いなしです。
盛り上がりすぎたためか、イベントに参加していなかった私の後輩の耳にまで入っていました！笑
専門用語に詳しくない方も感動していたので、やはりデモの威力は絶大ですね。
各企業のデザインシステム実践事例
Serendie Design Systemの拡張戦略：独自Linterによる品質担保とMCPサーバーの実装
三菱電機さんによるセッションでした。
グッドデザインベスト100にも選ばれたというSerendie Design System。
OSSで、どなたでも使えるデザインシステムになっています。
FigmaMCPとの連携も可能で、Check Designsがリリースされていない今、チェッカープラグインも自作されたそうです！
「contentsは充実、それでも見ずに来る質問の現実」
セッションの中で印象に残った言葉です。（韻踏んでますね笑）
どれだけコンテンツを充実させたとしても、そのコンテンツを見てもらえないまま質問がたくさん来るという意味ですね。とても共感します・・・
The Next Evolution of Mercari’s Design System
メルカリさんによるセッションでした。
UI制作自体ではなく、揃えることがボトルネックだったとのことで、
CodeConnectとFigmaMCPを使って開発効率を2倍にしたという事例です。
デザインリードのAbdullah Alkhatib（通称Akiさん）の言葉に感銘を受けました。
AIによってデザインシステムは無くならず、むしろ無くてはならないものになる
CodeConnect+FigmaMCP はいずれ FigmaMake+npm になる時代が来る
今はデザイナーとエンジニアで設計と開発が分かれいるが、いずれはそれが一緒になる時代が来る
3つ目については、私がSEからUI/UXデザイナーに踏み出したという背景もあり、よく思っていることだったので同じ考えの方がいてとても嬉しい気持ちになりました。
Figma Make を探求するアクセンチュア／ゆめみ（チーム明治安田）
アクセンチュアさんによるセッションでした。
アクセンチュアさんはFigmaさんとパートナー契約を結んでいます。
FigmaMakeを使って、生成AIによるUI比較をデモしていただきました。
Geminiだったらポップになったり、Claudeだとお堅くなったり、結構違いが出ていました。
FigmaMakeはジュニアデザイナーの育成にも使えて良いとのことです！
ネットワーキング
ついにやってきました、ネットワーキング（震え）
軽食やドリンクをご用意くださっていました。
200個限定の、毎回人気だというFigmaロゴモチーフの可愛いケーキもありました！かわいい！！
膨大な人数でのイベントだったため、軽食・ドリンクを取りに行く人やガチャガチャをやりに行く人で会場はごった返しており、まるで満員電車状態でした。
私は参加前に「1人以上には絶対自分から話しかける」という目標を掲げていました。
でもさすがにこの状態で誰かに声をかけるのは無謀だと思い、わたしも軽食を取る列の最後尾に並びました。すると、
「ここが最後尾ですか？」
声をかけられました！！
そこから会話がはずみ、その方（以降Yさん）の交流のある方や同僚の方ともお話ができたり、「メルカリさんのとこ行きたいんだけど一緒に行かないか」と、セッションで感銘を受けたAkiさんの元へ一緒に連れてってくださいました！
セッションで登壇した方は皆さん人気だったので難易度が高かったのですが、なんとか順番待ちを耐え抜き、Akiさんにご挨拶できました…！
Akiさんはエンジニアの知識もお持ちだったので、経緯をお聞きした所、元々デザイナーで趣味でエンジニアを始めたとのこと。
私とは正反対のキャリアを歩んできた方がいることに驚き、また感心しました。
Akiさんに声をかけていた他の参加者の方たちとも交流して、とても実りのある時間に。
その後、Yさんのおかげもあり私も勇気を出すことができて、FigmaJapanの谷さんにも一人でご挨拶にいけました！とても緊張しました…！
肝心のYさんはこういうイベント交流がお好きな方で、名刺交換はできなかったのですが笑
とても良い経験になったし、自分自身の成長に繋がりました！
私は社内ではコミュ力に定評があるのですが、まだまだだなと感じた１日でした。笑
おわりに
当社ではこのような外部交流を推進しています。
私も自ら志願して挑戦してみた結果、緊張もしましたし、正直なところ苦手意識を完全に克服できたわけではありません。
ですが、良い経験になったので後輩たちにももっと外部交流をしてほしいという気持ちが湧きました。
まだ慣れないけれど、コンフォートゾーンから一歩抜け出し、交流を広げ、自分の知見やコネクションを増やしていきたいと思います。
Discussion