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.
Specs:
+ 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
etc.
Styleguide:
+ Automatically generated colour palette. And when you change the colour in palette it changes everywhere in the UI.
+ Font styles
+ Generating assets
+ Generating SVGs
etc
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.
-
Kirsten Felbert commented
This kind of feature, export for zeplin or XD having similar built in features to zeplin would make me 100% change to Adobe XD. Creating style guides / spec documents for Developers takes up a massive amount of my time to do it manually. At the moment its the main thing keeping me away from using the product for real world projects.
-
James commented
That's a very interesting idea.
-
Wise commented
How about sharing a specific developer file. With this file the developer could fire up the preview in any browser and look at what he/she needs. If the developer needs to look at the size of the type, a mouse-over would be enough. The developer could turn on, with the click of a button, the length between objects or sizes of objects or colors of objects. It would be lovely to see this file update on its own when the designer saves his/her document. This is a huge painpoint in all UX apps, let's make it amazing and smoke all other solutions! :D
-
Liam commented
Exporting/generating pages with the measurement guides overlaid in some capacity would be a tremendous help when high fidelity designs have moved away from low fidelity wireframes (see attached)… It's logical that decisions get made as you progress from one end of the process to the other :-)
I think this would save time for both designers and developers, and also reduce inaccuracies in the overall workflow.
It would also be helpful in circumstances where the designer/design team uses XD and the developers do not.
Of course this impact is minimised if dialogue is constant and the designs respect wireframe planning, but this is not always the case.
Many thanks!
-
Zohar Telor commented
It's crucial that XD files can be viewed by Creative Cloud Extract like PSD files - meaning i can give this to my developer to extract measures, texts, assets, css etc...
-
Destini Lynn commented
I would think it could function just like Sketch's Measure Plugin
https://github.com/utom/sketch-measure -
Anonymous commented
I third this! I can create wireframes and designs really quickly in XD but when it comes time to write HTML/CSS, I gotta recreate the design in Photoshop to make use of the Extract Tool and that seems kinda backwards or double duty.
-
Anonymous commented
Yes a Zeplin or Sympli tool is a must have.
-
Emiliano Qaqi commented
we need export to html/css/ios main storyboard.
-
jerz commented
i like
-
Pinak Beat commented
For me, this is a make or break moment working with the development teams both in-house and contractors. Their current workflow is PSD or Sketch as they have 3rd party integrations to make it easier on their lives. Without this I have to be a good team player and stick with their current workflow until XD has the native capabilities or able to integrate with other applications.
-
James commented
Auto-generated style guide please.
How it might work: One menu item generates a new XD board with grabs of all main colours with RGB and Hex codes, fonts and other items if poss. At least that gets a really helpful, automated start on something that most of us designers need to produce (and good developers require) every time.
-
MB commented
Would add Avocode to this request as we've found it has better functionality than Zeplin
-
Conor commented
I think this is necessary! I see how some people below are asking for Adobe to build their own, but why not leave it to the pros at Zepplin who know how to do this so well? Adobe you are killing it with XD (id love to get a layers panel - we really need this) So my 2 cents are, create Zeplin integration into XD - dont make us wait for you to create your own and have us fumble through beta's :)
-
Aaron commented
I would love to be able to provide measurements/specs to devs. Right now, I have to go into photoshop and use the "specKing" plugin. It would be great to be able to have something similar or way better in XD. Maybe something like Zeplin (https://zeplin.io/) but integrated...not a 3rd part.
-
Anonymous commented
Or, just include a measuring and redlining feature as part of the XD app, so users don't have to export things to a third-party plugin like Zeplin.
-
Samson Paul commented
An extension that lets you pull out design information from Adobe XD prototype including colors, fonts, gradients, and measurement information as clean, minimal CSS via contextual code hints. You can also extract layers as images, use information from the prototypes to define preprocessor variables, and easily get dimensions between objects. All in the context of your code.
-
Anonymous commented
Ability to adjust leading in type tool
-
Anonymous commented
Specking tool for handoff to developers
-
Ryan commented
I second this, our Dev department opens our PSD files in Extract to get padding/color/code, etc... this would let us use XD and pass them off to them in Extract to build otherwise they will not let us utilize XD as they can't build from it (they could, but they are picky)