XD to Flutter Pluginを試してみた~Widgetのコード生成~

投稿者: | 2020年5月19日

最近リリースされたAdobe XDのプラグインである「XD to Flutter  Plugin」が話題になっていたので触ってみました。
このXD to Flutterの良いところはXDで作ったデザイン、widgetのコードを自動で生成できる点です。デザインからコーディングまでが一瞬で終わるので、めちゃくちゃ便利ですね。個人開発でも業務でも役に立つこと間違いなしでしょう。今回はwidgetのコード生成の備忘録を書いていこうと思います。

XD to Flutterのインストール

最新版のAdobe XD をインストールしていることが前提です。
まずはプラグインの検索でFlutterを検索、出てきたXD to Flutter Pluginをインストール

xdtoflutter

yamlの設定とか

pubspec.yamlのdependenciesのところにadobe_xdを追加

yaml

assetsのフォルダと、そのなかにimagesのフォルダを作成

yaml

XDで設定

XDでプロジェクトを作ったら、XD to Flutter Pluginを選んで諸々の設定をする。

  1. FLUTTER PROJECT:Flutterのプロジェクトのルートパスを選択
  2. CODE PATH:大体はlibでok
  3. IMAGE PATH:さっき作ったassets/images
  4. WIDGET NAME PREFIX:XD_のままで
  5. SETTINGS:必要に応じてチェックを

XDで作ったWidgetをコードにする

適当にXDでデザインしたらExport All Widgetsを押すと

export

libの中にXD_〇〇〇〇が作成されます。

lib

あとはこれをmain.dartで読み込めば終わり

main

まとめ

神プラグインが爆誕しましたね

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です