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…」をクリックしてデザインデータを選択するだけです。



Figmaでカラーやテキストのスタイルをまとめて登録するプラグイン「Styler」
FigmaのVariants機能でコンポーネントの状態を管理する方法
コーダー目線で理解するIllustratorのアピアランス機能
Figmaのプロトタイプ機能の基本|作成したデザインに実際に画面遷移を設定する
個人ブログにコメント欄は必要なのかどうか
Figmaのレイヤー名を一括変更するプラグイン「Rename It」
Sketchのパス周りの基本操作|基本的な描画方法からベクターツールと直線ツールの違いまで
Figmaのバージョン管理機能を使って、デザインの変更点を管理する
Figmaでデザインデータ上の画像を圧縮してファイルサイズを軽くする「Downsize」
Figmaのフレームを一瞬で整列するプラグイン「LilGrid」
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Figmaで企業やサービスのブランドロゴやカラーをすぐ参照できるプラグイン「Brandfetch」
Figmaのサイズの大きい画像を縮小せずにインポートするプラグイン「Insert Big Image」
技術的な文章を書く時の自分ルール
ATOKの単語登録を複数ユーザー辞書に分けて管理する方法
iPhoneで特定のアプリだけ別の言語設定に切り替える方法
iStat Menusの「メモリ」アイコン表示と設定
学生から社会人、自分がWebデザイナーとして社会に出る前に立てた目標
AlfredのTerminal機能を使って、すばやくターミナルコマンドを実行する
JetpackでのError during WebSocket handshakeの解決方法
スクロール時に表示領域に画面がくっつくようになる処理をCSSだけで実現する「scroll-snap」