Skip to main content
Participant
September 13, 2021
Answered

Desktop application programming workflow using Adobe XD

  • September 13, 2021
  • 1 reply
  • 5579 views

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.

    This topic has been closed for replies.
    Correct answer Tate Masi

    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.


    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

     

    1 reply

    Dan Rodney
    Community Expert
    Community Expert
    September 13, 2021

    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
    Participant
    September 13, 2021

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

    Dan Rodney
    Community Expert
    Community Expert
    September 13, 2021

    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