元ブログ - 技術は熱いうちに打て！ | 【Flutter】世界最速？Adobe XD、Flutterをサポートしたらしいので日本語で解説してみた

概要

Adobe XDがFlutterをサポートした
みたいなので触ってみました。
導入方法を紹介しようと思います。
すごい簡単でした！

Adobe XDでプラグインの追加

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

「Flutter」と検索

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

UI Panelの表示

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

Flutterでプラグインの追加

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

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

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

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

Copy Selectedを選択

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

sample.dart

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は以下の様になっているはずです。

以下を設定します。

FLUTTER PROJECT

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

CODE PATH

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

IMAGE PATH

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

WIDGET_NAME_PREFIX

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

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

最後に

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

誰かのお役に立てば。

こんな感じで、最近はFlutterの情報を中心にお届けしているので、良ければフォローしていただけると嬉しいです。