こんにちは。クライマーの山口です

弊社のwebデザイン制作はAdobe XDからfigmaになり、figmaで制作を進めていたのですが、
figmaはサイトの「動き」の部分をお客さんに見せたい場合、不十分なところがあったので、途中まで作ったfigmaからXDにファイルを変換することにしました。

どんな所が不十分だったかというと、position stickyのようにスクロール途中から固定ができない部分が大きかったです。

今回は無料のプラグインを利用してfigma→XDのファイルを作ります。

---

①このファイルをfigma→XDファイルに変換したいと思います。

②上部のメニュー「Plugins」から「Browse plugins in Community」を選択します。

③こちらのページに移るのでPluginsというタグから検索します。
「Convertify」を検索してください。

④こちらをインストールします。

⑤制作画面に戻り、Pluginsを見ると追加されていますので、選択してください。

⑥こちらの画面から「Convert to Adobe XD」を選択します。

⑦.xdのファイルの準備が完成した。と言っているので、ダウンロードボタンを押します。

⑧好きな場所にダウンロードしてください。

⑨ダウンロードできたので、XDを開きます。
ここからはAdobe XDの画面です。
一見、figmaと同じ様に見えますが、「この文章はダミーです…」の部分が３行から２行になっています。

⑩figmaと同じように見せるために、テキストボックスの縦幅を広げます。

⑪よく見るとボタンの文字も少し上にあがっているので、こちらも微調整します。

以上でfigmaからXDへの移行ができました。

テキストボックスのズレはありますが、基本的には簡単に移行できると感じました。