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

クラスメソッドの最新開発ノウハウを学ぶ勉強会 @岡山の登壇資料です。

Transcript

1. Figmaにおける
 デザインのバージョン管理 クボキ ヒロシ 2023/7/29 sat. CX事業本部 Delivery部 デザインチーム Professionalプランでブランチ管理みたいなことをやってみた
2. CX 事業本部 Delivery 部 デザインチーム デザイナー クボキ ヒロシ 2
3. 3 バージョン管理は突然に
4. 4 プロジェクトの引き継ぎ
5. リリースから2年程経過した⾃社サービス 5
6. • 進め⽅はカンバン⽅式 • デザインは機能 （画⾯） ごとにページ分割 • バージョン管理はなんとなく運⽤ • 遷移図はCacooで管理 6
7. デザインの運⽤ 7
8. • 機能ごとにページ内で複製して編集 • リリースされたらマージ • Cacoo （遷移図） を更新 8
9. 9 バージョン管理 V1
10. リリースのタイミングで
 バージョン保存 10 n n n ver 1.23.0 ver 1.22.0 ver 1.21.0 ver 1.21.1 n
11. 11 Version History
12. ⾃動的に履歴が保存される 12 30分のアイドルがあるとスナップショ ッ トを作成
13. 13 任意のタイミングで 名前をつけて保存可能 ⾃動保存版に名前付けも可
14. 14 復元 コメン トは現⾏のまま残る （コメン トは復元不可）
15. 15 特定バージョンから複製 過去の履歴にはアクセス不可 n
16. 16 運⽤してみて感じた問題点
17. 関係性が⾒えづらい 17 問題点
18. • ユーザーストーリーベースのIssue • 変更が複数画⾯に及ぶことがあり忘れる 18
19. Featureが混ざるとページがカオス 19 問題点
20. • 同じ箇所を別Issueで改修 （2段階リリースとかで） • 同ページに同じようなものが増殖してわかりづらい 20
21. Cacoo 21 問題点
22. • なんで分かれてるんや… 22
23. 23 バージョン管理 V2
24. 24 デザイン 遷移図
25. 遷移図もバージョン管理したかった 25 なぜツールが分かれているのか？
26. Team Library周りで問題発⽣…？ 26 Version Historyを使えばいいのでは？
27. 27 Team Libraryを使っていても
 保存時点の状態を保持できる 問題だったことが解消されている…？ n n s l
28. 28 🎉
29. Gitみたいにバージョン管理できないかな？ 29
30. Gitみたいに？ 30
31. ブランチ戦略的なやつ 31 main feature1 feature2
32. おぉっ ？ 32 Branching and merging c Figma Organization
33. ¥6,750 per
 editor/month 33 （⾼い）
34. さすがにち ょ っと使いたい、 
 で試せる⾦額ではなかった 34
35. 35 先⼈の知恵
36. 36 https://note.com/smikami/n/ne2511e1113b3
37. • 最新版をまとめたmainページ • Featureごとにページ作成 （ブランチ） • DevReadyになったら
 FeatureブランチをDevブランチに名前変更 • リリースされたらmainへマージ 37
38. 38 やったこと
39. ページを統合 39 ✅ main Stores Products Campaign Sales Customer
40. プロトタイピングを設定 40 n n n n
41. GitHubのIssueベースで ページを作成 41 g #256 Ultra features 🚧 Ultra features #256 Pages
42. Issueが正なのでDevブランチ運⽤はせず 42
43. 43 • マージ前にPRとしてバージョン保存 • マージ後にさらにバージョン保存 リリースのタイミングでマージ
44. 44 結果
45. 45 ⾒通しがよくなった （エンジニアにも好評） よかった
46. 46 差分取り込みを忘れる 問題点
47. 47 テキストフィールド Feature1 Feature2 テキストフィールド 追加されたセレクトボックス c チェックボックス c チェックボックス a Select box… 追加されたテキストフィールド
48. 遷移図とプロトタイピングの共存が難しい 48 UI Stackをどう表現するか 問題点
49. 49 バージョン管理 V3
50. 50 差分の更新し忘れをどうにかしたい
51. 51 変更箇所をと りあえずコンポーネント化 少し範囲を広げてコンポーネン ト化する
52. 52 テキストフィールド c チェックボックス 追加されたセレクトボックス a Select box… Issue#
53. 53 Booleanプロパティで表⽰を切り替え プロパティ名にIssue#を⼊れ、 mainでは⾮表⽰、 ブランチでは表⽰
54. 54 テキストフィールド c チェックボックス vBoolean: false テキストフィールド c チェックボックス 追加されたセレクトボックス a Select box… ✅ main 🚧 Ultra feature #256 vBoolean: true
55. 55 テキストフィールド c チェックボックス 追加されたセレクトボックス a Select box… 追加されたテキストフィールド v#1 Boolean v#2 Boolean
56. マージされたらコンポーネントを解除 or Booleanプロパティを削除 56
57. 57 結果
58. 58 並⾏作業でも差分取り込みを忘れなくなった よかった
59. 編集はメインコンポーネントをいじらなければならない 59 ブランチページに置いて編集するのが今のところベター？ 課題
60. コンポーネント化したときにコピペを忘れる 60 ステータス違いの画⾯など、 同⼀の箇所で 課題
61. マージは相変わらずめんどい 61 課題
62. 62 採⽤しなかった案
63. 63 ページでバージョン管理
64. • バージョンごとにページを作成する 64
65. • カンバン⽅式のため、 同じ箇所を異なるブランチで
 編集する問題が解決できない （複雑になる） • ページ毎に全画⾯あるため重い 65
66. 66 ファイルでバージョン管理
67. • バージョンごとにファイルを作成する 67
68. • ファイルが無限増殖する • 共有時のURLどうする • 同じ箇所 ‧ 別ブランチ問題 68
69. 69 まとめ
70. Organization Plan使いたい… ！ 70
71. • GitHub Flowをベースにページをブランチとして利⽤ • 差分はコンポーネント化＋Booleanプロパティ • リリースごとにPRとマージの2バージョン保存 71
72. Thank you for listening! 72