Figmaにおけるバージョン管理について

Transcript

1. Figmaにおける

   デザインのバージョン管理
   クボキ ヒロシ
   2023/7/29 sat.
   CX事業本部 Delivery部 デザインチーム
   Professionalプランでブランチ管理みたいなことをやってみた
   

   View Slide

2. CX 事業本部 Delivery 部 デザインチーム
   デザイナー
   クボキ ヒロシ
   2
   

   View Slide

3. 3
   バージョン管理は突然に
   

   View Slide

4. 4
   プロジェクトの引き継ぎ
   

   View Slide

5. リリースから2年程経過した⾃社サービス
   5
   

   View Slide

6. • 進め⽅はカンバン⽅式
   
   • デザインは機能
   （画⾯）
   ごとにページ分割
   
   • バージョン管理はなんとなく運⽤
   
   • 遷移図はCacooで管理
   6
   

   View Slide

7. デザインの運⽤
   7
   

   View Slide

8. • 機能ごとにページ内で複製して編集
   
   • リリースされたらマージ
   
   • Cacoo
   （遷移図）
   を更新
   8
   

   View Slide

9. 9
   バージョン管理 V1
   

   View Slide

10. リリースのタイミングで

    バージョン保存
    10
    n
    n
    n
    ver 1.23.0
    ver 1.22.0
    ver 1.21.0
    ver 1.21.1
    n
    

    View Slide

11. 11
    Version History
    

    View Slide

12. ⾃動的に履歴が保存される
    12
    30分のアイドルがあるとスナップショ
    ッ
    トを作成
    

    View Slide

13. 13
    任意のタイミングで
    
    名前をつけて保存可能
    ⾃動保存版に名前付けも可
    

    View Slide

14. 14
    復元
    コメン
    トは現⾏のまま残る
    （コメン
    トは復元不可）
    

    View Slide

15. 15
    特定バージョンから複製
    過去の履歴にはアクセス不可
    n
    

    View Slide

16. 16
    運⽤してみて感じた問題点
    

    View Slide

17. 関係性が⾒えづらい
    17
    問題点
    

    View Slide

18. • ユーザーストーリーベースのIssue
    
    • 変更が複数画⾯に及ぶことがあり忘れる
    18
    

    View Slide

19. Featureが混ざるとページがカオス
    19
    問題点
    

    View Slide

20. • 同じ箇所を別Issueで改修
    （2段階リリースとかで）
    
    
    • 同ページに同じようなものが増殖してわかりづらい
    20
    

    View Slide

21. Cacoo
    21
    問題点
    

    View Slide

22. • なんで分かれてるんや…
    22
    

    View Slide

23. 23
    バージョン管理 V2
    

    View Slide

24. 24
    デザイン 遷移図
    

    View Slide

25. 遷移図もバージョン管理したかった
    25
    なぜツールが分かれているのか？
    

    View Slide

26. Team Library周りで問題発⽣…？
    26
    Version Historyを使えばいいのでは？
    

    View Slide

27. 27
    Team Libraryを使っていても

    保存時点の状態を保持できる
    問題だったことが解消されている…？
    n
    n
    s
    l
    

    View Slide

28. 28
    🎉
    

    View Slide

29. Gitみたいにバージョン管理できないかな？
    29
    

    View Slide

30. Gitみたいに？
    30
    

    View Slide

31. ブランチ戦略的なやつ
    31
    main feature1 feature2
    

    View Slide

32. おぉっ
    ？
    32
    Branching and merging
    c
    Figma Organization
    

    View Slide

33. ¥6,750 per

    editor/month
    33
    （⾼い）
    

    View Slide

34. さすがにち
    ょ
    っと使いたい、
    

    で試せる⾦額ではなかった
    34
    

    View Slide

35. 35
    先⼈の知恵
    

    View Slide

36. 36
    https://note.com/smikami/n/ne2511e1113b3
    

    View Slide

37. • 最新版をまとめたmainページ
    
    • Featureごとにページ作成
    （ブランチ）
    
    
    • DevReadyになったら

    FeatureブランチをDevブランチに名前変更
    
    • リリースされたらmainへマージ
    37
    

    View Slide

