• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How can app developers use designs made in XD to code the app?

Community Beginner ,
Feb 23, 2017 Feb 23, 2017

Copy link to clipboard

Copied

Hello. Would appreciate if someone can give clarity on the process to be followed after the UI design of an app has been completed in XD and the engineering team takes over.

The front-end developers primarily need the following information of each artboard screen:

1. Asset distribution

2. Element dimension and distance measurements

3. Color codes of all elements

4. Font type, size, and color of text elements

Now #1 is clear because of the asset exportation feature of XD. But how do we go about # 2,3,4? Are we to expect the developers to install and run XD on their computer for this, working on the source file? Or is there a way like Invision's inspect feature that can give these details to the developers?

There are about 100 front end developers in my organization. Does this mean I have to convince the management to (eventually) purchase Adobe XD for all 100 of them? The design team already has CC licenses, so no problem there. But I'm skeptical of getting clearance from Finance on 100 XD licenses.

Without clarity on this, we cannot use XD for an actual app project.

If the beta version does not support this aspect, can we get an estimated date by when these capabilities will be available in the solution?

TOPICS
How to

Views

13.9K

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

Adobe Employee , Mar 03, 2017 Mar 03, 2017

All very good questions! We have a vision for what our developer handoff is going to look like, and we're working on getting this up and running for you. In the short term, your devs can install XD and use our measurement tools (Learn to draw simple lines and shapes using the drawing tools in Adobe Experience Design).

However, in the long term, you'll want to rely on our developer handoff workflow, which you can upvote here on UserVoice: Generate specs / measurements / style guide for developers – Adobe XD Feedback : Feature Requests & Bugs

...

Votes

Translate

Translate
Adobe Employee ,
Mar 03, 2017 Mar 03, 2017

Copy link to clipboard

Copied

All very good questions! We have a vision for what our developer handoff is going to look like, and we're working on getting this up and running for you. In the short term, your devs can install XD and use our measurement tools (Learn to draw simple lines and shapes using the drawing tools in Adobe Experience Design).

However, in the long term, you'll want to rely on our developer handoff workflow, which you can upvote here on UserVoice: Generate specs / measurements / style guide for developers – Adobe XD Feedback : Feature Requests & ...

We also shared a vision for what this might look like, so check out this presentation from MAX this past November: Adobe MAX 2016. Day 1 Keynote (Chapter 3) | Adobe Creative Cloud - YouTube  (start around minute 24).

Hope that helps!

-Elaine

Votes

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 Employee ,
Nov 19, 2017 Nov 19, 2017

Copy link to clipboard

Copied

We’re pleased to announce that our Design Specs feature is now available as a Beta in our November release. You can read more about it :Feature summary | October and November 2017 releases of Adobe XD

This is only a start and we are working on enhancing Design Specs.

We’re looking for your feedback on the feature.

With design specs now you can achieve the below points which was your concern: You can refer to the blog for more info: November Update of Adobe XD | Creative Cloud blog by Adobe

2. Element dimension and distance measurements

3. Color codes of all elements

4. Font type, size, and color of text elements

1. Asset distribution/extraction is not yet rolled out but planned for our future release.

Stay tuned for more updates!

Votes

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 ,
Jul 17, 2018 Jul 17, 2018

Copy link to clipboard

Copied

Without complete set of basic features .
how can anybody use the Software for their work , knowing fully well that designs made in XD will not be easy to code as their would be lot of manual work. even simple basic features like Horizontal and vertical Flip is missing in the XD.

But hey Adobe you have goldmine in your closet .
Just Update Freehand MX software that you have into a XD like software . you will rock. as Freehand by far is the best vector software ever and most easy to use . with added UI design capability , freehand may rock. but XD looks far from it

Votes

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 ,
Mar 29, 2018 Mar 29, 2018

Copy link to clipboard

Copied

I completly agree with Dashanan on this point.
We also work with front end developper but mostly freelancers. We currently deliver organized PSD files.
They can identify every task to do that has been pointed previously.

The only ways to actually use adobe XD in a workflow are :
- working with devs who already owns a XD licence
- exporting ourselves all the deliveries for the devs

What could be helpful is that XD could export a file that can be opened without program (a kind of standalone), including all the objects needed (elements / fonts). The file has integrated elements for measurments, color codes and font size. In an additionnal folder you could find all the objects in SVG / PNG.

Maybe i am a daydreamer !

Votes

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 Expert ,
Mar 29, 2018 Mar 29, 2018

Copy link to clipboard

Copied

The recent integration with Zeplin (https://blog.zeplin.io/zeplin-now-integrates-with-adobe-xd-cc-726c8a4b2f22 ) might exactly want you are looking for. I have found using Zeplin a great solution for communicating with my developers. Since there is also integration with Sketch, you can have a mixed design team

Votes

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 ,
Mar 31, 2018 Mar 31, 2018

Copy link to clipboard

Copied

Infortunatly i work on Windows, and it is actually not yet available. Dammit

Votes

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 ,
Mar 29, 2018 Mar 29, 2018

Copy link to clipboard

Copied

Thanks for the tip, i heard about it but actually never experienced it on our projects. We ll give it a try soon.
The licence can be pricy for some freelanceers but if it is cost efficient on the long term its a win win situation.

Thanks again !

Votes

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 ,
Mar 05, 2023 Mar 05, 2023

Copy link to clipboard

Copied

LATEST

App developers can use designs made in Adobe XD to code the app by following these steps:

 

1. Export the design

2. Use a design-to-code tool

3. Use a code editor

4. Implement functionality

5. Test and deploy

 

You can talk to our mobile app design company experts for more assistance.

Votes

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