デザインデータのマージ手順の話
こんにちは！
株式会社diniiでUI/UXデザイナーを担当しておりますReiです。
前回、現時点においてdiniiデザイナーチームで行っているデザインデータ管理方法についてご紹介しました！
弊社で管理しているファイル構成は下記のnoteをご覧いただけると嬉しいです！
今回は作成したデザインデータをデザインシステムファイルとマスターデザインファイルへマージする手順をご紹介します。
デザインデータの管理ワークフロー
Jiraでのデザインチケットの起票
現在はJiraでチケットを管理しています。チケットには次の段階で作成するFigmaのデータをリンクさせておくことでデータの管理がしやすくなります。Figmaでの施策ファイルの作成
Jiraで起票したチケットに関する施策ファイルを作成します。デザインレビュー
デザインのレビューを適宜行います。レビューはその施策を管理してるPMと、他のデザイナーのレビュー、VPot（実装観点）、プロダクトオーナーレビューを通しています。FIXページへの移管
完成して開発完了になったデータをFIXページへ移管し、デザインデータのステータスを開発準備完了にします。実装
エンジニアによって実装が行われます。デザインシステムファイル/マスターデザインファイルへのマージ
開発が完了しリリースされた後、デザインデータをデザインシステムファイルとマスターデザインファイルにマージします。 マスターデザインへの反映が主ですが、コンポーネントの変更があった際にはデザインシステムファイルのコンポーネント更新も行います。
FIXしたデザインのマージ準備
FIXしたデザインである事、開発準備完了になった事を分かりやすくする必要があります
FIXしたデザインをセクションで囲み、セクションを選択し、開発準備完了ステータスにします。
そうするとセクションのタイトル右隣に「開発準備完了」というバッジが付きます。これでデザインをFIXするまで全てのワークフローが完了した事を意味し、エンジニアの方への伝達手段にもなります。
FIXしたデザインをマージする
マスターデザインファイルへのマージ
FIXしたデザインをコピーします。
マスターデザインファイルの適切な場所へペーストします。
ここで確認事項！
・各フレーム/レイヤーに命名がされているか
・画面を構成するコンポーネントがデザインシステムファイルのコンポーネントとリンクされているか
デザインシステムファイルへのマージ
コンポーネントの更新がある場合のみデザインシステムファイルへのコンポーネントをマージする作業が必要になります。
新しいコンポーネントをコピーしてデザインシステムファイルへペーストする
新しいコンポーネントを右クリックして「コンポーネントの作成」をクリックし、親コンポーネントとして設定する。
❖ このマークが付いていれば親コンポーネントとして設定ができている状態です。左パネルの「アセット」タブをクリック
📖アイコンをクリック
ライブラリのモーダルウィンドウが開くので「公開」をクリック
変更内容を確認して「公開」をクリックします
更新の反映が終了したらコンポーネントの設定が完了します。
新しいコンポーネントではない場合（既存のコンポーネント変更の場合）
既存のコンポーネント変更の場合はデザインシステムファイルにある親コンポーネントを直接変更します。
既存のコンポーネント変更であるのに、施策ファイルで作成したコンポーネントをペーストし、新しいコンポーネントとして公開してしまうと他ページでリンクされていたものが切れてしまいます。
親コンポーネントを直接変更した際にも公開作業は必要になります。
最後に…
数多くのプロダクトを抱えるdiniiでは、マスターデザインを管理するのはとても容易ではないですが、色々と試行錯誤しながら日々業務を行っています！（僕は整理整頓が好きな性格なのでこういう業務は嫌いではない）
コンポーネントを管理するのはUIを作る上で必須だと思っていますが、マスターデザインまで管理する必要性はあったりなかったり、チーム内でも議論されていますが現時点では管理する方針で取り組みを行っています！
今回記述したマージのお話だけではなく、まだまだ小さいdiniiのデザイナーチームには課題がいくつかあります。
新しい課題が次から次へと出てくるし、クリエイティブな解決策がいつも求められます。ですが、課題にちゃんと向き合い、探求心をくすぐる時間を確保できる。デザイナーがそうそう経験できないチャンスだと私は感じています！
この記事が気に入ったらサポートをしてみませんか？