WebDesigner's Memorandumウェブデザイナーの備忘録

FigmaでAdobe XDやSketchのデータを開く方法

FigmaでAdobe XDやSketchのデータを開く方法

FigmaではAdobe XDデータ(.xdデータ)Sketchデータ(.sketchファイル)をインポートして開けます。

XDデータのインポート

XDのデータはFigmaに対応していないので、少し特殊な方法で持ってくる必要があります。

XD2Sketchを利用する

XD2Sketch

「XD2Sketch」というサイトを利用すると、デザインデータの変換ができます。

ただし有料のサービスで、1ファイルのみであれば$17かかります。
気軽に利用するのは難しいですが、本格的に移行したい場合の選択肢として覚えておくとよさそうです。

SVGでコピーして持ってくる

XDのメニューバーで[ファイル]→[エクスポート]を選択し、「SVGとしてエクスポート」をクリックしてSVGとして書き出します。
あとはそのデータをコピーしてFigmaに直接ペーストして移行します。

ただし、この方法は下記データが引き継げないためインポートというより、使い回しのために一部データを持ってくるときにしか使えません。

  • レイヤー名
  • 画像データ
  • プロトタイプの設定

Sketchデータのインポート

ある程度は問題なくFigmaでも再現されますが、シンボルを作り込んでいたりすると調整が必要な可能性もあります。
できれば、ある程度時間に余裕のあるときに行いましょう。

データのインポート方法はFigmaのホーム画面にある「Import file…」をクリックしてデザインデータを選択するだけです。

Figmaホーム画面「Import file...」

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね