での
ご相談はこちらからXD から Figma へ変換・インポート方法【簡単】｜Convertify
はじめに
Adobe XD から Figma へ
結論から言うと、Convertify プラグインを使えば非常に簡単に変換できます。
近年、多くのデザイナーが Adobe XD から Figma への移行を進める傾向にあります。
本稿では、筆者が実際に行った XD から Figma への変換作業の手順と注意点を、備忘録としてまとめています。
弊社でも数年前から Figma を使用しており、案件によっては Adobe XD で対応することもありますが、基本的には Figma を採用しています。
今回は、クライアント様から過去に納品したWebデザインのアップデート依頼を受けました。そちらのデザインは XD にて作成されていたため、デザインデータを Figma に移行する必要がありました。
以前は XD から SVG 形式でコピーして対応していましたが、テキストがパス化されたり、改行が崩れるなどの課題がありました。Convertify を使えば、そうした問題もほとんどなく、SVG コピーに比べて圧倒的にスムーズです。
本稿では、主な変換方法として「Convertify プラグイン」での変換方法を取り上げ、その特徴や注意点を紹介しながら、具体的な手順を画像付きで解説していきます。
Convertifyプラグインのインストール方法
ステップ①：
Convertifyをクリックでfigma、プラグインの画面が開かれます。
または、
Figmaを開き、メニューから「プラグイン > プラグインを管理…」を選択します。
検索画面が出てきますので、そこからConvertifyを検索してください。
ステップ②
上記画像の次で試すを押すとデータを変換したい先のファイルを選択できる画面が出てきます。
ステップ③
下記の料金についての画面が出ますが、10回まで無料ですので、気にせず続行を押してください。
インストール画面にて実行を押してください。
Convertifyがインストールされます。
ステップ④
次にXDからFigmaへ変換できるように設定を変更していきます。
下記画面の「Export Figma to Adobe XD」をクリックしてください。
初期の設定は私の場合、FigmaからXDでした、それらをXDからFigmaへのデータ変換へ切り替えます。
下記「Import Adobe XD to Figma [BETA]を選択ください。
ステップ⑤
Adobe XDのファイルを 「Click or drag and drop .xd file」にドラッグ&ドロップします。
XDのファイルをクラウドで管理している方は、XDを開いてローカルへデータ保存など行ってください。
XDからFigmaへデータを変換しています。↓
ステップ⑥
データの確認を行なっていきます。
私の場合は選択したファイルの中に新しいページが作成されていました。
下記、画像内の赤枠です。
慣れてしまえば直ぐにデータ変換が可能です。
お疲れ様でした。
XDからFigmaへ変換・インポートの注意点・確認
変換後に確認すべきポイント
XD ファイルを Figma に変換した後は、見た目が整っているように見えても、細かい部分で崩れや不具合が生じている場合があります。
そのため、変換後のデザインデータをしっかりとチェックすることが非常に重要です。特に、以下の点は優先的に確認しておきたい項目です。
- アートボードとレイアウト構造
アートボードの数や位置関係、要素の配置が XD と同様に再現されているか確認します。
- テキストのスタイル
フォントの種類、サイズ、行間、文字間など、細かいテキストスタイルが崩れていないかをチェックします。
- カラースタイルの反映
ブランドカラーやテーマカラーなど、XD で定義されていたカラースタイルが Figma 上でも正しく反映されているかを確認します。
- コンポーネントとインスタンス
XD で作成したコンポーネントが、Figma 上でもコンポーネントとして認識され、インスタンスとして正しく扱われているかを確認します。
- レイヤー・グループ構造
レイヤーの階層やグループ化が XD と同様に整理されているかをチェックします。
- 画像やアセットの読み込み状況
画像やアイコンなど、すべてのアセットが正しく読み込まれているか、抜け落ちていないか確認します。
- プロトタイプの遷移設定
Convertify を使用した場合、XD のプロトタイプリンク（画面遷移）もある程度引き継がれますが、意図した動きになっているかも念のため確認しましょう。
Convertify は非常に便利なプラグインですが、完璧な変換を保証するものではありません。特にベータ版の段階では、細かな不具合や変換ミスが発生する可能性もあるため、変換後の確認作業は必須といえます。
コンポーネント変換時の注意点と対策
Convertify で変換を行う際に注意したいのが、コンポーネントの扱いです。XD 上でコンポーネント化されていたパーツは、基本的には Figma 上でもコンポーネントとして変換されますが、変換後にインスタンスが表示されなかったり、動作が不安定になることがあります。
これは、XD と Figma でコンポーネントの管理構造が異なることによる仕様差が原因です。
そのため、変換前に XD 上で一時的にコンポーネントを解除しておくことで、変換精度が高まるケースもあります。
また、変換後にすべてのコンポーネントの動作や再利用状況をチェックし、必要に応じて Figma 上で再設定を行うことをおすすめします。完璧な自動変換は難しいため、人の目で確認しながら調整することが、品質維持には不可欠です。
最後まで読んでいただきありがとうございました。