見出し画像

【3社合同開催】Figmaを活用したエンジニアとデザイナーのコラボレーションに登壇しました!

こんにちは、ビットキーでデザイナーをしている🐰です。
本記事は、6月11日に開催されたFigma社主催のオフラインイベント、「Figmaを活用したエンジニアとデザイナーのコラボレーション」のレポートになります。

イベントには、BASE株式会社様(以下、BASE社)とビットキーメンバーが登壇し、Dev Modeの活用やファイル管理の方法など興味深いセッションが繰り広げられました。

ここからは、当日の様子やビットキーの登壇内容を簡単にご紹介します。



登壇「デザインシステム再構築の取り組み」


はじめに両社によるFigmaにまつわるLTが行われ、ビットキーからは、Figmaを活用したデザインシステム再構築の取り組みについて紹介しました。

タスクと並行しながらガイドラインの整備をしようとして挫折し、新体制を構築した話や、

道半ばで挫折するスライド

実装物のレビュー時にDev Modeのplaygroundを活用することで、スムーズなコミュニケーションを実現している話、

PRのコメントでplaygroundのキャプチャを活用している事例

他にも、絶賛構築中のデザインシステムにまつわる取り組みを事例を交えてお話ししました。

◼︎ variablesとstylesの使い分け
◼︎ プロトタイプの活用
◼︎ タスクやガイドラインの管理方法
◼︎ デザイナーがコードレビューで見ているポイント

発表内容(一部抜粋)

頷きながら聞いてくださる方も多く、多くの開発現場での「あるある」なのだなと感じました。後半のグループディスカッションやネットワーキングの時間でも取り組みについて色々な反応をいただけたので良かったです。

Figmaでのファイル、ライブラリの運用について


BASE社のデザイナーさんと弊社メンバーでFigmaの管理方法についてのトークセッションを行いました。

ビットキーにはいくつかのプロダクトがあるのですが、事業のフェーズや担当する人数、メンバーの属性も異なるため、開発スピードや規模に合わせてFigmaの運用を変えるという方法を取っています。

例えば、以下のようなプロダクトがあったらどうでしょうか。

  • 開発スピード(早) × 担当デザイナー(複数)

  • 開発スピード(遅) × 担当デザイナー(1人)

再現性や拡張性を考えると運用を揃えることも重要ですが、プロダクトの特性上、どうしても無理が出てきてしまうことがあります。

当日は実データも投影しながら、それぞれの運用方法や複数人でデータを管理するにあたって工夫していることをお話ししました。

◼︎ チームやプロジェクトの使い分け
◼︎ ファイルの運用方法
◼︎ ページの命名や使い方
◼︎ ブランチの管理方法

発表内容(一部抜粋)

ビットキーとBASE社で運用が全く異なっている部分もあり、同じ課題に対するアプローチにもチームやプロダクトの色が反映されていてとても興味深い内容でした。他社の運用を解説付きで聞ける機会はなかなかないため、新たな気づきや改善のヒントが得られる貴重なセッションとなりました。

開発現場のリアルと課題


トークセッション後は、来場者を交えたグループディスカッションを行いました。
この時間では、登壇内容についてだけでなく、業務内でのエンジニアの方とのコミュニケーションやデザインシステムという活動を始めるにあたっての周知、浸透はどのように行なっているかなど色々な質問をいただきました。

参加された方々の担当ドメインや事業フェーズ、チームの規模感は様々でしたが、進行状況に違いがあるとはいえ、同じような悩みを抱えていたのが印象的でした。
この場を通じて、プロダクト開発における万能薬はなく、実際には地道で泥くさい改善活動の積み重ねによって成り立っているのだなと改めて感じました。

ビットキーもようやく運用フローが出来上がりつつある段階なので、実際に運用を回していく中で出てきた課題や、私たちなりのアプローチについては、また改めて発信していければと思います。

イベントを終えて


Figmaの運用や開発プロセスをどのように改善するかについて多くの意見が交わされ、学びの多い時間になりました。

私たちもまだまだ試行錯誤している段階ではありますが、発表した内容について「自社でも活かせそうな取り組みがあった」など嬉しいフィードバックをいただくことができ、ホッとしました。
登壇や、トークセッションで発表した内容についてはまた別の記事で詳しくお話しできればと思います。

また、今回は弊社オフィスで開催する初めてのデザインイベントとなりました。
ビットキーのオフィスには、普段私たちが開発している「workhub」が全面導入されており、来場された皆さんにも少しだけプロダクトを体験してもらえるようになっています。

入館イメージ

事前にメール送付したQRを使用して会場に入場できる仕組みなのですが、「スムーズだった」「実際にプロダクトを体験しながら入場することができて良い体験だった」というお声もいただくことができたのでよかったです。

会場となったCONNECTエリア。開放感があり参加者同士が自由に交流できる雰囲気が特徴。

最後に


ビットキーでは定期的に技術イベントやLT会を行っています。
デザインチーム発信でのイベントも企画していきたいと思っているので、興味を持っていただけましたらぜひ、オフィスに遊びにきてください!

プロダクトやデザイナーの働き方に興味がある!という方はぜひカジュアル面談でお話ししましょう。どうぞよろしくお願いします!


\ 記事を書いたメンバー /

🐰
ビットキー2年生。
たまに変なTシャツを着ます。

いいなと思ったら応援しよう!

この記事が参加している募集