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
4.5k
Figmaにおけるバージョン管理について
クラスメソッドの最新開発ノウハウを学ぶ勉強会 @岡山の登壇資料です。
littlebusters
August 01, 2023
Tweet
Share
More Decks by littlebusters
See All by littlebusters
使いやすいをデザインする[DevelopersIO 2023 岡山]
littlebusters
2
890
Dataのおさらいと活用方法
littlebusters
0
680
改めてUXデザイン
littlebusters
0
1.3k
作業をスムーズに進めるために知っておくと便利なTips
littlebusters
1
1.9k
Other Decks in Design
See All in Design
生成AIのデザイン活用
asakohs
1
240
Cardápio - Caraguá A Gosto 2024 - De 01/08 a 08/09/2024
caraguatatuba
0
5.1k
Pizza Trail v2
jerfusart
0
100
興味関心と組織とリサーチ #ResearchConf / 20240419
minamitary
1
170
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
5
36k
企業やプロダクトにおける "らしさ"を分析する | UXリサーチャー/デザイナーはもっとAIを触って欲しいシリーズ
iflection
0
240
Ubie Vitalsの取り組み紹介
8845musign
0
640
Blender 4.1 で レッツ Vket Cloud!
kamera25
0
250
私たちが取り組んできたアクセシビリティと これから取り組んでいくアクセシビリティについて
securecat
1
290
なぜデフォルトが青色!? Tint Colorの理由に迫る
akidon0000
0
260
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
fkady
3
860
Emil Storyboards (2024)
abbsant
0
150
Featured
See All Featured
KATA
mclloyd
27
13k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
25
1.3k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
Happy Clients
brianwarren
96
6.6k
Large-scale JavaScript Application Architecture
addyosmani
508
110k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
165
48k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Become a Pro
speakerdeck
PRO
22
4.8k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
Optimising Largest Contentful Paint
csswizardry
28
2.7k
4 Signs Your Business is Dying
shpigford
179
21k
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