Figma Code Connect を使ってエンジニアの新しい体験をデリバリする

Design Spectrum Tokyo Meet up 15 で発表した資料です。

Transcript

1. Figma Code Connect を使って エンジニアの新しい体験をデリバリする 合同会社DMM.com｜プラットフォーム開発本部 Developer Productivity Group フロントエンドチーム UIデザイナー兼PO 古川 純希 Spectrum Tokyo Meetup #15
2. Index 1. Turtle デザインシステムとは？ 2. Figma の Code Connect とは？ 3. Code Connect 導⼊の学び 4. やってみた感想
3. デザイン原則、デザイントークン、複数のプロダクトで再利⽤可能な アトミックな単位のコンポーネントライブラリをPF内に提供。 What’s Turtle Design System?🐢 はじめに What Why How DMMのプラットフォーム領域（ログイン、決済など）で、導⼊を進めている デザインシステム プロダクト間のUIがバラバラであることによるユーザー体験の問題を改善。 同時に、開発者とデザイナーの業務効率を向上させる。
4. What’s Figma Code Connect? Figma の Code Connect とは？ Figma のコンポーネントから、コードを取得できるようにする機能。
5. 1. ちゃんと名前設計する - design a name 2. ちゃんとコンポーネント化する - make it a component 3. ちゃんとプロパティをつける - add properties 4. 効率的な開発スタイルをとる - efficient development style Code Connect 導⼊の学び Learn to implement Code Connect
6. 1. ちゃんと名前設計する - design a name Code Connect 導⼊の学び state: figma.enum('state', { // 実装の「state」は Figma の「state」と次のように紐づけてよね 󰠇 error: 'error', disabled: 'disabled', }), ↓ 実装 ↓ Figma → Figma property が実装と意味‧構造ともに⼀致しているとわかりやすくなる It becomes easier to understand if Figma properties match the implementation in terms of meaning and structure.
7. color = "primary" | "secondary" i. 意味の重複を避ける color = "primary" | "secondary" type = "primary" | "secondary" style = "primary” | "secondary" Code Connect 導⼊の学び：ちゃんと名前設計する - design a name 同じ⽬的には、同じ命名を。 Same purpose, same name. ❌ ⭕
8. ii. 名前空間を明確にする Code Connect 導⼊の学び：ちゃんと名前設計する - design a name ⼀⾔でわかる名前を。 A name that can be understood in one word. formText, colorType ❌ text, type ⭕
9. iii. 同⼀レイヤー名を避ける Code Connect 導⼊の学び：ちゃんと名前設計する - design a name 重複のない名前を。 Unique name. step1, step2, step3 ❌ step, step, step ⭕
10. 2. ちゃんとコンポーネント化する - make it a component Code Connect 導⼊の学び： 共通化する。 To be common. ❖ FormText ✨ → Components 🔺 FormText (ただのテキストレイヤー) → planeText ⭕
11. 3. ちゃんとプロパティをつける - add properties Code Connect 導⼊の学び： Text property Instance property ☺
12. 4. 効率的な開発スタイル - efficient development style Code Connect 導⼊の学び： 🔗The Hot Potato デザイナーとエンジニアが⼀緒に議論する Designers and engineers discussing together.
13. ⼀番の学び デザイナーとエンジニアの 脳みそを合体させると、こんなにも早い！！ 👀 Combining the brains of designers and engineers makes things so much faster!
14. ☑ 共通の要素がコンポーネント化されている ちゃんと名前設計する 🤞まとめ Code Connect 導⼊の学び： 01 ☑ 意味の重複を避ける ☑ 名前空間の明確化 ☑ 同⼀レイヤー名を避ける ちゃんとコンポーネント化する 02 ☑ TextProperty がついている ☑ InstanceProperty がついている ちゃんとプロパティをつける ☑ エンジニアが Figma を使える ☑ 現状の Figma の課題がチームで透明になっている ☑ 同期的に仕事する時間を効果的にとっている ☑ Code Connect することが⽬的になっていない 03 効率的な開発スタイルをとる 04
15. Thank you ! 引き続き、新しい取り組みに挑戦し続けます🔥 ありがとうございました！ X: @design_oldriver
16. 😆 やってよかった やってみた感想 • エンジニアの開発体験が結構良くなりそう（効果測定は年度末に実施予定） • よりコラボレーティブな開発スタイルをチームにインストールする機会になった • 最新のコードを使えた⽅が Code Connect に対応してるので、定期的なライブラ リアップデートのモチベーションになるかも（負債蓄積防⽌）
17. • ちゃんと価値を届けるための啓蒙 ◦ コンポーネント状態を解除するとエンジニアはコードが⾒られない → デザイナーへの 啓蒙が必要 ◦ dev-mode を使えないとコードが⾒られない→エンジニアへのプロトタイプ検証と導⼊ 状況の調査、導⼊提案 • 費⽤対効果の最適化 ◦ 削減できる⼯数 - (Code Connect 導⼊コスト + 保守コスト) ◦ 保守コストをいかに下げるか ▪ 実装の最新２バージョンまでコードコネクトを対応 ▪ コネクトしやすい構造で作る ▪ 今後の運⽤⽅針を作成 🤨 要検討 やってみた感想