38. 38
    やったこと
    

    View Slide

39. ページを統合
    39
    ✅ main
    Stores
    Products
    Campaign
    Sales
    Customer
    

    View Slide

40. プロトタイピングを設定
    40
    n
    n
    n
    n
    

    View Slide

41. GitHubのIssueベースで
    
    ページを作成
    41
    g #256
    Ultra features
    🚧 Ultra features #256
    Pages
    

    View Slide

42. Issueが正なのでDevブランチ運⽤はせず
    42
    

    View Slide

43. 43
    • マージ前にPRとしてバージョン保存
    
    • マージ後にさらにバージョン保存
    リリースのタイミングでマージ
    

    View Slide

44. 44
    結果
    

    View Slide

45. 45
    ⾒通しがよくなった
    （エンジニアにも好評）
    よかった
    

    View Slide

46. 46
    差分取り込みを忘れる
    問題点
    

    View Slide

47. 47
    テキストフィールド
    Feature1 Feature2
    テキストフィールド
    追加されたセレクトボックス
    c チェックボックス
    c チェックボックス
    a
    Select box…
    追加されたテキストフィールド
    

    View Slide

48. 遷移図とプロトタイピングの共存が難しい
    48
    UI Stackをどう表現するか
    問題点
    

    View Slide

49. 49
    バージョン管理 V3
    

    View Slide

50. 50
    差分の更新し忘れをどうにかしたい
    

    View Slide

51. 51
    変更箇所をと
    りあえずコンポーネント化
    少し範囲を広げてコンポーネン
    ト化する
    

    View Slide

52. 52
    テキストフィールド
    c チェックボックス
    追加されたセレクトボックス
    a
    Select box…
    Issue#
    

    View Slide

53. 53
    Booleanプロパティで表⽰を切り替え
    プロパティ名にIssue#を⼊れ、
    mainでは⾮表⽰、
    ブランチでは表⽰
    

    View Slide

54. 54
    テキストフィールド
    c チェックボックス
    vBoolean: false
    テキストフィールド
    c チェックボックス
    追加されたセレクトボックス
    a
    Select box…
    ✅ main 🚧 Ultra feature #256
    vBoolean: true
    

    View Slide

55. 55
    テキストフィールド
    c チェックボックス
    追加されたセレクトボックス
    a
    Select box…
    追加されたテキストフィールド
    v#1 Boolean
    v#2 Boolean
    

    View Slide

56. マージされたらコンポーネントを解除
    
    or Booleanプロパティを削除
    56
    

    View Slide

57. 57
    結果
    

    View Slide

58. 58
    並⾏作業でも差分取り込みを忘れなくなった
    よかった
    

    View Slide

59. 編集はメインコンポーネントをいじらなければならない
    59
    ブランチページに置いて編集するのが今のところベター？
    課題
    

    View Slide

60. コンポーネント化したときにコピペを忘れる
    60
    ステータス違いの画⾯など、
    同⼀の箇所で
    課題
    

    View Slide

61. マージは相変わらずめんどい
    61
    課題
    

    View Slide

62. 62
    採⽤しなかった案
    

    View Slide

63. 63
    ページでバージョン管理
    

    View Slide

64. • バージョンごとにページを作成する
    64
    

    View Slide

65. • カンバン⽅式のため、
    同じ箇所を異なるブランチで

    編集する問題が解決できない
    （複雑になる）
    
    
    • ページ毎に全画⾯あるため重い
    65
    

    View Slide

66. 66
    ファイルでバージョン管理
    

    View Slide

67. • バージョンごとにファイルを作成する
    67
    

    View Slide

68. • ファイルが無限増殖する
    
    • 共有時のURLどうする
    
    • 同じ箇所
    ‧
    別ブランチ問題
    68
    

    View Slide

69. 69
    まとめ
    

    View Slide

70. Organization Plan使いたい…
    ！
    70
    

    View Slide

71. • GitHub Flowをベースにページをブランチとして利⽤
    
    • 差分はコンポーネント化＋Booleanプロパティ
    
    • リリースごとにPRとマージの2バージョン保存
    71
    

    View Slide

72. Thank you for listening!
    72
    

    View Slide