すでにお引越しした方、もう少し深く知りたい方は
【チームライブラリ活用編】デザインシステムをFigmaでもっと強くする
もあわせてドウゾ〜

・・・

ノゾエ（@conoito）です。

今日は、みてねのデザインデータが移行されるまでをご紹介します。
移行完了までのイメージを掴むための参考にどうぞ！

・・・

今年3月頃に、SketchからFigmaに、UIまわりのデータの移行を行いました。
あれから半年が経った9月現在、特に大きな問題もなく快適に本運用を行なうことができています。

この記事が、みなさまの快適Figmaライフへの第1歩となりますように、約半月 で行なった、 試験運用 〜 移行完了 するまでの過程を3ステップでご紹介します。

● この記事をお勧めする人

- Figmaへの乗り換えを検討している
　=> Figma、いいですよ！この記事にメリットたくさんまとめたので見ていってください！

- まず何から始めればいいかわからない
　=> 1. ファイルの階層を計画する から読み進めましょう！

- 実際のところ、崩れとかでデータ移行めっちゃ大変そうだなと思う
　=> 大変そうなフェーズは上手くスキップできます！
　　   2. SketchファイルをFigmaに片っ端から放り込む
　　   Q&A 「順次崩れを正していく運用」実際のところどうですか？
　　   をチェケラ！

前提

みてねでは、アプリやWEBのUIデザインはSketchを使って作成しており、
それらも含めたデザインデータ等のほとんどは Git LFS でバージョン管理 していました。

その中でも、Sketchで作られた、アプリやWEBのUIまわりのデータに関しては、下記のようなことが特に起きがちでした。

- ライブラリーやコンポーネント等の同期に時間がかかる
- 作業ごとの Add, Commit, Push が手間
- かと言ってPushをサボると差分が大きくなりコンフリクトが起きる 
- 「Zeplinに上げてください！」「この素材ください！」

そんな中、当時話題で持ちきりだったFigma。

● Figmaのいいところ
- データの同期がリアルタイム
- 変更の差分も全て自動で残る・戻れる
- アカウントがあれば、データを落とさずとも、ブラウザ等からどこでも簡単にデータにアクセス・編集できる
- よって、デザイナー以外でも、Figmaデータから直接レギュレーションや素材のDLを各自で行える

ということは、
「UIまわりをFigmaに移行すれば全部解決するのでは？？？」
となり、完全移行を視野に入れながら
フリープランで試験運用 → 有料プランで移行作業
を行いました。

1. ファイルの階層を計画する

難易度：★★☆☆☆
登場人物
- デザインチームのみんな
- 自分

フリープランの範囲内で機能を試し、ファイルの階層を計画したり、移行に問題がなさそうかどうかを検証します。

● フリープランでできること
- プロジェクトを3つまで作れる
- 編集メンバーを2人まで招待できる

● フリープランでできないこと
- プロジェクトを横断したコンポーネントを追加できない (ライブラリー機能を使えない)

今までは、OSごとのフォルダを作り、機能ごとのフォルダ内に画面ごとのファイルを作成する形で作り分けていました。
しかし、試験的に運用を始める中で、Figmaだと階層に制限がある（ Team / Project / File / Page ）ため、その範囲内で機能するように階層を分ける必要があることがわかりました。

また、試験的に運用を進める中で、フリープランではプロジェクトを横断したコンポーネントを追加できない (ライブラリー機能を使えない) ことがわかりました。

● わかったこと
- 階層に制限がある（ Team / Project / File / Page ）
- フリープランではプロジェクトを横断したコンポーネントを追加できない (ライブラリー機能を使えない)

ライブラリー機能に関しては、プロフェッショナル (Professional  $12/1 Month) 以上のプランにならないと検証しようがありませんでしたので、チームメンバーにもたくさんの協力をいただきつつ、Figmaヘルプを読み込んで、使えそうかどうかを解像度高めに想像して行きました。
特に、ビデオチュートリアルはイメージを掴みやすくて最高に良きです。

Figma / チームライブラリーに関するヘルプ
https://help.figma.com/article/29-team-library

