Desktop application programming workflow using Adobe XD

[defaultdu2niyw56acj]

I am a novice developer and I wanted to know what could be the workflow for creating a Desktop Application using Adobe XD, plugins I could use to export the artboards and the programming language/languages that I could use to write the code in.

[Dan Rodney]

Here's the workflow at a very high level:

• You'd use XD for designing the app.
• You export the graphics from XD for use in the app (no plugins needed for that).
• To build the actual app, you'll need to know the specific platform's coding language (such as Swift for iOS, or Kotlin for Android).

[defaultdu2niyw56acj]

I am trying to create a Desktop Windows application and would like to understand the workflow after having my artboards ready.

[Dan Rodney]

Consider how a building is designed and built:

• An architect designs the aesthetic look of the building. 
• An engineer figures out how to construct that building (so it doesn't collapse) and a set of plans is made on how to construct it.
• Workers build the building from a set of plans.

The visual design used in the planning and construction does not directly create the final building.

XD is for the aesthetic design. It does not aid in the actual creation of the final app, but is the blueprint from which you know what to build. A coder (using any language, for any platform or type of app, website, etc) will have to look at that design and figure out how to use code to build it. There's nothing that special that will connect the design to your code. Once the visual "plan" is created in XD, (once your artboards are designed), you can graphics you will need (icons, etc) but then it's up to the coder to know how to create that design using their coding language.

Think of XD as a planning app that does not directly hook into to final app, but aids in the design process so you know what to build. If you went straight to code, the app could look bad, not work well, etc. You need to plan/design first. I hope that makes the process clearer. 

[defaultdu2niyw56acj]

Agreeing on the facr that XD is a planning app. I  thank you, for your reply, basically I wanted to know the coding platform where I could take my designs forward.

If you could shed some light on which coding platform should I use, is there a way to extract to XAML information from the artboards or maybe if you know some other workflow for creation of a desktop application based on Adobe XD.

Thank you again.

Regards

[michellel42934717]

Hi Dan, 

I would like to know if it is possible to use xD to design the UI then work with .NET backend database? 

I'm exploring if there's a quicker way to revamp my Windows application's UI without changing the backend structure. 

Thank you. 

[defaultdu2niyw56acj]

Hi Dan, 

Based on the same request is it possible to have another alternative to .NET, like writing the backend in Python or Javascript.

[Dan Rodney]

See the other response I just added for more, but because XD does not directly connect to the final app, it does not matter how you build it, or what you're building. XD can design the look and flow of any app or digital product. It's then up to whoever builds it to know how they need to create their app, website, etc.

[defaultdu2niyw56acj]

Thank you for your response.

What I wanted to understand, there is available exporters/plugins for HTML/CSS/JS code with XD for creation of web/android platforms. Also there are enough learning resources for the same. I was wondering if there is or in future be an exporter for python like Tkinter Designer which is readily available for other UI builders like Figma.

[Tate Masi · Accepted solution]

There is not currently a specific XD-to-Python export based plugin in the Adobe CC marketplace today. Something that may be of interest to you in the meantime is our 3rd party integration with VS Code. It isn't quite the same experience as an artboard export that you described, but this integration allows you to pull design token and other key UI data to VS Code for further transformation, including Python. 

See more: https://marketplace.visualstudio.com/items?itemName=Adobe.xd

[michellel42934717]

Thanks Dan. So regardless xD is just handling the design part. 

[Dan Rodney]

I have not used any of the code exporter plugins because based on my past experience with things like those the code the export is not good/professional. It's possible some plugins can aid in specific workflows, but you'd have to see how each of them work, how good their code is, and if they fit into your workflow.

The core XD app doesn't try to really connect that much to code because the needs of coders is so specific and varied (too many languages and other variables). It's more about giving developers the design and design specs they need to turn the design into code.