【イベントレポ】Figma公式イベント Config Watch Partyに参加しました。
本業・副業ともにWEBデザインやコーディングの仕事をしているゆるけー（@yurukei20）です。
今回は、Figma公式イベント「Config Watch Party」に参加したので、登壇内容を中心に感想をnoteにまとめていきます。
インハウスデザイナーが非デザイナーとスムーズに仕事をする秘訣
【登壇者情報】
楽天グループ株式会社 UXデザイナー
木原 朝美さん
登壇資料はTwitter・Figma Communityでも共有されていました。
登壇の最初に、楽天ラクマで実施しているデザインの工程として以下の5ステップを紹介していました。
- キックオフミーティング（PMとスケジュールやら）
- UXリサーチ（アンケート・ユーザーインタビュー）
- 情報設計（ワイヤーフレーム・プロトタイピング・UIデザイン・ユーザビリティテスト）
- 開発（マークアップ・サーバーサイド）
- QAテスト（バグ・不具合などの確認）
デザイナーというと1人で黙々とデザイン制作するイメージがあるかもしれませんが、こういった工程を踏む以上、マネージャーやエンジニア、事業担当の方など多くの関係者との連携が必要になります。
関係者との連携に使っているのがFigmaというところでFigmaの活用事例を紹介されていました。
Figmaの活用事例1）Figmaのコメント機能を使った定例会議でのコミュニケーション
引用：https://www.figma.com/community/file/1105928668665727934
Zoomでの定例会議の際、会議の途中で質問をFigmaのコメント機能でコメントするという事例を紹介。
日本だと話をさえぎるのが失礼という文化があるので、Figmaでコメントして議論ができるのは便利ということでした。
たとえ定例会議のなかで議論できなかったとしても、あとで見返せるため意見交換の場としてFigmaを活用できているとのことで、とても再現性の高い活用方法を紹介されていました。
Figmaの活用事例2）Figma audio chat / cursor chat を使ったデザイン制作のコミュニケーション
引用：https://www.figma.com/community/file/1105928668665727934
他にも、Figmaのaudio chatやcursor chat機能を用いてデザインファイルの共有・相談をしている事例も紹介されていました。
それぞれの機能と活用法としては、以下の通り。
- audio chat：Figmaのなかで少しだけ話したいときに気軽にチャットできる。
- cursor chat：同じファイルを見ている人にリアルタイムでチャットのやり取りができる。
まとめ
最後にまとめとして、Figmaのおすすめ活用法をまとめて登壇を終えました。
- 社内で勉強会を開催するのがおすすめ：チーム全体のレベル感やアウトプットになる。他の職種と話すきっかけにも。
- Figmaファイルを社内関係者と常に共有するのがおすすめ：粗くても全体の認識や共有できていい。
感想
Figmaのコメント機能は使ったことがありましたが、Zoomで議論をする際に活用する方法はとても勉強になるなと思いました。
また、Figma audio chatなどの機能は恥ずかしながら知らず、こういった機能を活用して円滑にエンジニアや事業担当者の方とコミュニケーションが取れるのだと知ることができてよかったです。
プラグインによるFigmaのハックとワークフローの拡張
【登壇者情報】
Ubie株式会社 デザインエンジニア
谷 拓樹さん
登壇者様のスライドはTwitterでも共有されましたので、こちらでも共有します。
Figmaには多くの機能がありますが、さらに機能の拡張性を高める方法としてプラグインがあります。
ただ、Figmaのプラグインはかなり数が多く、自分の理想的な機能がないことがあります。
そんなときの解決策として、プラグインの開発をしようというところでプラグイン開発の方法を紹介されていました。
（具体的なプラグインの開発手法はスライドを見たほうがわかりやすいので割愛します。）
デザイナーはコードを書くべきか
引用：https://www.figma.com/community/file/1105854931068462551
よく議論されるデザイナーはコードを書くべきかという議論。
デザインとコーディング両方を経験したことのメリットとして、コードを書くことでUIデザインスキルが上がったとのこと。
デザインを構造的に理解し組み立てる思考法をコードで書くことで学べ、その経験が、0からコンポーネントなどのデザインを制作する際にも役立ったということでした。
感想
様々なプラグインの機能を、工程ごとに分解することでどうやってプラグインを開発していくかのイメージが掴めました。自分もWEBデザイナー兼WEBディベロッパーとしてFigmaのプラグイン開発もしてみたいなと思います。
開発者に愛されるFigmaのデザインの作り方
【登壇者情報】
株式会社カケハシ フロントエンドデベロッパー、デザイナー
関 憲也さん
登壇者様のスライドはTwitterでも共有されましたので、こちらでも共有します。
フロントエンドエンジニアとしてFigmaを活用しているseyaさんの視点で、エンジニアに愛されるFigmaの使い方について紹介されていました。
はじめに、そもそもデザインの目的として以下の2パターンあるとのこと。
- UIの仮説検証をするデザイン
- エンジニアにデザインの意図を伝えるデザイン
UIの仮説検証をするには、自由にいじって編集・修正が重要。
一方で、エンジニアにデザインの意図を伝えるには、ルールにのっとって構造化されていることが重要。
引用：https://www.figma.com/community/file/1106031529828536618
このデザインの変更の容易さとデザインの意図が伝わる構造化の両方を解決する手法としてFigmaやデザインシステムのTipsを紹介していました。
デザインの意図を伝えるTips
デザインの意図を伝えるTipsとして以下の4点を定義することを紹介されていました。
- 見た目のプロパティ・タイポグラフィ・色
- レイアウト
- レスポンシブ
- 状態・遷移
特にリファクタリングのための負債デーをデザイナーも実施する話はとても参考になりました。
変更を容易にするためのTips
引用：https://www.figma.com/community/file/1106031529828536618
デザインの変更を容易にするTipsとして、デザインのシステム化を紹介していました。
デザインシステムがあるとデザイントークンやコンポーネントを使って一貫性のあるUIがつくれるようになることで、デザインとエンジニアリングの連携をスムーズにされている事例が参考になりました。
デザイントークンはFigma Tokensというプラグインで余白や角丸の細かい部分まで定義し、コンポーネントはエンジニアと一緒に名前・プロパティを擦り合わせていっている話をされており、こちらもとても勉強になる話が聞けました。
まとめ
コミュニケーションでカバーできるならすべてをデザインファイルで表現しようとしなくても大丈夫。
むしろ細かいTips以上にコミュニケーションが重要とのこと。
- デザインをメンテナブルにすることでエンジニアが意図をつかみやすくなる
- コミュニケーションをとってチームに最適なデザインのかたちを探す
感想
デザインとコードの同期は今の職場でも個人の副業でも課題にあったのでとても刺さる内容でした。登壇で紹介されていたFigma Tokensのプラグインも活用してみようと思います。
1つのデザインシステムで複数のブランドを展開する方法
【登壇者情報】
GMOペパボ株式会社 シニアデザイナー
福嶋 瞭さん
登壇者様のスライドはTwitterでも共有されましたので、こちらでも共有します。
1つの企業で複数のブランドを持つ場合、デザインシステムがそれぞれでばらばらになりがち。単一のベースとなるデザインシステムを使うことで、複雑になりがちなデザインシステムを一括で管理している手法を紹介されていました。
複数ブランドに対応する単一のデザインシステム
引用：https://www.figma.com/community/file/1105988473997260994
共通基盤となるデザインシステム「inhouse」。複数ブランドで共通する部分を「inhouse」で体系化されています。
ワークフローとしては、YAMLファイルからStyle Dictionaryに反映させ、Figma Tokensやコードを同期させているという流れ。
まとめ
引用：https://www.figma.com/community/file/1105988473997260994
デザインの意味を定義してデザインやSassを反映することで、複数ブランドを単一のデザインシステムで一括管理を実現。
- ブランドに限らずバリエーションは求められる
- デザインからKey Value を抽出するのが大事
感想
複数ブランドの共通部分を一括で管理するフローはとても勉強になりました。
コードとFigmaの同期は自分もやってみたいなと思いました。
その他イベント
その他というか今回のメインイベントなのですが、Figmaのアップデート情報の発表やFigmaの中の人に質問などもありました。
Dylanのキーノートウォッチパーティー🎉
Figmaのアップデート情報が一気に来ました。パスワード付きの共有やダークモードはTwitterのタイムラインでもかなり盛り上がっていましたねー。
Figmaの中の人に聞く！
また、Figmaの中の人に質問するコーナーでは、リアルFigJamを使っていました。
リアルFigJam。いろいろな人の質問を見るのも楽しかったです。
とっておきFigmaの活用策をシェアしよう！😉
他にも、有志によるFigmaの活用法LTもありました。自分の知らないショートカットやFigmaによるロゴづくりのメリットなど、学びになるものも多かったです。
最後に
参加特典のFigmaグッズ…！ピンバッジがお気に入りです。
登壇内容を中心としたイベントレポートになりましたが、Figmaのアップデート発表もお祭り感があってとても楽しかったです。また、ネットワーキングで様々なデザイナーさんと話せたのもいい経験になりました。
またFigmaのイベントがあればぜひ参加したいと思いますー。
余談ですが、オフラインイベントにあまり馴染みがなかったのもあり、名刺を持ってくるのを忘れていました。😭
次回から気をつけます…。
Discussion