Adobe XD to Flutter プラグインが一般公開されました!

世界中で何百万人もの開発者がFlutterを使い、美しいクロスプラットフォームのアプリケーションを単一のコードベースから構築しています。Flutterのカスタマイズ可能なウィジェットを使ってインターフェースを構築すれば、アプリケーションの新しい機能をより素早く構築できます。その上、Flutterのウィジェットは、プラットフォーム間の差を吸収し、iOSとAndroidの両方でネイティブと同等のパフォーマンスを提供します。

昨年、デザインと開発の連携を簡略化することを目指したアドビとGoogleの協業について発表しました。デザイナーがボタンをクリックするだけで、Adobe XDのデザインをFlutterコードに変換できる環境の実現がその目標でした。Flutter Interact ‘19のステージではプラグインの初期のプロトタイプを披露し、今年の前半にはプラグインのアーリーアクセス版を公開しました。

そして、いよいよ新しいXD to Flutterプラグインを正式に一般公開することができました。

XDのプラグインマネージャーからXD to Flutterプラグインをインストールすれば、デザインを変換して、Flutterでアプリを開発するために利用可能なコードを生成できます。このプラグインは既に数千のチームによりアプリのデザインと開発に使われており、プラグインの評価リストには数十件の5つ星のレビューが並んでいます。プラグインはオープンソースとしてGithubからも入手可能です。GitHubでは、プラグインのコードに貢献したり、バグなどの問題を報告したり、機能リクエストを提出することもできます。

Adobe XDで選択されたアートボードに対して、Flutterウィジェットとして書き出す際のオプションを提供するプラグインの画面

XD to Flutterプラグインは既存のFlutterプロジェクトで利用できるDartコードを生成します。XD内のひとつあるいは複数のレイヤーをDartコードとしてクリップボードにコピーするか、アートボード全体またはコンポーネントをFlutterウィジェットとして書き出すかを選択できます。XDでデザインを変更したら、プラグインを実行すれば即座にプロジェクトファイルを更新できます。

XD tp Flutterプラグインのインストール方法と使い方についてのより詳しい情報は、GithubページのREADME.mdをご覧ください。

このプラグインを皆さんに使っていただけることにとても興奮しています。また、皆さんがこのプラグインで作成したものを実際に使用できることを楽しみにしています。Flutterチーム、およびプラグインの開発を担当したgskinnerのチームと働けたことは素晴らしい体験でした。

この記事はThe Adobe XD to Flutter plugin is now available(著者:Vijay Vachani)の抄訳です