ニュース

「Adobe XD」のデザインを「Flutter」のコードに変換するプラグインが一般公開

デザインと開発の連携を簡略化することを目指してAdobeとGoogleが協業した成果

「Adobe XD」用のプラグイン「XD to Flutter」

 米Adobeは9月10日(現地時間)、「Adobe XD」用のプラグイン「XD to Flutter」の一般公開を発表した。本プラグインはデザインと開発の連携を簡略化することを目指してAcobeとGoogleが協業した成果で、今年からアーリーアクセス版によりテストが行われてきた。

 「XD to Flutter」はその名の通り、「Adobe XD」で作成したデザインを「Flutter」のアプリコードに変換するプラグインだ。「Flutter」はGoogleが中心になって開発が進められているアプリ開発フレームワークで、プログラミング言語にはJavaScriptの欠点を克服するためにGoogleが開発したオープンソースのプログラミング言語「Dart」が用いられている。Webとモバイル(iOS/Android)の両方に対応したハイパフォーマンスなクロスプラットフォームアプリを手軽に開発できるとして、近年注目を集めている。

 本プラグインを利用するには、まず「Adobe XD」の画面左下にあるプラグインアイコンをクリックする。するとサイドパネルが開くので、そこから「XD to Flutter」を検索してインストールすればよい。“GitHub”からも入手可能で、プラグインのコードに貢献したり、不具合などの問題を報告したり、機能のリクエストを行うことができる。

プラグインサイドパネルから「XD to Flutter」をインストール

 「XD to Flutter」プラグインは、既存の「Flutter」プロジェクトをターゲットにした「Dart」コードを生成できる。「Adobe XD」の単一または複数のレイヤーを「Dart」コードとしてクリップボードへコピーするか、アートボード全体またはコンポーネントを「Flutter」ウィジェットとして書き出すかを選べる。

ウィジェットのエクスポートや選択したレイヤーのコピーが可能