By Dani Beaumont
One of the most powerful features in Adobe XD is the ability to design immersive interactive experiences and then in turn hand that completed design off to a developer. Release over release we continue to enrich the share for development workflow and this month is no exception with support for CSS code snippets directly in design specs.
I'm here in a web browser in the default view of a design spec. You might have missed that last month we combine prototype previews with specifications is into a single URL. This makes it a bit easier for a developer to understand the overall flow of a design or switch over at any time to view the specifications. To switch to the spec few for this artboard, I'll just click on the spec icon here towards the right. In addition to all the other specifications, we've offered in the past things like assets that were marked for export, colors that are in use, individual character styles and interactions. We also have relevant CSS snipets. One thing I do want to mention, CSS is specific to web development. So to see CSS snippets, I need to be sure to select the web as an output destination, back in the share for development window when I published up the original design spec. If I did flag that when I generated the design spec, I can come into individual objects here in the Prototype and when I click on them in addition to the usual specifications, I now also have CSS code for that individual selected item. So, what it generates from a CSS code standpoint is going to have to do with whether or not I've set the color value to be lets say hex or RGB a that changes the code that's generated there. I can also change the CSS code that's generated by changing my unit of measure here towards the top.
When I'm ready to then take that CSS code snippet and use it actually in my coding environment, all I need to do is come in and press and drag to highlight the code that I'd like to select. It's automatically copied to the clipboard. From there, I'll switch over to a development environment. I can then paste that CSS code snippet and continue with my coding work. We believe that including CSS snippets will make building out experiences designed and XD that much easier for you to code and we'd love to hear where you think we should take the feature from here. Please reach out on Twitter. Or, create or vote for additional features in the Adobe XD user voice feature request area.
I encourage you to give this new capability a try.
Design and prototype interactive user experiences and share those designs with developers via Design Spec mode. In Design Spec mode, developers can access CSS snippets by selecting elements in the design. CSS Code will be copied to the clipboard automatically when CSS snippets are highlighted in the Adobe XD web view. CSS code can then be pasted into a development project to get pixel perfect matches from design to code.
Related content
