UIデザインガイドラインをAdobeXDからFigmaに移行した私の奮闘記録 ②移行作業編 （後半パート）
移行作業編の後半パートです。
前半パートでは、どんな状態であれば移行できていると言えるのかを定義し、そこから移行するデータと何の作業が必要なのかを明確にしていきました。
今回は本シリーズのメインである、実際にXDからfigmaに移行していくお話しとなります。
移行作業全体の流れ
figma移行作業編は上図の通り、約４ヶ月間にわたる取り組みです。
前半パートでは移行作業においてどんな状態を目指していくのか、大きく３段階に切り分けました。
レベル1：デザイナーのみ作業可能な状態
レベル2：サポートありなら非デザイナーでも作業可能な状態
レベル3：非デザイナーでも作業可能＋業務効率が継続的に上がる状態
後半パートでは
・XDとfigmaの違いによる移行の注意点
・レベル1の状態を目指し、UIコンポーネントを移行する
について、お話ししていきます。
1.どんな移行方法で進めるのか試行錯誤してみる
まずは、どうすればXDからfigmaに適切なデータとして移行できるのか色々試してみました。
方法1：XDから書き出したSVGデータを読み込ませてみる
XDからSVGデータを書き出し、figmaに読み込ませてみます。
figmaの仕様に当てはまるようにデータがインポートができれば最高なのですが、結果的にこの方法は上手くいきませんでした。
例えば以下のような3つの問題がありました。
問題1：XDの不要なパーツを除く手間が発生する
例えばボタンを１個作るとするなら、最低限必要なパーツとしては
XDの場合→テキストと四角い図形
figmaの場合→テキストのみ
といった違いがあります。
figmaはテキストのパーツだけあれば周りの余白や背景色を設定できるため、これだけでボタンが完成します。そのため、XDに元々あった四角形のパーツは移行時に不要なので削除する手間が発生します。
問題2：コンポーネント情報が消滅し、1から作り直さないといけない
XDで作られたUIコンポーネントはグループ化したパーツ群に変換されます。
一応XDとfigmaどちらにも「コンポーネント」という概念はありますが、
仕様の違いもあり、そのままコンポーネントとして引き継ぎができないようです。
「figmaで再度コンポーネント化すれば良いのでは？」
と思いますが、そんな単純な話ではないようです。
先ほど挙げた背景パーツを取り除いたり、オートレイアウト機能を使ってfigma仕様に整えていく必要があり、コンポーネント化するまでにたくさんの手間がかかります。
問題3：角丸情報がなくなっている
XDで角を丸くした四角形をfigmaに読み込ませると、
見た目は角が丸くなっているものの、角丸の設定では0pxになってしまいます。
角丸の設定をしても適切な角丸にならないので、figmaで図形を作り直す必要があります。
結論、この方法ではデータが扱えない状態になるので却下しました。
他の方法を探ってみます。
方法2：プラグインを使う
figmaはプラグインが充実していて、今回の移行に使えそうなプラグインもありました。
その名も「Convertify Sketch/Adobe/Google」というプラグインです。
このプラグインは、XDファイルをドラッグするだけで自動的にfigma用のデータに変換してくれます。（無課金だと10ファイルまで変換してくれます）
インポートしてみると、ちゃんとコンポーネント化されたまま移行できました。図形の角丸情報も引き継がれています（図の赤枠）。
パーツ以外の情報も引き継ぐことができるようです。
例えば、よく使うカラー（図の赤枠）を登録したXDがあった場合、
プラグインで移行してみると、
figma上でもスタイルとしてカラー情報を引き継いでくれます。
このプラグインを使えば簡単に移行ができそうですが、データをよく見てみると完全にfigma用のデータに変換されているわけではありませんでした。
問題：コンポーネント内部のデータはfigmaで整えないといけない
コンポーネントの中身は、SVGで読み込んだ時と同様にグループ化したパーツ群になっていました。
オートレイアウト機能などを使ってfigma仕様に整えていく必要があります。
完璧にfigma仕様に変換することは難しいようですね。
XDからfigmaにデータ変換するには課題が多く、手強いと感じます。
結論、プラグインを使う方法はSVGを読み込ませるよりは使えるデータにはなっているので、移行作業に組み込むことにしました。いずれにせよFigma仕様に修正していく作業は発生するものだと割り切ることにしました。
2.結果、UIコンポーネントの移行作業はこの流れに
以上の結果から、私が行った移行手順はこのようになりました。
1.プラグイン「Convertify Sketch/Adobe/Google」でXDファイルをインポートする
一旦XDのデータをfigmaに読み込ませます。
図の赤枠にXDファイルをドラッグし、インポートします。
2.figma仕様のデータに調整していく
インポートしたデータをfigma仕様に変えていきます。
例えばボタンをfigma仕様にする手順は以下のようになりました。
1.背景パーツを削除（上図「長方形4857」のこと）する。
2.コンポーネント化しているフレーム（4つの菱形マークがあるやつ）にオートレイアウトを適用する。
3.フレームに余白や角丸を設定し、ボタンの形を作っていく。
4.塗り色を設定する。
※よく使う色は「スタイル機能」か「バリアブル機能」のどちらかで管理することで、いつでも呼び出せるので便利です。個人的にはバリアブル機能の方が変更に強いデータができるのでおすすめです。
結果的に以下のようなデータになります。
フレームの中に、文字パーツだけが入っている状態です。
3.状態変化などのパターンがあれば、バリアントでまとめる
通常時・ホバー時のようにいくつかパターンがある場合はバリアント機能でまとめていきます。
例えばボタンなら
design：基本、前アイコン、キャンセル
state：default、hover、desabled
といった感じでデザインパターンによって命名し、各パターンのボタンデザインを定義していきます。
こういったパターンの管理はXDには無かったので、正直作成には手間がかかりますが、後の業務での作業効率的なリターンは大きいです。
4.ボタンやフォームなどのカテゴリに分けていく
出来上がったコンポーネントの名称にルールをつけてカテゴリ分けしていきます。
これは今後作業中のファイルからこのコンポーネントを読み込む時に、名前でどんなパーツなのか判断しやすくするためです。
今回私は「カテゴリー番号_カテゴリー名_パーツ名」で命名していきました。
例えばチェックボックスやラジオボタンは
「03_radio_check_パーツ名」で、パーツ名にはそれぞれのコンポーネント名が入ります。
さらに良い命名規則や管理方法がありそうですが一旦これでいきます。
ここまでの作業をひたすら手を動かしてコンポーネントを作成していきました。
作成したコンポーネントは、無事に別の作業ファイルからもライブラリ機能を使って読み込むことができました。これでfigmaでUI作成業務ができそうです。
3.移行して気づいたfigmaの良いところ２つ
1.バリアント機能で画面の総作成数が大幅減
figmaは1つのコンポーネントの中に複数パターンのコンポーネントを格納できるので、プルダウンの開閉やチェックボックスのON/OFFを１画面だけで再現できます。
これによってXDと比べて画面の作成数が大幅に減りました。
従来のXDだと、例えばトグルボタンでON/OFFの動きを再現しようとすると、以下のように画面A・Bの２つを作る必要がありました。
figmaではその動きをコンポーネントのバリアント機能によって設定できるので、以下のように画面Aのみでその動きを表現できるということです。
2.よく使う数値を保存することでUIの統一ルールを強固に
画面を作成する時に、よく使う数値ってあると思います。
例えば角丸は5px、モーダルの外側の余白が20pxだったり。
UIルール上決まっている数値があれば、バリアブル機能を使ってその数値を保存し、いつでも呼び出せるように設定することもできます。
設定は以下のような手順で行います。
①バリアブルからよく使う数値と、どこに使うものなのか名前をつけて関連付けます。
②角丸の数字であれば角丸の項目で六角形のアイコンを押し、バリアブルで登録した設定を適用します。
このようにUIルールをあらかじめ設定して適用することができるので、誰でも正しいUIルールに則ったデータ作成が可能ですし、UIルールを細かく覚える必要がないため、属人化を防ぐことができそうです。
[余談]よく使うパーツ集を作ったらさらに効率アップした
無事にコンポーネントを流用しながら画面を作成できる環境になったのですが、一から画面を構成するには細かいパーツを組み合わせるための作業が発生し、ここに工数がかかるのがネックでした。
そこで、「よく使うパーツ集」を作りました。
モーダル画面や設定画面など、パーツを組み合わせた画面をあらかじめ作っておくことで、作業効率を格段に上げることができました。おすすめです。
また、このパーツ集の作成にはチームメンバーにも手伝ってもらうことでfigmaに慣れていただきました。
本来ならXDの時でもできた取り組みなのですが、この機会にやって良かったです。
4.最低限のガイドライン整備ができたので次のフェーズへ
整備していくものはまだまだありつつも、これでアドエビスのUI作成業務はfigma上で行うことが可能になりました。
次の第3章ではチームメンバーでもfigmaを触ることができる状態にするため、勉強会を実施していくお話になります。
続きが気になる方はぜひいいねやフォローをお願いいたします。
それでは第3章でお会いしましょう。
▼第3章はこちら
