- 💁♂️ はじめに
- 🤔 Config とは
- 🚀 リリース内容
- 🗣️ 印象に残ったセッション
- 👀 会場内の様子
- 🏢 オフィス見学ツアー
- 🧑💻 GitHub x Figma Dev Community Event
- 💡 サンフランシスコでの困りごとと現地の雰囲気
- ✨ さいごに
- 🎬 おまけ
💁♂️ はじめに
初めまして。プラットフォーム開発本部第3開発部 DeveloperProductivity グループでデザイナーをしている石田と申します。
この度、2024年6月26日〜27日にサンフランシスコで開催された Config 2024 に、社内のカンファレンス支援制度を利用し現地参加させていただきました。
また、 Figma Japan 様のご厚意でオフィスツアーやディナーにも参加させていただき、素晴らしいオフィスを見学し、日本から参加されたクリエイターの方々と交流する機会を得ました。誠にありがとうございました。
本記事では、参加したセッションの内容や、来年 Config に参加される方向けに現地の雰囲気をお伝えします。また、 Config 以外にも、GitHub 社と Figma 社が共同で実施したコミュニティイベントにも参加しましたので、その様子についてもご紹介します。
🤔 Config とは
Figma 社による年次カンファレンスで、世界中のコミュニティからデザイナー、開発者、製品ビルダーなどが集まり、互いに繋がり学び合うコミュニティのためのイベントです。
イベントは2日間にわたって開催され、Figma の最新機能の発表や著名なクリエイターによるセッションが行われます。また、会場内には多くの企業ブースが出展しており、各国のクリエイターと直接交流することができます。
🚀 リリース内容
今回のリリース内容は大きく下記の4つでした。
- Figma AI
- Dev Mode（開発者ツール）の新機能
- Figma Slides
- リデザインされた UI
Figma AI
シンプルなプロンプトでデザインのドラフトを簡単に生成することができます。また、プロトタイピングやレイヤーの名前付け、テキスト翻訳、画像の背景削除、ビジュアル検索など、これまで手間がかかった作業を AI が自動化してくれるため、デザイナーのワークフローがスピードアップする効果が見込まれます。
特にクライアントワークを行う方などは、クライアントと打ち合わせをしながらその場でアイデアや意図を具現化できるため、認識の違いを最小限に抑えることが出来るのではないでしょうか。
Dev Mode（開発者ツール）の新機能
開発準備完了となったデザインの変更を管理・トラッキングすることができます。
また、 Code Connect により、デザインシステムや対応する UI キットのコードがリンクされるため、開発者は効率的にデザインをコードに変換できます。
ベータ版では playground 内に Code Connect が表示されていませんでしたが、正式版では表示され、プロパティの値を変更すると連動してコードが更新される様子をキーノートで見て非常に感動しました！
Figma Slides
職能に関わらず様々なメンバーがコラボし、インタラクティブなプレゼンテーションを共同で作成して提供できる新製品です。
スライド内にプロトタイプを組み込めたり、デザインスタイルとカスタマイズテンプレートを活用することも可能です。
Figma ユーザーは昨年だけでも約350万本ものプレゼンテーションを作成していたようで、私もプレゼン資料は Figma で作っていたので、この機能が発表された時はとても嬉しかったです！発表された時、一番会場が盛り上がっていたように感じます。
リデザインされた UI
ユーザーの作業効率と適応力を向上させるため、新たなインターフェース「UI3」が発表されました。サイドパネルの開閉や縮小ができ、作業スペースを最大限に活用しやすくなっています。また、 Figma AI やその他のツールに簡単にアクセスできる新しいツールバーも設置されています。
現段階で、私はまだ「UI3」にアップデートされていないため、早く新しい Figma の UI を触ってみたいです！
その他にも、様々な新機能やアップデートの発表がありました。ご興味のある方はご覧ください。
🗣️ 印象に残ったセッション
今回様々なセッションがあったのですが、その中から印象に残ったセッションを2つご紹介します。
A look inside teenage engineering
数々のヒット商品を生み出している Teenage Engineering の創設者兼 CEO である Jesper Kouthoofd さんが、自身の生い立ちから同社のプロダクト開発の裏側まで語っていました。セッションの中で、 Jesper さんがおっしゃっていた「自分のためにデザインする」という考え方や、ユーザーテストやユーザーリサーチを行わないアプローチは、常にユーザーの意見を重要視してきた私にとって新鮮で印象的でした。
また、彼がクラシックオルガンをデザインするために自らもクラシックオルガンを習い、その楽器の本質を深く理解しようする姿勢には感銘を受けました。自身でデザイン対象物を研究しているからこそ、ユーザーリサーチやテストを行わなくても、問題点や改善点を見つけ、素晴らしい作品を作り上げることが出来るのだと思いました。
Adopting foundations at scale
Atlassian で Principal Engineer として働く Kylor Hall さんが、昨年から実施しているデザインシステムの採用推進について、どのような取り組みを行ったのかを語りました。
個人的にデザインシステムを開発する際、Atlassianのデザインシステムをよく参考にしていたため、特に注目していました。
採用促進の要因として、教育（ Education ）、自動化（ Automation ）、施行（ Enforcement ）が挙げられました。
下記にその内容を記載しています。
教育（ Education ）
デザインシステムを採用してもらうためには、トップダウンでの推進よりも、実際にデザインシステムを使用するデザイナーやエンジニアからの支持を得ることが重要です。デザインシステムを使用する開発者、特にデザイナーが気に入らなければ、製品に取り入れることはできません。そのため、デザイナーやエンジニアを対象に、デザインシステムの魅力を伝え、興味を引き出すための教育的な売り込み活動を行いました。
自動化（ Automation ）
開発者が IDE （例： VSCode ）内で作業しながら、ドキュメントに迅速にアクセスできるようにしました。また、約100種類の ESLint ルールと Codemods を活用し、アプリケーション内でデザインシステムの要素（ボタンやトークン）が未使用の箇所にエラーを表示し、自動で修正する設定を行いました。
施行（enforcement）
「ADS Adoption Scorecard」というデザインシステムのトークンやプリミティブの採用率をまとめたスコアカードがあります。このスコアカードを利用することで、チームとリーダーシップに対して、現在の状況と将来のイニシアティブに必要な目標をより良く把握できるようにしています。
この他にも、デザインシステムを採用するために解決すべき課題を生成するシステムを作った話や、プリミティブコンポーネントの話などがありましたが、個人的には、「ADS Adoption Scorecard」に記載されている、トークンやコンポーネントの採用率は、どのようにデータを集め、割り出しているのかがとても気になりました。
👀 会場内の様子
こちらがメインステージで、キーノートの発表などが行われました。
会場内には、 Google 、 Notion、 LottieFiles など世界的に有名な企業のブースが多数出展されていました。
Customization Station というトートにパッチをつけることのできるコーナーが非常に人気でした。
Figma STORE ではさまざまな Figma の商品が販売されており、私は Tシャツと帽子を購入しました！
🏢 オフィス見学ツアー
Figma Japan の方々のご厚意でサンフランシスコ本社オフィスツアーに参加させていただきました！
オフィス内には Figma をテーマにしたアートワークが飾られており、創造性を掻き立てるおしゃれな空間でした。また、会議室には Figma に関連する名前や有名なデザイナーの名前が付けられていたのが非常に印象的でした。
Figma本社のオフィスツアー、最高でした！
— Daiki Ishida (@ishida1897) 2024年6月26日
仕事場でありながら、美術館かと錯覚するほどおしゃれな空間で、本当に感動しました。素晴らしい体験をありがとうございました！👏👏 pic.twitter.com/D49tv0J0az
🧑💻 GitHub x Figma Dev Community Event
イベント前日の25日、 GitHub x Figma Dev Community Event に参加しました。メインステージでは、3つのライトニングトークとパネルディスカッションが行われました。
なかでもカラートークンを Figma と GitHub で同期させ、Local variables にメタデータを設定する話が非常に興味深く、デザインと開発の連携をスムーズにする方法は大変勉強になりました。
GitHub x Figma Dev community event 面白かった👏https://t.co/LFKXWpLo4L pic.twitter.com/zbFsrxI7I8
— Daiki Ishida (@ishida1897) 2024年6月26日
会場内にはメインステージのほかに、 Bar やセッションブースがあり、軽食を楽しみながら参加者同士で交流しました。
Figma Developer Advocate の方々が GitHub のデザインシステム「Primer」のデザインデータとコードを同期させたようで、私はそのデモデータを見せてもらいつつ Code Connect のレクチャーを受けました。また私が開発中のプラグインも見ていただき、いくつかフィードバックをいただきました！
日本ではなかなか会うことのできない Figma Developer Advocate の方や GitHub の方々と直接コミュニケーションが取れたのも、このカンファレンスならではの貴重な体験でした。
💡 サンフランシスコでの困りごとと現地の雰囲気
来年 Config に参加される方向けに、海外初心者である私が現地で困ったことと、サンフランシスコの雰囲気を記載しました。
空港での荷物受け取り
サンフランシスコに到着後、飛行機を降りてまず入国審査を受けます。入国審査後、空港に預けた荷物を受け取ることができます。
私は入国審査の列に並びながら、預けたスーツケースの受け取り場所がわからなくて結構焦ってました。
Uber のピックアップポイント
サンフランシスコ到着後、Uber でホテルに向かう際、ピックアップポイントがわからず少し焦りました。ピックアップポイントは到着階（2階）ではなく、出発階（3階）にあり、道路を渡ったところの Zone 14 で乗りました。ただし、場所は変更になる可能性もありますのでご注意ください。
ホテルのシャンプー&ボディウォッシュが空
Config 初日の朝、ホテルのシャンプーとボディウォッシュが空っぽであることに気付きました。スーパーはまだ開いていなかったため、仕方なくそのままシャワーを浴び、フロントに報告しました。結果的にその日のうちに補充されましたが、念のため予備のシャンプー&ボディウォッシュを持参することをおすすめします。
サンフランシスコの治安
多くの情報通り、サンフランシスコの治安はあまり良くないと感じました。路地にはホームレスの方が多く、歩道にホームレスの糞が落ちていることもありました。夜間や人通りが少ない場所では足元に注意し、慎重に行動することが重要です。
ただ、 Figma Japan の方によると、サンフランシスコの治安は年々改善されてきているとのことですので、来年は今年よりもさらに良くなっているかもしれませんね！
日照時間
この時期のサンフランシスコは日照時間が伸びており、20時30分でも明るかったです。しかし、21時を過ぎると急に暗くなるので、この変わりやすい時間帯に行動する際は気を付けましょう。
上記画像は GitHub イベント後に撮影した、20時30分頃の様子です。
✨ さいごに
今回、初海外イベント参加だっため、不安なことも多々ありましたが、海外のクリエイターの方々と交流することができ、その熱量に触れられたのは本当に素晴らしい体験でした。
また、日本からも多くのデザイナーが参加しており、普段イベントでお会いする方や初めてお会いする方々と一緒に食事をしながらリリース内容について話し合えたこともあって、非常に充実した時間となりました。
何より、 Figma Japan の方々の手厚いサポートのお陰で、現地でも安心して過ごすことができました。オフィスツアーやディナーにも参加させていただき、貴重な機会を提供していただいたことに誠に感謝しております。ありがとうございました。
今回私は、社内のカンファレンス参加支援制度と呼ばれる福利厚生制度を用いて参加しました。カンファレンス参加費用をまるっと会社が負担してくれる素晴らしい制度です！
DMM には他にも素敵な開発者を支援する福利厚生制度がありますので、ご興味のある方はご覧ください。
DMM Tech Empowerment -エンジニア・デザイナーのためのサポート制度パッケージを公開！
🎬 おまけ
サンフランシスコ最終日にて Waymo 初めて乗ってみました！
— Daiki Ishida (@ishida1897) 2024年6月28日
人が出てきたらきちんと止まるし、安全運転でめちゃくちゃ乗り心地良かったです🙆♂️ pic.twitter.com/6Z9WRPFyY2
