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
5.1k
Figmaにおけるバージョン管理について
クラスメソッドの最新開発ノウハウを学ぶ勉強会 @岡山の登壇資料です。
littlebusters
August 01, 2023
Tweet
Share
More Decks by littlebusters
See All by littlebusters
使いやすいをデザインする[DevelopersIO 2023 岡山]
littlebusters
2
940
Dataのおさらいと活用方法
littlebusters
0
700
改めてUXデザイン
littlebusters
0
1.4k
作業をスムーズに進めるために知っておくと便利なTips
littlebusters
1
1.9k
Other Decks in Design
See All in Design
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
1
180
最速[要出典]アクセシビリティチェック
magi1125
2
130
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
1
2.6k
美しいUIを作るために デザイナーが意識している ちょっとした考え方
yuichi_hara7
51
33k
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.2k
Dive Deep into Communication
yomtsu
0
110
TUNAG BOOK 2024
stmn
0
380
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
580
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
400
Design System for training program
mct
0
160
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
450
How to go from research data to insights?
mastervicedesign
0
180
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
290
For a Future-Friendly Web
brad_frost
175
9.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5k
Code Reviewing Like a Champion
maltzj
520
39k
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
A Philosophy of Restraint
colly
203
16k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
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