イベントレポート：年の瀬に振り返る Figma & React コンポーネントでのサービス開発
＊この記事は スペースマーケットプロダクトチーム Advent Calendar 2019 の12月18日の記事になります。
はじめまして。
スペースマーケットでエンジニアをやっております藤野と申します。
最近はポケモン剣盾の図鑑埋めをしつつ3周目をやっております😌
本記事では、12月10日に開催されたミートアップイベント「年の瀬に振り返る Figma & React コンポーネントでのサービス開発」の当日の様子を紹介したいと思います。
スペースマーケット単独のミートアップは3回目です🎉
前回開催したミートアップ記事は、
エンジニアの荒田が執筆しておりますので、ぜひご覧ください。
それでは、当日の様子をご紹介します！
本イベントについて
はじめに、エンジニアリングマネージャー柿木から弊社サービスの紹介と本イベントテーマの軽い説明がありました。
今回のミートアップはデザイナー＆エンジニア向けに開催し、以下のキーワードを散りばめた内容をテーマになっております。
- デザインシステム
- Atomic Design
- Figma
- React コンポーネント
- CSS in JS
- Storybook
- デザイナーとエンジニアの協業
一番伝えたいことは「デザイナーエンジニア共に積極採用中！」とのこと🔥
アイスブレイク
ご覧の通り、多くのデザイナーさん、エンジニアさんに来ていただきました。せっかく集まっていただけたので良い機会であることと、空気を和らげるためにもと思い、名刺交換でアイスブレイクしていただくことにしました。
皆さん動いてくれるかな〜と少し心配しておりましたが杞憂に過ぎず、ワイワイとお話いただけておりました😊
場があたたまったところで、デザイナー伊東の発表に移ります！
LT1: Figma・Storybookでのコンポーネント運用から考えるデザインシステムとの付き合い方
資料もFigmaで作られています。オシャレですね！
FigmaでのUIコンポーネント運用によるメリット、見えてきた課題からデザインシステムの有用性に気づくまでの流れをスペマの具体例とともに紹介しました。
他社のデザイン原則やデザインシステムを知る機会もなかなかないのでは？と思いますので、ぜひともご覧になっていただけると嬉しいです！
本発表に関してはこちらのブログでより詳しく書かれております👀✨
デザインシステムとStorybook運用のメリットについて詳しく書かれておりますので、発表をご覧になった方もぜひご覧ください！
次はフロントエンドエンジニアの原口による発表です。
LT2: 2019年の Atomic Design コンポーネント設計
弊社のコンポーネント推進PJという企画の中で、コンポーネント周りで抱えていた課題をどう解決に向けて活動したのかを発表しました。
共通コンポーネントの反映によるメリットや快適な運用を目指して策定した規則など、コンポーネント設計にあたって多くの企業がぶつかるであろう内容を具体的に紹介されています。
本発表に関しては、スペースマーケットプロダクトチーム Advent Calendar 2019 の12月23日に投稿される予定になっております。お楽しみに☺️
パネルディスカッション（デザイナー＆エンジニア）
ちょっと休憩を挟んで、パネルディスカッションが始まりました。
デザイナー横井とエンジニア小林によるパネルディスカッション。
デザイナーとエンジニアによるディスカッションという新しい試みです！（ファシリテーター柿木もドキドキの挑戦...！たぶん）
お話した内容は以下の通りです。
1. Atmic Design でのコンポーネント管理を始めた背景
2. デザイナー・エンジニアそれぞれの組織的なコンポーネントの運用課題
3. 「Figma & React コンポーネント」
デザイナー・エンジニアのそれぞれの今後の展望
Atmic Design でのコンポーネント管理を始めた背景
なぜコンポーネント管理をはじめたのか？
デザイナーの回答
当時デザイナーはPhotoshopで運用していたが、PSDデータが152ファイルあり管理が難しくなった。属人化が進み、本人が忘れればそのデザインの存在が忘れられるレベルになってしまった...！
→こちらの記事に詳しく書いてあります👀✨
エンジニアの回答
当時はデザイナーとの距離が遠かったことにより、以下の問題が。
- HTML二重管理
- Designコードと本番コードの乖離
- 最初Reactは個人の決めで適当なコンポーネント粒度に
- HTML事故
デザイナー・エンジニアそれぞれの組織的なコンポーネントの運用課題
エンジニアの回答
-長く運用していることによる世界観のズレ
- 途中から粒度よりも共通化が目的に
- どこで使われているのかわからなくなり、デグレも起きやすくなった
- テストがない...
デザイナーの回答
- StorybookとFigmaの差異
- デザイナーもReactマークアップできて直接Storybookを触ることが原因
- 施策リリース優先のためFigmaがおいてけぼりになりがち
- 合宿で解決✨
- Molecules, Organismsどこまで作るか
- Figma上では基本的に再利用性を最優先してコンポーネント化
- LPのデザインなど再利用しないデザインは基本的にFigmaに作らない
粒度を明確にして管理を楽にすることが目的であり、共通化が目的ではないというお話でした。機能が違えば似たコンポーネントでも別として管理するべきという思想になっております。
「Figma & React コンポーネント」デザイナー・エンジニアのそれぞれの今後の展望
エンジニアの回答
- 堅牢性の向上
- TypeScriptでpropsに型を導入
- テストの追加
- メンテナビリティの向上
- サービスのmonorepo化
- エンジニアの負荷を削減できる戦略（小林個人的に）
- Figmaから自動生成
デザイナーの回答
- サービス・組織の肥大化に向け、デザインシステムを作る
- デザインシステムは
「エンジニアもデザインを理解し、
デザイナーが意図したUIを再現することができるかどうか」が大事
- コミュニケーションコストを下げていきたい
- より明確な基準となるデザインシステムをエンジニアとともに作り上げていきたい
デザイナー、エンジニアそれぞれの価値をよりサービスに反映できる環境を作り上げていきたいという話でした。
質問タイム
参加者の皆さんからSlidoでいただいた質問に回答しました。
たくさんの質問をいただいておりましたが、お時間の都合で絞らせていただきました😢
当日お答えできなかった質問には、後日noteにて回答させていただきます！
懇親会
発表が終わりましたので、いよいよ懇親会です！
懇親会で話しやすいように予めネームホルダーを配布しており、デザイナーさんは赤、エンジニアさんは黄色のネームホルダーをかけてもらっていました。スタッフは青です。
懇親会の様子を見ていると同じ職種で集まるところもあれば、どちらも一緒に話しているところもありました😊
皆さんそれぞれが会社で抱える課題や、個人としてどう学んでいくかといったお話ができて、私自身もとても楽しい時間を過ごさせていただきました！
参加者の皆さまのおかげでとっても素敵な懇親会になりました🥰
本当にありがとうございました！！！
おまけ：スペマフラッグが可愛い。
さいごに
スペースマーケットはデザイナー・エンジニア共に絶賛募集中です！
興味のある方は是非、お話だけでも聞きにきてくださると嬉しいです😊
UI/UXデザイナー
iOSエンジニア
Webエンジニア
フロントエンドエンジニア
明日の Advent Calendar の記事はエンジニア takahashi による「未経験エンジニアが入社３ヶ月でiOSアプリの新機能をリリースした話」です🎉
お楽しみに！！
いただいたサポートは自己研鑽用に使わせていただきますmm