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.
Jamie Winfield commented
Please provide support for creating accurate specs for Developers in combination with PNG Express, Specking, Avocode, Markly, Zeplin, Craft, Marketch or built into Adobe XD itself so pixel perfect designs are translated in to code as accurately as possible. Zeplin is popular and this is what I favour at the moment. As soon as possible please, it would make a huge difference to a lot of companies I believe. Thanks.
Yes, a tool to continue the workflow for developpers is the missing chain.
Some thing like "Extract tool in dreamweaver" is a starting point.
Or a option to activate for developpers when they are viewing the prototype on line.
Generating Specs is a big issue! For Designers & Developers!
Please resolve this quickly.
Paul Harvey commented
If XD exported info html and images like Zeplin for Sketch it would be the real deal.
Now that we've designed the entire product in XD, we are now considering going back to Sketch because this is a big issue.
Ranga RS commented
After I share the final prototype to the Developer, the Dev team should be able to extract the CSS properties just by clicking the object I've created. Something like Developer view mode will help. CSS peeper app works like this for any site, A feature like this in XD will be so helpful and time saving for both Developers and Designers.
There is no point of sharing just PNGs if there is still some difference between mocks and htmls. Spec export plugin/feature will definitely help designers to not to go for nitty-gritty details.
van tru commented
I love using Adobe XD and want to use it exclusively. However, not having the ability to easily export code to collaborate with developers is a big hurdle. Please provide your plugin structure to Zeplin. XD would be infinitely useful. Thank you.
Winnie Abodo Alinga commented
To add to this idea, a third tab for the guidelines would work. As a UI/UX designer, I think it might be consistent with the use of the previous two (directly on the artboards), where we can select what we want to "measure" and export this "tab" as specs for developers (A little bit like the way we [used to] select slices when we export in photoshop or illustrator).
Steven Jenner commented
A breakdown between development and design is when you hand off concepts, Development needs to know the colors of each element. It would be helpful if I could export screens where there is a color breakdown of the elements on that screen.
This would help to eliminate the back and forth between departments when Finalized assets are turned over for implementation.
One example is to export each artboard with swatch callouts that would be a good start.
Then development can distribute the appropriate screens and swatch callout to each team member responsible for implementation - "screen_01.png" "screen_01_swatches.png"
Nitin Rathod commented
Whether its a Zeplin plugin or built-in function - The need for developers to access measurements and specifications should be the norm for this kind of application.
What can take at least a day to red-line should take at a maximum of a quarter of a day when using XD.
Pieter DK commented
+1 for Zeplin export integration
Mike Crane commented
This is crucial, but may be too late now, my team is looking into Sketch as a design tool for the integration with Zeplin. Our visual designer is spending too much time writing up design specs for developers.
Michael Pierce commented
That works for me Elaine, as long as there are ways that you can quickly screenshot the measurements as part of fast conversations that happen over slack or email. Sending links to view the entire design is often not what I'm looking to do but want to point out a very specific part of the design that I want an engineer to fix and show them the measurements of what it should be
Gabriel Mittleman commented
Integration with Zeplin need to be top priority. Or add similar funktion. I will have to go back to Sketch otherwise...
Usman Zahid Farooqi commented
Yes really! XD is useless if we only use for prototyping. what we do after prototyping? we redesign it in photoshop? then export to Zeplin for developer? Its good if XD allow Zeplin plug-in that export design directly to developer by Zeplin.
Any idea when this is coming?
Really hard to hand my designs to devs right now. People ask me to use Sketch or PSDs instead.
Jonathan Willmann commented
need zeplin too... plz!
All we need is Zeplin (and love) !