Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


Desktop application programming workflow using Adobe XD

Community Beginner ,
Sep 12, 2021 Sep 12, 2021

Copy link to clipboard

Copied

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.

Views

591

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

New Here , Sep 13, 2021 Sep 13, 2021
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

Likes

Translate

Translate
Adobe Community Professional ,
Sep 12, 2021 Sep 12, 2021

Copy link to clipboard

Copied

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

— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 13, 2021 Sep 13, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 13, 2021 Sep 13, 2021

Copy link to clipboard

Copied

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. 


— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 13, 2021 Sep 13, 2021

Copy link to clipboard

Copied

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

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 13, 2021 Sep 13, 2021

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 13, 2021 Sep 13, 2021

Copy link to clipboard

Copied

Hi Dan, 

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 13, 2021 Sep 13, 2021

Copy link to clipboard

Copied

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.


— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 13, 2021 Sep 13, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 13, 2021 Sep 13, 2021

Copy link to clipboard

Copied

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

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 13, 2021 Sep 13, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 15, 2021 Sep 15, 2021

Copy link to clipboard

Copied

LATEST

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.


— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines