XDをFigmaに移行したいけど、めんどくさいのは嫌だ、なるべく忠実にデザインを再現してほしい、あと無料でやりたい
こんな方に、今回はFigmaプラグインである「Convertify」を紹介します。
XDがいよいよ終わりそうということですが、依然Figma移行に足踏みしている方は試して欲しいです。
これを使用したことで、結果的にデザインを8割程度は瞬時に再現できたので、大きく工数削減できました。
SVGをコピペする方法より精度が高く、試すのは一瞬で無料なので、ぜひ。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
Convertifyの使い方
Figmaプラグインからインポートする
まずはFigmaを開き、「プラグイン→プラグインを管理」をクリック。
その後、検索窓にConvertifyを検索し、「Convertify Sketch/Adobe/Google」を「実行」します。
するとこのようなポップアップが出るので、「Import Adobe XD to Figma」をクリック。
その後、XDファイルを「Click or drag and drop .xd file」の部分にドラッグアンドドロップします。
すると読み込みが始まり…
あっという間にFigmaに変換されました！！
元のXDファイルがこれなので、大体再現はできていました。
ただ、詳細を見ると一部崩れがあったり…
フッターが崩れていたりしました。
ただ、インスタンス情報やグループなどの情報は引き継がれていたので、元デザインがしっかりレイヤー分けされていれば問題ないかなと思います(^_^;)
他のデザインでも試行しましたが、こちらは全く問題がなくほとんど完璧に再現されて、神。
Convertifyは無料だが回数制限あり
注意点として無料で変換できるのは10回までなので、気をつけましょう。
とはいえ、こんな優秀なプラグインが無料で10回も試せることに驚きですよ。ありがたい…
この記事では他にFigmaからのコーディング方法なども解説しています。
ご寄付を頂けると今後の更新の励みになります！
