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