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.

Integrate Flutter with Adobe XD

Prerequisite

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

‍

‍FLUTTER PROJECT

• Select a root directory of the flutter project.

CODE PATH

• Select a path to store the exported .dart file into the project.

‍IMAGE PATH

• 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.

SETTINGS

• Select a check as per your requirement.
• To know more details about the settings, visit the official documentation page of the adobe_xd plugin.

EXPORT ASSETS

• 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.

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'.

Solutions

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.

Advantages

• Generate fully null safety! dart code.
• Create separate .dart file for every single widget it's a good thing to improve code readability.
• Good for static page design (whenever we're not using flutter components like page viewer, list view, slider and etc.).
• The prototype provides code with click events.

Disadvantages

• Some features are mostly used in design but XD to Flutter not support these features yet.
• Not used Column and Raw widget for horizontal & vertical alignment.
• Selecting multiple elements and exporting them is not supported in XD to Flutter.
• Not fully support responsiveness due to generating hardcoded values for margin padding height and width.
• Prototype is also worthless.
• To handle back navigation is a little bit tricky, there is no way to handle back navigation in Adobe XD we need to reload the previous page again.
• Whenever we design something for the flutter code designer are bound by limitations.

‍