Google created ample excitement in the developers community by showing a quick demonstration of Adobe XD design tool announcing their collaboration with adobe to create User Interface towards Flutter’s Idea to provide a rich canvas in creative expression to build Flutter apps close to native-like performance with screen limiting the technical boundaries between developers and designers.
XD to Flutter , an open source plugin is now availed for early access by adobe with the ability to generate dart code from adobe XD designs that can be integrated into Flutter apps . Though still in early stage Designers and developers will need to find a more streamlined workflow to go from design to finished product faster across multiple platforms.
Adobe XD is available on windows and macOS only with a free starter plan to get you started .
Watch the Top Announcement in flutter interact at :
Need For the Resource :
Simplify designer-to-developer workflow
Adobe XD to Flutter is an attempt to simplify the designer to developer workflow by removing Guess work and Errors in User Design process.
Ability to generate working Dart code for the design
- Plugin is able to generate dart code for design elements in Adobe XD that can be directly integrated into your existing application codebase for individual elements or you can export the code for entire artboard from adobe xd using the plugin.
Ability to Make UI Decision Changes
- The ability to export UI designs to Flutter code further reduces the latency between creative ideas and product development,as an artboard adobe XD prototype can be easily converted to a working dart code within minutes.
Exporting Flutter Code Using Adobe XD :
Flutter Code can be easily exported using Adobe xd which provides you the ability to either export an Individual component or Entire widgets .
Add the following package dependency In Your Flutter Code:
:: Add in the dependency at pubspec.yaml manifest file .The package helps in reducing boiler plate in the generated XD code by creating helper functions .
adobe_xd | Flutter Package
Generate code for building apps with Flutter based on your designs in Adobe XD with the “XD to Flutter” plugin. This…pub.dev
Install Flutter Plugin In Adobe XD :
Install Flutter exporter plugin :
Plugins > Discover Plugins and in the search section search XD to flutter
After Plugin Installation you will be able to access the UI panel from wherein exporting will be done by :
Plugins < XD to Flutter < UI Panel
The plugin provides you the ability to either export an Single widget or you can always export the entire adobe XD artboard.
Exporting a Widget
Select the widget that you need to export from the UI Panel by copying it .This copies the dart code to the clipboard which can then be easily exported integrated into your existing flutter project without changing any other files .
Exporting Entire Artboard :
Adobe xd plugin also avail the facility to export the entire artboard consisting the entire projects :
Add the flutter package in the project code from pub.dev .
In the pubspec.yaml add the adobe_xd packages in dependencies section.
Select Plugins < XD to Flutter < Export all widgets from the UI panel .
You can always change the default location of images and dart file from assets/images/ and lib directory of your project respectively
Note : Add the assets/images/ directory in your flutter project and at pubspec.yaml before exporting the code
Enable Hot Reload On Save Watcher
If after exporting the Flutter code you decided to change the adobe xd prototype for design betterment you just need to export them again (Ctrl+Shift+F on Windows) for automatic updation of flutter code .
To avoid re-exporting the widgets everytime you make a change you need to enable the Dart Hot Reload on Save Watcher setting in your IDE that will automatically reload the widgets . See more about Flutter’s hot reload capabilities.
Herewith Is some screenshots of the exported Flutter Code Using Plugin :
XD to Flutter is available now in the Adobe XD Plugin Manager, which includes dozens of plugins and integrations for XD, and is available on Github.
thize/xd-to-flutter
⚠️ If you encounter an issue or have any feedback which you think could improve Plugin, please open an issue here The…github.com
Closing Thoughts
Adobe XD Plugin provide us the facility to quickly make User Interfaces in flutter code from XD which can be termed as a new ways to make Flutter Apps.
Though being still in it’s early access preview there are some limitations as of now (unavailability of responsive layout, sync Issues ) in the plugin which can be seen in the release notes that may likely be shortly improved and will be automatically updated once the new plugin features become available
For more information, visit Adobe’s page for the XD to Flutter plugin
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.
