XD、Figmaのデザインをコードに変換するツールを調べてみた

皆さん、こんにちは。Xイノベーション本部ソフトウェアデザインセンターの陳欣瑩です。
デザイナーが作ったデザインカンプを実現するのが大変！という悩みを抱えているエンジニアは多いでしょう。
フロントエンド開発をラクにするために、世の中にはデザインをコードに変換するdesign-to-code ツールが多く存在しています。
しかしそれらのツールは本当にフロントエンド開発をデザインからシームレスに連携できるでしょうか。
この記事では、Adobe XDやFigmaをHTML、Reactのコードに変換するdesign-to-code ツールを紹介し、使ってみた感想をお伝えします。

コードを生成してみたツールの紹介

Avocode（有料）

Adobe XD, Figma→ CSS, Styled Components, Swift (for iOS), XML (for Android) , React Native
HTMLやReactプロジェクトの生成はできませんが、コンポーネント毎に画像を出力したり、スタイルのコードをコピーできます。
画像やstylesのコードを出力するには、Adobe XDやFigmaのプラグイン経由でAvocodeにデザインファイルをインポートする必要があります。
CSSなどスタイルのコードを取得するには一つ一つのコンポーネントを細かく選択し出力しないといけません。
細かく数字を出力させるのではなく、カラーやフォントのサイズ、余白を参照程度にAvocodeを利用すれば、よりスムーズに実装できるかもしれません。

（ボタンの文字をStyled Componentsに出力させてみました）

Anima（有料）

Adobe XD, Figma→ HTML, React, Vue
Reactの場合はStyled Componentsの形式にも出力できます。
Adobe XD、Figmaのプラグイン経由でデザインファイルをAnimaにインポートできます。その後、コンポーネントやスクリーンを選択して、HTMLファイルやReactプロジェクトに出力できます（FigmaはURLからインポートすることもできます）。
Reactに出力する場合、出力されたプロジェクトはコンポーネント毎にファイルが分かれていて、コードは比較的に読みやすいです。
また、プラグインのメニュー画面からText Inputや簡単なアニメーションの設定もできます。
Text Inputに設定したコンポーネントは、意味のあるテキストボックスとして認識され、<input>に出力されます。
それ以外、ビデオなどの動くコンテンツやGoogle MapsをEmbed APIを使ってプロトタイプに埋め込む機能もありますので、インタラクティブなプロトタイプを作成するには便利かもしれません。

ただし、プラグインから設定できるコンポーネントの種類が少ないのは残念なところです。そのため、ラジオボタンやチェックボックスを意味のあるコンポーネントに出力することができません。つまり、単なる図形として<div>に出力されます。
また、サイトの表示が重く、コードを出力するために何回もリロードしなければならないことがありました。
一方、Adobe XDのComponents states、FigmaのInteractive Component機能への対応はロードマップに書かれているようです。近い将来にラジオボタンやチェックボックスなどの出力もできるかもしれません。

（Text Inputに設定されたテキストボックスは<input>に出力されました）

Fireblade（無料）

Adobe XD→ HTML, React, React Native
XDのプラグインから直接にコードを出力します。出力する前に、デスクトップアプリから画面のプレイビューができます。
また@Buttonや@TextInputをグループオブジェクトの名前に付ければ、一部のインタラクションコンポーネントも出力できます。ただ、命名が足りなかったり間違った場合はエラーになるため、細かく設定しないといけません。
Reactに変換する場合は全てのコンポーネントを一つのファイルに出力するため、読みやすいとは言えません。
無料のため、気軽に試せるのはいいです。
（簡単な入力フォームの画面をReactに出力してみたら、かなり長いコードになりました）

Overlay（有料）

Adobe XD（beta版）, Figma→ HTML, React, Vue
Reactの場合はStyled Componentsの形式にも出力できます。
Figmaから出力したいコンポーネントや画面を選択し、プラグイン経由でOverlayにインポートすると、コードが生成されコピーできます。
ただし、全ての要素をAuto Layoutに設定しないと、出力後の画面のUIが崩れるため、気をつけなといけません。
また、AnimaやFirebladeのようにインタラクションコンポーネントを設定する機能がなく、テキストボックスやチェックボックスは単なる四角形として出力されます。

（テキストボックスは箱状態のまま、<div>に出力されました）

pxcode（無料）

Figma→ HTML, React
pxcodeはコード変換の手順がやや煩雑です。まずFigmaでコンポーネントやスクリーンを選んで、プラグインから.pxcodeのファイルをダウンロードします。その後、ダウンロードしたファイルをpxcodeのサイトにインポートし、コードを出力させます。
こちらも、インタラクションコンポーネントを設定する機能がなく、テキストボックスやチェックボックスは単なる四角形として扱われるのが残念なところです。

（LikeやCommentボタンは全部<div>に出力されました）

他にもこんなツールがありました

Figmaのプラグイン（無料）

Figma to HTML、Figma to React Componentがありました。
Figmaのプラグインから直接にHTMLやReactのコードが生成され、コピーできます。
インタラクションコンポーネントの設定機能がないため、テキストボックスやチェックボックスのコードを生成することはできません（<div>に出力されます）。
無料のため、実装の参考として使えるかもしれないです。

AWS Amplify Studio（有料）

FigmaをReactに変換します。Figmaで作成したコンポーネントをAmplify StudioのUI Libraryに同期し、データとの紐付けもできます。
AWS上でFigmaと連携することで、Web/モバイル開発をローコードで実現できますので、
PoCとして動く画面を爆速で作りたい！のような場合はAmplify Studioを使うと良さそうですね。

Adobe XD extension for VS Code（無料）

VS Codeにインストールできる拡張機能です。
Adobe XD上で登録したデザイントークンをDesign System Package（DSP）というフォーマットで出力し、VSCodeに読み込むことでCSSなどを生成できます。
コンポーネントに対応するスニペットを管理できますが、コンポーネントからソースコードを作成することはできません。

Ploxy

Adobe XD, FigmaをReact Native, Swiftなどに変換できますが、現在はbetaです。

調べてみた感想

Adobe XD、Figmaからテキストボックスやチェックボックスなどインタラクションコンポーネントを作成する場合、それぞれを識別するためのメタデータを簡単に付与する方法がありません。
インタラクションコンポーネントを認識しコードを生成するために、何かの手段（プラグインの機能や、コンポーネントの命名ルールなど）を使ってメタデータを付与するアプローチが必要です。
既存のツールでは、このようなアプローチがあるのはAnima、Firebladeです。どちらも細かい設定をたくさんする必要があり、間違いが起きやすいように感じられました。

また、CSSを出力できるツールは実装の参考程度には利用できますが、pxの数字を一つずつ細かく確認しながら実装するのは大変な作業だと感じられました。

まとめ

Adobe XDやFigmaをHTML、Reactのコードに変換するdesign-to-code ツールを調査してみました。
この記事では、調査対象としてコードを生成してみたツール5つと、簡単に調べてみたツールを5つ紹介しました。
design-to-codeツールだけに頼って、デザインをフロントエンド開発にシームレスに連携するのはまだ難しい世の中ですね。
一方、Adobe XD、Figmaからインタラクションコンポーネントを作成するためのComponents states、Interactive Component機能が最近登場しました。インタラクションコンポーネントを簡単に作成し、メタデータを付与できるデザインツールの進化を期待しています。