Adobe XDのデザインをネイティブアプリ用のコードに変えるXD to Flutterプラグイン

今日の製品チームは、かつてないほど多くのデバイスやプラットフォームのためにデザインする必要に迫られています。モバイルからWebまでソフトウェア製品が一貫性を持ってシームレスに動作するという期待に応えるために、プラットフォームごと個別にデザインと開発を行わなければならないこともよくあります。製品開発の場では、デザイナーと開発者の間の見た目を完璧にするための終わることのないやり取りに時間が浪費されています。

こうした状況において、Adobe XDの「XD to Flutterプラグイン」を、Flutter Interactの一部としてアナウンスできることに興奮しています。Adobe XDでデザインされたUIからFlutterでアプリ開発を行うためのコードを生成する、新しいXDのプラグインです。このプラグイン開発はアドビとGoogleの協業により行われており、2020年の早い時期に利用可能になる予定です。公開時には、プラグインのコードはFlutterと同様にオープンソースになる予定です。公開前にXD to Flutterプラグインを使いたい人はこちらのページから申し込むことができます。

FlutterはGoogleの開発者向けUIツールキットで、単一のコードベースから、モバイル、Web、デスクトップ向けのネイティブアプリケーションをつくることができます。Flutterがあれば、開発者はカスタマイズ可能なウィジェットを使って素早くインターフェースを構築でき、サポートされるすべてのプラットフォームでネイティブのパフォーマンスを得られます。Flutterは世界中で数百万人の開発者に使われており、表現力が豊かで美しいUIを持つアプリケーションが開発されています。

デザインから実際に動作するコードを生成する

新しいプラグインは、Flutterを使ったアプリ開発の、デザインと開発をつなぐワークフローを簡素化します。それによって、デザインされたユーザー体験と最終的なソフトウェア製品の間にある、当てずっぽうや思い違いを減らすことができます。

プラグインは、XD内のデザイン要素からDartのコードを生成します。生成されたコードはそのままアプリケーションのコードベースに追加することができます。XD内で選択されている要素から、プラグインはコードを生成します。選択する対象は、個別のオブジェクトでも、アートボード全体でも構いません。

XDでデザインを変更したら、プラグインを実行すれば、アプリのコードを即座に更新できます。Flutter extension for Visual Studio CodeのようなFlutterをサポートする開発環境を使用していれば、Flutterのホットリロード機能を使って、実際のデバイス上のシミュレータにアプリを再読み込みし、アプリへの変更をプレビューできます。このようにXDとFlutterを組み合わせれば、デザイン更新をわずか数分で実際に動作するプログラムに反映できるため、必要な判断を素早く行えるようになります。

プラグインを早く入手する手段

XD to Flutterプラグインは、既に公開されている数々のプラグインと同様、Adobe XDのプラグインマネージャーから間もなく入手可能になります。その際、ソースコードはGitHubに公開される予定です。更新情報を受け取り、このプラグインを一番先に使用するユーザーのひとりになりたければ、こちらのページから登録してください。

この記事は“XD to Flutter Plugin: Convert XD Designs into Working Code to Build Native Apps with Google’s Flutter（著者:Vijay Vachani）の抄訳です