Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Figmaにおけるバージョン管理について
Search
littlebusters
August 01, 2023
Design
1
6k
Figmaにおけるバージョン管理について
クラスメソッドの最新開発ノウハウを学ぶ勉強会 @岡山の登壇資料です。
littlebusters
August 01, 2023
Tweet
Share
More Decks by littlebusters
See All by littlebusters
使いやすいをデザインする[DevelopersIO 2023 岡山]
littlebusters
2
1k
Dataのおさらいと活用方法
littlebusters
0
760
改めてUXデザイン
littlebusters
0
1.5k
作業をスムーズに進めるために知っておくと便利なTips
littlebusters
1
2.1k
Other Decks in Design
See All in Design
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
tame
0
260
Ana Cortes Visual Development Portfolio 2025
haruanleb
0
120
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
420
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
310
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
550
harutaka Vision Deck
zenkigenforrecruit
0
250
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
300
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
hiromitsuuuuu
1
620
CMS管理画面のアクセシビリティ
magi1125
8
2.5k
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
160
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
2.7k
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
910
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
The Cult of Friendly URLs
andyhume
79
6.6k
GitHub's CSS Performance
jonrohan
1032
460k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Transcript
Figmaにおける デザインのバージョン管理 クボキ ヒロシ 2023/7/29 sat. CX事業本部 Delivery部 デザインチーム Professionalプランでブランチ管理みたいなことをやってみた
CX 事業本部 Delivery 部 デザインチーム デザイナー クボキ ヒロシ 2
3 バージョン管理は突然に
4 プロジェクトの引き継ぎ
リリースから2年程経過した⾃社サービス 5
• 進め⽅はカンバン⽅式 • デザインは機能 (画⾯) ごとにページ分割 • バージョン管理はなんとなく運⽤ • 遷移図はCacooで管理
6
デザインの運⽤ 7
• 機能ごとにページ内で複製して編集 • リリースされたらマージ • Cacoo (遷移図) を更新 8
9 バージョン管理 V1
リリースのタイミングで バージョン保存 10 n n n ver 1.23.0 ver 1.22.0
ver 1.21.0 ver 1.21.1 n
11 Version History
⾃動的に履歴が保存される 12 30分のアイドルがあるとスナップショ ッ トを作成
13 任意のタイミングで 名前をつけて保存可能 ⾃動保存版に名前付けも可
14 復元 コメン トは現⾏のまま残る (コメン トは復元不可)
15 特定バージョンから複製 過去の履歴にはアクセス不可 n
16 運⽤してみて感じた問題点
関係性が⾒えづらい 17 問題点
• ユーザーストーリーベースのIssue • 変更が複数画⾯に及ぶことがあり忘れる 18
Featureが混ざるとページがカオス 19 問題点
• 同じ箇所を別Issueで改修 (2段階リリースとかで) • 同ページに同じようなものが増殖してわかりづらい 20
Cacoo 21 問題点
• なんで分かれてるんや… 22
23 バージョン管理 V2
24 デザイン 遷移図
遷移図もバージョン管理したかった 25 なぜツールが分かれているのか?
Team Library周りで問題発⽣…? 26 Version Historyを使えばいいのでは?
27 Team Libraryを使っていても 保存時点の状態を保持できる 問題だったことが解消されている…? n n s l
28 🎉
Gitみたいにバージョン管理できないかな? 29
Gitみたいに? 30
ブランチ戦略的なやつ 31 main feature1 feature2
おぉっ ? 32 Branching and merging c Figma Organization
¥6,750 per editor/month 33 (⾼い)
さすがにち ょ っと使いたい、 で試せる⾦額ではなかった 34
35 先⼈の知恵
36 https://note.com/smikami/n/ne2511e1113b3
• 最新版をまとめたmainページ • Featureごとにページ作成 (ブランチ) • DevReadyになったら FeatureブランチをDevブランチに名前変更 • リリースされたらmainへマージ
37
38 やったこと
ページを統合 39 ✅ main Stores Products Campaign Sales Customer
プロトタイピングを設定 40 n n n n
GitHubのIssueベースで ページを作成 41 g #256 Ultra features 🚧 Ultra features
#256 Pages
Issueが正なのでDevブランチ運⽤はせず 42
43 • マージ前にPRとしてバージョン保存 • マージ後にさらにバージョン保存 リリースのタイミングでマージ
44 結果
45 ⾒通しがよくなった (エンジニアにも好評) よかった
46 差分取り込みを忘れる 問題点
47 テキストフィールド Feature1 Feature2 テキストフィールド 追加されたセレクトボックス c チェックボックス c チェックボックス
a Select box… 追加されたテキストフィールド
遷移図とプロトタイピングの共存が難しい 48 UI Stackをどう表現するか 問題点
49 バージョン管理 V3
50 差分の更新し忘れをどうにかしたい
51 変更箇所をと りあえずコンポーネント化 少し範囲を広げてコンポーネン ト化する
52 テキストフィールド c チェックボックス 追加されたセレクトボックス a Select box… Issue#
53 Booleanプロパティで表⽰を切り替え プロパティ名にIssue#を⼊れ、 mainでは⾮表⽰、 ブランチでは表⽰
54 テキストフィールド c チェックボックス vBoolean: false テキストフィールド c チェックボックス 追加されたセレクトボックス
a Select box… ✅ main 🚧 Ultra feature #256 vBoolean: true
55 テキストフィールド c チェックボックス 追加されたセレクトボックス a Select box… 追加されたテキストフィールド v#1
Boolean v#2 Boolean
マージされたらコンポーネントを解除 or Booleanプロパティを削除 56
57 結果
58 並⾏作業でも差分取り込みを忘れなくなった よかった
編集はメインコンポーネントをいじらなければならない 59 ブランチページに置いて編集するのが今のところベター? 課題
コンポーネント化したときにコピペを忘れる 60 ステータス違いの画⾯など、 同⼀の箇所で 課題
マージは相変わらずめんどい 61 課題
62 採⽤しなかった案
63 ページでバージョン管理
• バージョンごとにページを作成する 64
• カンバン⽅式のため、 同じ箇所を異なるブランチで 編集する問題が解決できない (複雑になる) • ページ毎に全画⾯あるため重い 65
66 ファイルでバージョン管理
• バージョンごとにファイルを作成する 67
• ファイルが無限増殖する • 共有時のURLどうする • 同じ箇所 ‧ 別ブランチ問題 68
69 まとめ
Organization Plan使いたい… ! 70
• GitHub Flowをベースにページをブランチとして利⽤ • 差分はコンポーネント化+Booleanプロパティ • リリースごとにPRとマージの2バージョン保存 71
Thank you for listening! 72