XD to Flutter plugin in XD is a powerful, easy-to-use tool to export your stunning Adobe XD designs into clean, functional code for Flutter. You can export reusable widgets or even whole views, as well as copy the code for specific visual components in your design. You have the option to export an artboard, a single drawing, or a component.
Install the XD to Flutter plugin in Adobe XD.
The Flutter exporter plugin installation. Search for Flutter under Plugins > Discover Plugins in Adobe XD. Once installation is done, you can display the UI Panel shown in the screenshot below by choosing Plugins > XD to Flutter > UI Panel.
Integrate Flutter with Adobe XD
Create a new Flutter project with the project name or choose the existing project that you want to load the content into.
Add the adobe_xd package reference in pubspec.yaml
Select a root directory of the flutter project.
Select a path to store the exported .dart file into the project.
Provides a path to the export image assets
WIDGET NAME PREFIX ( optional )
If you want to add a prefix to the exported widget name then define your prefix word.
Select a check as per your requirement.
To know more details about the settings, visit the official documentation page of the adobe_xd plugin.
It is optional to export color and character style assets as a class of static properties (from the XD Assets panel, for example).
Export All Images
By clicking on this button export all the images into the provided IMAGE PATH.
NOTE: image name should be required to export it.
Export All Widgets
It will export all the components and artboards as Flutter widgets that can be used in your project (exported as a .dart file).
Manually export a single artboard or component
You can copy Dart code to your clipboard by selecting any item in XD, click the "Copy Selected" button in the plugin panel (aside from an Artboard or Component). After that, you can immediately paste it into your project.
Images are not exported along with widgets in order to maximize export. It is only possible to export images that have names assigned in the plugin panel. If you want to export all of the images with a name to the Image Path, use the "Export All Images" button after selecting the images you want to export.
NOTE: After exporting assets like image, font and etc. you have to define all assets in pubspec.yaml file of your flutter project.
Enable Hot Reload On Save Watcher
In case after exporting the Flutter code you decide to change the adobe XD prototype for design enhancement, you just need to export them again (Ctrl+Shift+F on Windows) for automatic update flutter code.
While exporting, We have faced some errors and warnings something like these.
[Ico/menu-light] Master component could not be found.(x3)
[status bar/dark] Master component could not be found.(x14)
[icons/dark/back] Master component could not be found.(x10)
Could not find flutter/assets entry in pubspec.yaml for:assets/images/.
[Total Generation]Image does not have a Flutter image name.(x10)
Could not find flutter/fonts entry in pubspec.yaml for:SF UI Text G1.
[Group 156]Transition type not supported:'autoAnimate'.
[Bar]Only inner strokes are supported on rectangles and ellipses.(x90)
[Ellipse 2]Object blur is not supported.(x4)
[Component 27 – 4]Unsupported trigger 'drag'. Only tap is supported.
[Group 157]Transition type not supported:'autoAnimate'.
[Left swipe]Transition type not supported:'autoAnimate'.(x5)
[Right swipe]Transition type not supported:'autoAnimate'.(x5)
[Path 13]Shadows are not supported on shapes.(x4)
[Path 15]Shadows are not supported on shapes.(x4)
[Group 158]Transition type not supported:'autoAnimate'.
[Group 155]Transition type not supported:'autoAnimate'.
Error: “Could not find the flutter/fonts entry in pubspec.yaml for: SF UI Text G1.” & “Could not find flutter/assets entry in pubspec.yaml for: assets/images/.”
Solution: You have to mention all the font family and image assets in the pubspec.yml file.
Error: Master component could not be found.
Solution: “We have ungrouped all the components”, We have used components in the design, for every child component we have one master component, As per the documentation you can use components in XD to Flutter plug-in, but we have faced the issue where we are using both master component and child components but we were ending us by the error shown above. (Sometimes components works sometimes don’t).
Error: “Transition type Not supported - ‘autoAnimate’“ & “Unsupported trigger ‘Drag’“
Solution: We have taken out this transition from the prototype and replaced it with a straightforward transition effect.
Error: “Object blur is not supported“ & “Shadows are not supported on shapes“
Solution: These elements were converted from SVG to High-resolution PNGs and then included in the design.
Error: Only inner strokes are supported on rectangles & ellipses.
Solution: We have used gradients in the inner stroke color for the active bar, We have transformed the bar from outline to flatten object (It will look the same but inner properties are different).
Error: Outlined arrows don’t show properly after exporting the design to code.
Solution: We have transformed the icons from outline stroke to vector (Flatten image).
These issues happened because XD to Flutter plugin not being fully supported to export all the functionality of Adobe XD.
There are some limitations that you have to keep in mind during the design for flutter.
To know more about reading the below documentation.