$30 off During Our Annual Pro Sale. View Details »

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

Junki Furukawa
November 14, 2024

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

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

Junki Furukawa

November 14, 2024
Tweet

More Decks by Junki Furukawa

Other Decks in Design

Transcript

  1. Index 1. Turtle デザインシステムとは? 2. Figma の Code Connect とは?

    3. Code Connect 導⼊の学び 4. やってみた感想
  2. デザイン原則、デザイントークン、複数のプロダクトで再利⽤可能な アトミックな単位のコンポーネントライブラリをPF内に提供。 What’s Turtle Design System?🐢 はじめに What Why How

    DMMのプラットフォーム領域(ログイン、決済など)で、導⼊を進めている デザインシステム プロダクト間のUIがバラバラであることによるユーザー体験の問題を改善。 同時に、開発者とデザイナーの業務効率を向上させる。
  3. What’s Figma Code Connect? Figma の Code Connect とは? Figma

    のコンポーネントから、コードを取得できるようにする機能。
  4. 1. ちゃんと名前設計する - design a name 2. ちゃんとコンポーネント化する - make

    it a component 3. ちゃんとプロパティをつける - add properties 4. 効率的な開発スタイルをとる - efficient development style Code Connect 導⼊の学び Learn to implement Code Connect
  5. 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.
  6. color = "primary" | "secondary" i. 意味の重複を避ける color = "primary"

    | "secondary" type = "primary" | "secondary" style = "primary” | "secondary" Code Connect 導⼊の学び:ちゃんと名前設計する - design a name 同じ⽬的には、同じ命名を。 Same purpose, same name. ❌ ⭕
  7. 2. ちゃんとコンポーネント化する - make it a component Code Connect 導⼊の学び:

    共通化する。 To be common. ❖ FormText ✨ → Components 🔺 FormText (ただのテキストレイヤー) → planeText ⭕
  8. 4. 効率的な開発スタイル - efficient development style Code Connect 導⼊の学び: 🔗The

    Hot Potato デザイナーとエンジニアが⼀緒に議論する Designers and engineers discussing together.
  9. ☑ 共通の要素がコンポーネント化されている ちゃんと名前設計する 🤞まとめ Code Connect 導⼊の学び: 01 ☑ 意味の重複を避ける

    ☑ 名前空間の明確化 ☑ 同⼀レイヤー名を避ける ちゃんとコンポーネント化する 02 ☑ TextProperty がついている ☑ InstanceProperty がついている ちゃんとプロパティをつける ☑ エンジニアが Figma を使える ☑ 現状の Figma の課題がチームで透明になっている ☑ 同期的に仕事する時間を効果的にとっている ☑ Code Connect することが⽬的になっていない 03 効率的な開発スタイルをとる 04
  10. • ちゃんと価値を届けるための啓蒙 ◦ コンポーネント状態を解除するとエンジニアはコードが⾒られない → デザイナーへの 啓蒙が必要 ◦ dev-mode を使えないとコードが⾒られない→エンジニアへのプロトタイプ検証と導⼊

    状況の調査、導⼊提案 • 費⽤対効果の最適化 ◦ 削減できる⼯数 - (Code Connect 導⼊コスト + 保守コスト) ◦ 保守コストをいかに下げるか ▪ 実装の最新2バージョンまでコードコネクトを対応 ▪ コネクトしやすい構造で作る ▪ 今後の運⽤⽅針を作成 🤨 要検討 やってみた感想