世界最速?Adobe XD、Flutterをサポートしたので日本語で解説してみた

Adobe XD

概要

Adobe XDFlutterをサポートしたみたいなので触ってみました。

Announcing Adobe XD support for Flutter
Create in XD and export to working Flutter code

導入方法を紹介しようと思います。

すごい簡単でした!

Adobe XDでFlutterプラグインの追加

プラグイン > プラグインを見つける…を選択

スクリーンショット 2020-05-14 1.08.39.png

「Flutter」と検索

スクリーンショット 2020-05-14 1.09.11.png

「XD to Flutter Plugin」のインストール

スクリーンショット 2020-05-14 1.09.22.png

UI Panelの表示

XDの再起動は必要ありません。

スクリーンショット 2020-05-14 1.09.40.png

Flutterでプラグインの追加

adobe_xdをインストールします。

以上で設定は終わりです。

単一のエレメントを吐き出す場合

吐き出したいオブジェクトを選択します。
そうすると、UI Panelが以下の様な状態になるはずです。

スクリーンショット 2020-05-14 1.15.04.png

Copy Selectedを選択

そうする事で、クリップボード上にContainerなどがコピーされている状態になるので対象のファイルにペーストして使用します。

Container(
  width: 320.0,
  height: 89.0,
  decoration: BoxDecoration(
    color: const Color(0xff73eadc),
    border: Border.all(width: 1.0, color: const Color(0xffedc69e)),
  ),
);

ちゃんとconstなどにも対応していて良い感じです。

アートボードを吐き出す場合

全てを吐き出したい場合は、全てのオブジェクトが選択されていない状態にします。
すると、UI Panelは以下の様になっているはずです。

スクリーンショット 2020-05-14 1.14.56.png

以下を設定します。

FLUTTER PROJECT

プロジェクトのルートパスを設定します。libフォルダがあるフォルダですね。

CODE PATH

lib以外の名前にしている場合等に必要だと思います。

IMAGE PATH

画像を保存しているパスを設定します。

WIDGET_NAME_PREFIX

吐き出されるdartファイルのプレフィックスです。

例えば、 FLUTTER PROJECTを設定している状態でExport All Widgetsを選択すると、
設定したプロジェクトのlibフォルダ内にファイルが吐き出されているはずです。

最後に

こちらの機能を利用すれば、UIにかける時間をかなり短縮でき、ロジック部分に時間をかける事ができそうですね。誰かのお役に立てば。

Twitterフォローお願いします

「次回以降も記事を読んでみたい!」
「この辺分からなかったから質問したい!」

そんな時は、是非@daiki1003のフォローお願いします♪

コメント

タイトルとURLをコピーしました