Generate specs / measurements / style guide for developers
What definitely needed in the Design community is to ease the design-development delivery-review phase. To unload both of the sides.
A lot of different platforms, tools, plugins were meant to do that and none of them is fully unloading and simplifying that process.
PNG Express, Specking, Avocode, Markly, Zeplin, Craft, Marketch etc...
I believe there is a need in having some specifications delivery service, styleguide generating service.
+ Measuring distance from text line height (because that's how developers do), not font size.
+ Ability to adjust the UI on the go with automatic sepcs changing
+ Ability to select and automatically calculate the parameter type (dp, px, pt, em, sp) with defining default
+ Automatically generated colour palette. And when you change the colour in palette it changes everywhere in the UI.
+ Font styles
+ Generating assets
+ Generating SVGs
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 on our announcement blog post here: https://blogs.adobe.com/creativecloud/november-update-of-adobe-xd/
The Design Specs feature is just the first step for us in this space, and we’re looking for your feedback on the feature. In order to focus on the feedback, we’ve created a new feature area that you can target when you file new ideas: 09 Design Specs. Please remember that you should file one idea per submission, so that we can better aggregate your feedback.
Renato Reis commented
This should be at the top priority list as it's an absolutely necessary step to deliver the designers work to a developer.
Renato Reis commented
Zeplin is one of the best tools out there for handing off design assets and specs to developers. it would be great if Zeplin integrated with XD to provide the same output as it does with Photoshop and Sketch.
Any news on the spec export from XD? really need this features...
Florian Monfort commented
Urgent for us as well, there is no compatibility with third party tools and our developers need this. Since we can't export every info to Photoshop so far to use with Zeplin or other plugins this makes it worse.
I really love XD, and it is perfect for fast prototyping.
However, in order to be adopted from the whole organisation this feature is what is needed. Please, implement this.
It gonna set us free from tools like zeplin and craft during hand off to developers.
I had not previously seen this video. Thank you for sharing. The 'spec' view is actually EXACTLY what I was talking about. Any indication on when this will be introduced?
I haven't heard back from you, would you like a few mockups?
I had to get sketch & a plugin since XD didn't have this feature. I don't like how busy sketch is though.
No... Specifications would look similar, yes. But it would be within the shared prototype that is online.
This is how I would imagine it:
- Enable Inspector ( i )
- Hover over an element: dimension/spacing lines will show up around it (for easy/fast checking of certain measurements.
- Clicking an element would hold the measurement lines in place and then in the Inspector it would show all data. Length/width, corner radius, X/Y(/Z?) position, color, font specifications.
Having selected an element would also show basic measurement of all elements -within- the selected element so spacing/filling would be easily viewable.
Perhaps a 'show all' button in the Inspector that would toggle all measurement lines for all elements as an overview.
So essentially an interactive blueprint for a frontend developer. This would save me so much time creating specifying documents of design.
I hope I've given you enough information. If not please let me know, if it is still not entirely clear I can draw up some mockups tomorrow if that would help.
It would be great if you could allow for an 'Inspector' type view in the web sharing. This way front-end developers could use the shared prototype to gather all information for building the design. Measurements, colors, spacings, fonts, et cetera.
Kevin Liu commented
Something like the way Invision+Sketch work together would be great here.
Being able to share a public link where developers can click on each element for measurements right in the interactive prototype.
Thom Meredith commented
Please add this feature
Agreed. We need a CSS attribute export or visual documentation! It's Only way I will be able to make a case against Sketch for our software agency. I'm weird and use windows so this is especially important for non-mac users since Sketch doesn't run on windows.
Feel free to reach out to me.
David Vera commented
Please add this functionality now! My company needs a platform to develop a complete app and I have to choose Sketch because Xd lacks the built-in specs for devs :(
Ricardo M S Gomes commented
I also think the best option like many people already mention is creating apart from the Design and Prototype tabs another one for Development that you can add measures, colours, typeface and other information. This way we will be able to export that to a pdf,css,etc... without messing up the other tabs.
Pablo Sara commented
Hi. Just an idea...
We have now 2 main environments: "Design" and "Prototype". Maybe a "Development" tab could be added, which also shows up on the online prototype. This new environment gives them everything they need like measurements, font sizes, css, etc. Maybe a global filter that allows them to see everything in px or em.
Adminjoan_lafferty (Admin, Adobe) commented
Hi everyone, we are working on getting some developer handoff features into XD in the next few months. We actually need some user feedback on what we are planning. If you have 30-45 mins to talk to us about designer-dev handoff, please ping me! firstname.lastname@example.org Looking forward to hearing from you.
Nam Nguyen commented
Must have feature!!! Anyone knows any work-around to generate specs for devs at this moment?
Damir Kusar commented
What about CSS, SCCS export?