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.4k
Figmaにおけるバージョン管理について
クラスメソッドの最新開発ノウハウを学ぶ勉強会 @岡山の登壇資料です。
littlebusters
August 01, 2023
Tweet
Share
More Decks by littlebusters
See All by littlebusters
使いやすいをデザインする[DevelopersIO 2023 岡山]
littlebusters
2
980
Dataのおさらいと活用方法
littlebusters
0
720
改めてUXデザイン
littlebusters
0
1.4k
作業をスムーズに進めるために知っておくと便利なTips
littlebusters
1
2k
Other Decks in Design
See All in Design
Personal Story Sequence - Vendetta(WIP)
elrns88
0
420
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
190
横断組織デザイナーの働き方
mixi_design
PRO
0
340
プロダクトデザインの「守破離」の「破」について
hayashirine
0
320
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
290
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
600
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
210
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
250
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
290
LayerX DesignersDeck
layerx
PRO
0
2.9k
デザイナーとPMの両ロール_3つのポイント
toy1618
1
190
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
140
Featured
See All Featured
Building Your Own Lightsaber
phodgson
104
6.2k
It's Worth the Effort
3n
184
28k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
Visualization
eitanlees
146
15k
4 Signs Your Business is Dying
shpigford
182
22k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
BBQ
matthewcrist
87
9.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Rails Girls Zürich Keynote
gr2m
94
13k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Why Our Code Smells
bkeepers
PRO
336
57k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
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