Adobe XD helps bring prototypes to the next level
Published: 2019-09-16 12:42:49

Early stages of app design can be messy. Lots of ideas are being tossed about, and everything is being committed to a white board for consideration. After initial ideas start taking shape, the white board tends to get even messier, and trying to add a wireframe of seemingly random shapes and arrows to that mess often just makes for even more mess. That's not to mention that so much of an app has to do with the tactile feel of using the app, and you can't replicate that with dry-erase markers and a whiteboard.  
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/3xvh0iz6ptryssjdwlf0.png)
That’s where prototyping software comes in to breathe life into your team's designs. There are many to choose from, including Sketch, Axure and Proto.io, but if, like me, you are comfortable in some of Adobe Creative Suite’s other apps, Adobe XD is a great choice.
With XD, UI/UX designers can use artboards to seamlessly bring in files that the design team created in Photoshop, Illustrator or Sketch and give them interactivity. Got a page with a lot of menu items? Simply choose an item in prototype mode, grab the blue handle and drag a line to the page you want it to link to. Then, when you go to preview your design with the Play button, links will act like you’ll want them to when the app goes live.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/fafq3lmaobws0epumyfp.png)
Adobe XD accommodates for an impressive variety of screen sizes, allowing teams to see exactly how their app will behave on different devices with varying screen sizes and dimensions. And to be sure that your app has the right feel on the right device, Adobe offers access to a collection of free UI kits, ensuring that sliders and buttons in iOS or Android look just like they do throughout the rest of the operating system. Customizable collections allow for even more access to items that will be reused throughout the app, from typefaces to icons to colors.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/fqqfk6k0d9eg0939lt9y.png)
Designers that are used to working in grids, such as Bootstrap’s and Materialize’s 12-column grid, will feel right at home designing with customizable layout grids that XD provides, making spacing and predicting responsiveness much easier at all screen sizes.
Adobe XD allows for collaboration through all levels of your team, from the designers to the engineers to the product owners and stakeholders. Once a first draft of a design is complete and is submitted for review, a link is sent to each member of the team. From there, they can offer feedback on user experience or design. With pins, feedback can be even more specific, nailing down changes to the granular level.  
Once comments are given, changes are made and everyone’s happy with the look and feel of the app, XD offers an option to Share for Development, which provides a link to developers with all of the pertinent information and files, from what colors and fonts are being used to the css styles for each element. This puts everyone on the same page and makes for easier collaboration among designers, engineers and product owners.