チームライブラリーのチュートリアル
https://www.youtube.com/watch?time_continue=215&v=79T8Q6OBmRk

● チームライブラリーのいいところ
- チーム内であれば誰でもどのプロジェクトでも使用できる
- 親を変更しても、Publishするまで子に影響が及ばない
- Publishの際に変更した点をメモに残せる
- 変更の差分が自動で保存される & 取り戻せる

上記、「めちゃ良では？？？」となったので、有料プランに切り替えることになりました。

2. SketchファイルをFigmaに片っ端から放り込む

難易度：★☆☆☆☆
登場人物
- 主に自分

有料プランに切り替えました。

ここから、計画したファイル階層通りに、Sketchデータを片っ端から放り込んでいきます。

ちなみに、片っ端から放り込んだ後のデータを開いてみると、
わりと普通に崩れていたりします。が、

今すぐ全ての崩れを直すなど無理なことはしません！

画面の改修や、新しい画面を追加するために手を加える必要があった際に、順次崩れを正していく運用を行うことにしました。

移行後、移行元のSketchデータは、更新を行わない前提でアーカイブとして手元に残しておきます。念のためです。
（とはいえ、本運用を行なっている現在、元のSketchデータを辿らないといけない場面はそんなにないですねというのが現状です。正直いらないのかも。）

3. エンジニア・マーケ向けのFigma使い方ページを作る

難易度：★☆☆☆☆
登場人物
- 主に自分

エンジニア向け、マーケ向けと分けて、素材の取り方やレギュレーションの取り方などの使い方がわかるポータルを作成します。

新しいデザインデータを引き渡す際、特にFigmaを初めて使うメンバーには、この使い方ページを共有して、必要に応じて、ご自身でレギュレーション等々を取るようにお願いしています。

アプリに実装される画像素材は、デザイナーが良き具合に圧縮したデータを、デザイナー自身でiOS・Androidに直接Pushしています。

（少し誇張した） チームメンバーの声

🌵「（Add, Commit, Push あたり）今となってはめんどくさい」

🐶「（git + Sketch に）もう戻れないですね」

Q&A

Q. Git LFSはもう使わないの？
A. 使います！ばりばりの現役です〜
今回は主に、WEBやアプリUIのデータをFigmaに移行しました。
それ以外のデザインデータ（IllustratorやPhotoshopで作られたもの）は引き続きバージョン管理が必要ですので、今後もGit LFSを使います。

Q. 移行の作業はいつのタイミングでやってたの？
A. 業務中、隙を見てやってました。
1. ファイルの階層を計画する の作業は「こんな感じ」をチームに共有して、なんとなく合意をもらってから進めました。
何か途方もない膨大な作業というわけではないので、そこまで負担ではなかったです。

Q. 「順次崩れを正していく運用」実際のところどうですか？
A. 一気にやらなかったおかげで、確実に移行を完了させられました。
「今すぐ全ての崩れを直す」前提で移行を進めてしまうと、移行のハードルが鬼にように上がってしまい、おそらく移行そのものを完了させられなかっただろうなと思います。
もちろん、しばらくの間は、新しい案件を進める度に元のUIを綺麗にする作業が度々伴ってしまいます。が、現状、大きな苦痛を生み出している感じは特になさそうです。

Q. コンポーネントを更新した際の、チームライブラリーのPublishのルールどうしてますか？
A. 「hogehogeの変更を行いました。レビューお願いします！ http: // figmahogehoge」
みたいな感じで、変更した箇所のリンクを添付して、メンバーにレビューをお願いしてからPublishするようにしてます。
詳しくは活用編で〜〜！

おわりに

移行に伴い行なった作業は以上になります。
一番考えなければいけないフェーズは 1. ファイルの階層を計画する の部分かもしれないですね。

最初が、肝心！

次回の 【チームライブラリ活用編】デザインシステムをFigmaでもっと強くする では、Figmaに移行してから行なった、コンポーネントやスタイルの整備など、デザインガイドラインに関わることについてお話します。