Convert Adobe XD to Flutter [All errors solved]

Convert Adobe XD to Flutter [All errors solved]

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

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

Errors:

[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)

Warnings:

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.

Back Arrow
Slider Arrow

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.

Previous Article