takato(@n8takato)です!
![](https://takatoblog.org/wp-content/uploads/2022/07/man-300x300.png)
FigmaにXDをインポートする方法を知りたい
この記事は上記の課題に向けて作成しています。
デザインツールをXDからFigmaに移行した人が多いかと思います。
その際FigmaにXDのデザインデータをインポートしたくなりますよね?
実はFigmaにXDのデータをインポートするのは簡単です。
この記事ではFigmaにXDをインポートする方法を紹介します。
この記事を読むメリット
- FigmaにXDをインポートする方法を紹介
この記事を書いた人
![](https://takatoblog.org/wp-content/uploads/2022/07/takato.jpg)
この記事を書いた僕はこんな人です!
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
FigmaにXDをインポートする方法
早速FigmaにXDをインポートする方法を紹介します。
FigmaにXDをインポートする手順は下記の通りです。
FigmaにXDをインポートする手順
- プラグインを選択
- 「Convertify」を検索
- 「Convertify」を起動
- インポート形式を選択
- インポートするファイルを選択
プラグインを選択
まず始めに「プラグイン」を選択します。
プラグインは「メインメニュー」から「プラグイン」→「プラグインを管理」を選択します。
![Figmaの「プラグインを管理」の箇所を説明](https://takatoblog.org/wp-content/uploads/2024/07/figma-xd-import01-1024x640.jpg)
「Convertify」を検索
続いて検索ボックスで「Convertify」と検索します。
![Figmaでプラグイン「Convertify」を検索する画面](https://takatoblog.org/wp-content/uploads/2024/07/figma-xd-import02-1-1024x640.jpg)
「Convertify」を起動
検索すると「Convertify」というプラグインが表示されるので、「実行」を選択してくだい。
![Figmaで「Convertify」を起動する画面](https://takatoblog.org/wp-content/uploads/2024/07/figma-xd-import03-1024x640.jpg)
※僕は過去に使用しているため「最近使用したリソース」に表示されています。
すると「Convertify」が起動して下記のようなポップアップが表示されます。
![Figmaで「Convertify」が無事に起動した画面](https://takatoblog.org/wp-content/uploads/2024/07/figma-xd-import06-1024x640.jpg)
インポート形式を選択
続いてインポート形式を選択します。
上のプルダウンを選択し「Import Adobe XD to Figma」を選択します。
![Figmaの「Convertify」で「Import Adobe XD to Figma」を選択する画面](https://takatoblog.org/wp-content/uploads/2024/07/figma-xd-import04-1024x640.jpg)
※現在こちらの機能はβ版なので、「BETA」と記載があります。
インポートするファイルを選択
最後にインポートするXDファイルを選択します。
「Click or drag and drop .xd file」をクリックして、インポートしたいXDファイルを選択します。
![Figmaの「Convertify」で「Click or drag and drop .xd file」を選択する画面](https://takatoblog.org/wp-content/uploads/2024/07/figma-xd-import05-1-1024x640.jpg)
するとXDデータがFigmaにインポートされます。
※希に文字の枠組みなどが崩れます。ただ、簡単に治せる範囲なのでご安心ください。
以上でデータのインポートは完了です。
FigmaにXDをインポートするのは簡単!
この記事ではFigmaにXDをインポートさせる方法を紹介しました。
Figmaは簡単にXDをインポートすることが出来ます。
まだやったことの無い方は実施してみてください。
Figmaに関する記事はこちら
![](https://takatoblog.org/wp-content/uploads/2024/06/figma-vertical-writing-1-300x157.jpg)
![](https://takatoblog.org/wp-content/uploads/2024/08/figma-wavy-lines-300x157.jpg)
![](https://takatoblog.org/wp-content/uploads/2024/07/figma-image-cutout-300x157.jpg)