XDDチーム内のFigma勉強会について
📣ご挨拶
こんにちわ、JDDのXDDチームの藤田です。この記事では、三菱UFJフィナンシャル・グループの戦略子会社であるJapan Digital Design（JDD）において、体験デザインを担うExperience Design Div.（XDDチーム）内での勉強会について紹介します。
勉強会の様子
🔔始まった背景と目的
2021/10/27にFigmaから『Interactive Component』が正式リリースされました。Interactive Componentとは、ComponentのVariant内でインタラクションやアニメーションを定義し、プロトタイピングモードでインスタンスに動きをつけることができるものです。再利用可能で共有可能なInteractive Componentを使用してプロトタイプをレベルアップでき、より実際のプロダクトに近い形を簡単に表現できるようになります。
（引用元：Interactive components )
XDDチームでは、Interactive Componentはどのように作ると便利なのか、どう管理すると運用しやすいのか、を探るためにチーム内で毎週1時間、時間を確保し勉強会を行いました。勉強会形式にした目的は以下になります。
デザインの品質向上のために必要なデザイン制作の効率化
知識の共有と習得
多角的視点を持つ
メンバー全員でスキルアップ
メンバーはXDDチーム内の5人です。忙しい時でも半ば強制的に時間を作り、勉強を継続してきました。
⏱タイムスケジュール
1時間の勉強会のスケジュールは大体このような感じで行っています。
課題の共有（5分）
不明点など会話しながら黙々作業。本当にモクモク💭とです（45分）
振り返りディスカッション（10分）
作業を始めると集中してあっという間に時間が経ってしまい、気が付くと1時間終わってしまうのですが、振り返りの時間は必ず取るようにしていました。他の人の振り返りから発見できることも多々あるので、最後の振り返り時間は大切にしています。
❓具体的なお題
Day形式でFigma Communityやネットから題材を選び段階を踏んでレベルを上げていきました。汎用的に使えそうなInteractive Componentを作成しながらfigma特有の癖や出来る工夫を確認し、出来るだけminimumに作る方法を模索してきました。
⭐勉強会で学んだこと・気づき
こちら初期のお題ですが、クリックすると円が縮小、プラスアイコンは右に回転しリリースすると元に戻るInteractive Componentを作ろう！でした。イメージ通りに作るために試行錯誤したプロセスがこちら↓です。
段々とコツを掴めてきて準備した課題をサクサクこなせるようになってきました👍
実際にやった課題リスト
・Iconのon, off
・Button, Chipの状態変化
・FABの拡大縮小
・Switchのon, off
・Progress spinner
・Segmented control
・Selector
・Photo carousel
・Dog iconの拡大縮小
・List itemの追加、削除
📌勉強会の振り返り
半年間週1回のペースの勉強会を振り返ってみてメンバーからは、
👱♂️💬Aさん：決まった時間を確保してチームメンバーと勉強するのは有意義だった。
👩💬Bさん：自分1人だと後回しにしがちなので、強制的に学んで実践する時間取れてよかった。チームでやったおかげで基礎部分でも分かったのが良かった。
👱♀️💬Cさん：各々のやり方が違うので、最後に振返りで作業意図が聞けるのがよかった。
👨🦱💬Dさん：わからなかったことをそのまま放置にしがち復習まで出来ていない…
👩🦳💬Eさん：わからなかった箇所は次の週までに調べて解決策をメンバーに共有すると良さそう
などの声をもらうことができました。
😊今後の活動について
Interactive Componentの他にも、参加しているデザイナーは担当している案件が異なるので、各々の案件の中で制作しているデザインシステムを見せあって議論もしています。現在は勉強会で学んだInteractive Componentに関する知見を踏まえて、社内向けアプリを題材にプロトタイプを制作しております。制作を通じてInteractive Componentの活用方法についてもまとめていきたいと思っています。
終わりに
Japan Digital Designでは、デザイン職を絶賛募集中です。弊社の取り組みにご興味を持っていただけた方は、カジュアルにお話をするだけでも大歓迎ですので、ご連絡いただけますと幸いです。
この記事に関するお問い合わせはこちら
Experience Designer
Fuyuko Fujita（藤田 冬子）