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

FigmaではAdobe XDデータ(.xdデータ)Sketchデータ(.sketchファイル)をインポートして開けます。
XDデータのインポート
XDのデータはFigmaに対応していないので、少し特殊な方法で持ってくる必要があります。
XD2Sketchを利用する

「XD2Sketch」というサイトを利用すると、デザインデータの変換ができます。
ただし有料のサービスで、1ファイルのみであれば$17かかります。
気軽に利用するのは難しいですが、本格的に移行したい場合の選択肢として覚えておくとよさそうです。
SVGでコピーして持ってくる
XDのメニューバーで[ファイル]→[エクスポート]を選択し、「SVGとしてエクスポート」をクリックしてSVGとして書き出します。
あとはそのデータをコピーしてFigmaに直接ペーストして移行します。
ただし、この方法は下記データが引き継げないためインポートというより、使い回しのために一部データを持ってくるときにしか使えません。
- レイヤー名
- 画像データ
- プロトタイプの設定
Sketchデータのインポート
ある程度は問題なくFigmaでも再現されますが、シンボルを作り込んでいたりすると調整が必要な可能性もあります。
できれば、ある程度時間に余裕のあるときに行いましょう。
データのインポート方法はFigmaのホーム画面にある「Import file…」をクリックしてデザインデータを選択するだけです。



Abstractで「Failed to open “○○”」「An unexpected problem occurred, try again?」と表示されるときに確認すること
Figmaのサイズの大きい画像を縮小せずにインポートするプラグイン「Insert Big Image」
Figmaで複数行テキストを1行ずつ分割するプラグイン「Nisa Text Splitter」
個人ブログにコメント欄は必要なのかどうか
Figmaでチーム共有用のメモや注釈素材が使える「Annotation Kit 2.0」
Figmaで画面遷移図やフローチャートをつくるときに線を自動で引いてくれるプラグイン「Autoflow」
今から始めるUIデザインツールSketch入門 Sketchの特徴と使う理由
Figmaで図形の分割をして簡単にレイアウトを作成する拡張機能「Split shape」
Figmaのコメント機能を利用してデザイン上のやり取りを円滑にする
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Visual Studio Codeで読み込んだCSSで設定されているclass名の入力補完をしてくれる拡張機能「HTML CSS Support」
無料のSVGビューワーの「Gapplin」でSVG画像を確認する
Google Chromeのアップデートの影響?MacのGoogle Meetで画面共有ができないときに確認すること
Search Consoleのカバレッジで「送信された URL に noindex タグが追加されています」と表示された時の対処法
Googleアナリティクスのタグが二重で設定されていないか見分ける方法
Sketchの整列をショートカットキーを使ってすばやく行えるようにする方法
iTerm2でさらに細かい機能の設定ができる環境設定の「Advanced」タブ
Android実機で表示しているサイトを、Chrome開発者ツールで開いて検証する方法
Gmailのラベルとフィルタ機能を使ってメールを自動的に振り分ける