Generate does not produce any usable output

[justoke]

Maybe my lack of understanding, but when using the Generate button nothing happens. How is it intended to be used - do I have select all the artboards, all objects or what? Where is the Generate output going to - the clipboard does not contain anything from what I can tell.

[TheFe91]

If you click the generate button without selecting anything, the plugin won't export anything.
Based upon what I've understood, this plugin is intended to export single or small groups of objects, and it exports only vectorial stuff (so if you try to export a raster image like a profile picture for example it won't work).
Sincerely some more documentation should be provided, since if you're trying to export something that XdToFlutter can't export, no error is given, leaving the user in a unconvenient Limbo.
By the way, if the export is successful, you'll see a "Copied to clipboard" green message printed just below the Generate button.
Hope this helped!
Regards!

[justoke]

Hi. Thank you for the reply. I notice the following -

Util
If nothing is selected, then a message displays just above the Util section Generate button to "Select something". However, selecting anything - art board or an image/rectangle etc, still does not show Copied to clipboard message. I have tried selecting single objects, all art boards and combinations there of.

Color
The Export color seems to work and shows the "Copied to clipboard" message if something is selected and Export color button is clicked

Global
The Export global seems to work for Colors and Text Styles option in that they show the "Copied to clipboard" message on clicking the Export global button. Nothing happens for Components - I definitely have components on the artboards.

Overall, unfortunately there doesn't seem to be a plugin that can produce anything near useful enough to move an Adobe XD design to Flutter. You basically have to create it from scratch again.

[thize]

First, Thanks for this discussion.

So... this plugin currently only exports a small part of a screen, but I’m working to support all artboard. with the problem of covid I stayed for a long time and I could not continue the project, but I am back.

Currently it serves to export basically containers and texts (with shadow, gradient, etc.) and avoid working with small unnecessary things, it does not take care of the creation of LAYOUT itself, with spacing between widgets, etc., but I am working on that too.

I will add a new issue asking for all the features that would help in creating the layout.

[thize]

#16

[justoke]

Thank you for your efforts on this. I'll be happy to contribute to the feature requests. I appreciate that everything has to start somewhere. While exporting a working Flutter project would be the ideal. But to try replicate a layout 100% would likely be unnecessary as you ultimately would have to keep up with two streams of development and alignment and syncing. All in all a tall order!

A good start, I think, would be to be able to create a page per artboard, a components folder with the components as widgets. If transitions from one artboard to another were in the form of a tap event then this might be possible to produce this. However, I would say that trying to replicate all the Adobe XD transitions for their Flutter equivalents would not be necessary. Flutter has its own animation functionality.

I look forward to the progress on this.

[thize]

What would I define as a widget component? components from Assets Panel only? or would any group of folders be a component? Would all components be a component.dart or would it just be page.dart with the components below?

When exporting an artboard, would it go to the clipboard for Ctrl + V or ask for the project folder to generate a dart file inside the lib?

[justoke]

What would I define as a widget component?
Context would be all things defined on the ASSETS panel
components from Assets Panel only?
Yes
or would any group of folders be a component?
I see the instances of components on artboards - as seen in the Layers view - as references on the corresponding Flutter page to a widgets folder and collection of components defined in .dart files
Would all components be a component.dart or would it just be page.dart with the components below?
All in one file is a start, maybe give an option to have component per file.
When exporting an artboard, would it go to the clipboard for Ctrl + V or ask for the project folder to generate a dart file inside the lib?
Again, this is personal preference. One problem with the clipboard is you have to open some or other editor to view the content and keeping track of where it came from becomes tricky and tedious. Maybe the concept of preview and then output to a folder if you are happy to proceed to outputting the files and folders.
Example folder structure:
ProjectName
-->widgets
---->button.dart
---->banner.dart
---->allcomponents.dart
-->lib
---->artboard1.dart
---->artboard2.dart
---->artboard3.dart

Even if outputting to clipboard only, I think it helps to think of the artboards as the logical container for the components. It should be relatively easy to follow where the widgets and pages relate to the XD design.