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
3.3k
Figmaにおけるバージョン管理について
クラスメソッドの最新開発ノウハウを学ぶ勉強会 @岡山の登壇資料です。
littlebusters
August 01, 2023
Tweet
Share
More Decks by littlebusters
See All by littlebusters
使いやすいをデザインする[DevelopersIO 2023 岡山]
littlebusters
2
800
Dataのおさらいと活用方法
littlebusters
0
640
改めてUXデザイン
littlebusters
0
1.2k
作業をスムーズに進めるために知っておくと便利なTips
littlebusters
1
1.8k
Other Decks in Design
See All in Design
ポートフォリオ思考を通じたデザイナーキャリアの形成と未来への展望
recruitengineers
PRO
3
2.4k
デザインに関わる全ての人たちでエベレスト登頂を目指すために取り組んでいること
amishiratori
0
610
豊かな自然を守るための、 クラフトビール造りのプロジェクトとデザイン
kazuakiebe
0
450
The Fight
euralisw
0
120
Installing and Running decksh/pdfdeck
ajstarks
1
490
データ活用に強い、伴走型デザインパートナー「DeC」紹介資料
hopin
0
200
Wishing Star Comic
torije
2
1.2k
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
1
260
Information Architects: The Missing Link in Design Systems
soysaucechin
0
120
間違った「問い」を乗り越え ノベルティをプチバズりさせた話
takaikanako
0
1.2k
WHAT ARE ME?
takuro_nakajima
PRO
0
1.4k
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
180
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
11
1k
Making Projects Easy
brettharned
109
5.5k
Docker and Python
trallard
35
2.7k
RailsConf 2023
tenderlove
8
550
Statistics for Hackers
jakevdp
790
220k
Thoughts on Productivity
jonyablonski
60
3.9k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
Debugging Ruby Performance
tmm1
70
11k
Six Lessons from altMBA
skipperchong
22
3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
33
6k
How to train your dragon (web standard)
notwaldorf
75
5.2k
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