こんにちは、デザインチームのスジンです。
今回は、Adobe XDからFigmaへのデザインデータ移行の経験について、お話ししたいと思います。
私は昨年、JCBにUI/UXデザイナーとして入社しました。 当時、社内では主にAdobe XDを使ってデザインをしていましたが、並行して進行していたデザインシステムのプロジェクトではFigmaが使われていました。 そこで、引き継いだプロジェクトにおいてもデザインシステムのようにFigmaを活用できる方が良いと考え、Adobe XDからFigmaへの移行を提案しました。 Figmaにはデザイナーだけでなく、エンジニアの作業効率を大幅に向上させる多くの機能が備わっており、その価値を感じてFigmaへの移行を進めました。
では、具体的な移行プロセスとそのポイントについて詳しくご紹介します。
📋 移行の概要
- デザインの種類: 業務システムのデザイン（PC画面）
- 画面数: 960画面（ビジュアルデザイン、ワイヤーフレーム、デザインドキュメント含む）
- 作業人数: UIデザイナー1名
- 作業時間: 約180時間（46日間）
- 現状: 2024年9月時点で検収中
📉 移行のプロセス
- 移行方法のテストと決定: 最適な移行方法やプラグインを選定
- 作業時間とデザイン画面数の計算: 予想作業量の見積もり
- 移行時に予測される課題の調査: 潜在的な問題点の洗い出し
- 作業画面の優先順位の設定: プロダクトオーナーと連携して優先順位を決定
- Figma環境の構築
- 移行作業開始
- 移行作業完了
- 検収・修正作業
💡 移行時の3つの重要ポイント
移行作業において特に重視した3つのポイントをご紹介します。
1. Figmaの機能を活用するためのデータ移行
デザインはSVGコード、Local styleはConvertifyプラグインで移行
移行方法を選定する前に、いくつかの移行ツールやプラグインをテストしました。例えば、MagicculやFigmaのプラグインなどを試しましたが、単純なコピーではFigmaの機能を活かしきれないという課題がありました。そのため、継続して使用するデザインに関しては、Figmaの特性に合わせて作り直すという選択肢を取りました。Adobe XDからSVGコードをコピーしてFigmaに貼り付ける方法で、デザインデータを手動で移行しました。カラーやフォントスタイルに関しては、Convertifyプラグインを利用して移行を進めました。
※FigmaでSVGコードをコピーして貼り付ける際、下記のショートカットキーを使うと作業スピードがアップします！
- Ungroup：Command+delete
- Rename ：Command+r
- Frame化 ：Command+Option+G
マスターコンポーネントとバリアントの作成
Figmaの機能であるマスターコンポーネントとバリアントを活用して、デザインの一貫性を維持しました。これにより、複数の画面にわたって同じデザイン要素を再利用でき、変更が発生してもマスターコンポーネントを修正するだけで関連するすべての要素が自動的に更新されるようにしました。30個以上のコンポーネントのバリアント作成も必要になるため、事前にバリアントのネーミングルールや順番を統一しておくことで、作業の効率化にもつながりました。
Auto Layoutを活用した画面構成
頻繁に再利用されないワイヤーフレーム画面はそのまま移行しましたが、今後の利用を考えたビジュアルデザイン画面やドキュメントは再制作することにしました。特にAuto Layout機能を活用し、画面内の余白や整列を自動で調整できるように設定することで、後々の修正作業が効率化されるよう工夫しました。
2. Adobe XDとFigma間のデザイン差異を最小限に抑える
Adobe XDとFigma間のline-height不一致問題の解決
Adobe XDとFigmaの違いの1つはline-heightでした。Adobe XDでは設定されたline-heightの値と実際に表示される値が異なっていましたが、Figmaでは設定値が実際のデザインでも一致するように表示されます。幸いなことに、エンジニアは設定された値を元にCSSを作成していたため、Figmaの方が開発に適した値であることが判明しました。これにより、開発との整合性が保たれ、デザイン段階での混乱を最小限に抑えることができました。会社ごとにこの規則は異なるかもしれませんので、実際の開発環境での値を確認することをお勧めします。
3. プロジェクト関係者の負担を最小化
開発者アンケートおよびフィードバックの反映
事前にエンジニアへのアンケートを通じて、既存のデザインデータでの不便な点や改善すべき点を把握しました。 例えば、デザインの背景や変更内容を正確に把握するために、デザインデータだけでなく、様々なコミュニケーションツールやチャンネルを跨いで確認してたというフィードバックがありました。これに対し、Figmaでは開発環境の操作説明だけでなく、デザインの横にメモ欄を設け、作業内容や関連リンクを追加しました。これにより、Figmaがデザイン関連のハブとして機能できるようにしました。
Figma説明会の開催
デザインツールの移行による混乱を最小限に抑えるため、Figmaの使い方説明会を開き、基本的な操作方法や便利な機能を共有しました。この説明会により、プロジェクト関係者のツール移行による適応時間を短縮することに努めました。
⌛️ おわりに
Figmaへの移行は、単なるツールの置き換えではなく、より効率的で協力しやすい環境を構築するための取り組みでした。特に、Auto LayoutやマスターコンポーネントなどのFigmaの機能により、デザインの修正や再作業の負担が大幅に軽減されました。 また、移行後もFigmaの新しい機能やアップデートに対応し、デザインシステムを継続的に最適化していくことが重要です。Figmaは常に進化しているため、移行後の保守と管理にも引き続き注力していきたいと思います。
JCBのデザインチームでは、デザインシステムの構築を進め、その取り組みについての詳細を記事にまとめましたので、ぜひご覧ください。 JCBがゼロから始めたデザインシステム構築
JCBでは我々と一緒に働きたいという人材を募集しています。 詳しい募集要項等については採用ページをご覧下さい。
本文および図表中では、「™」、「®」を明記しておりません。 記載されているロゴ、製品名は各社及び商標権者の登録商標あるいは商標です。
