Quick Feature overview of Adobe’s all-in-one tool for UX design, Adobe Experience Design (XD) CC

We all know how much big is the name of Adobe in the field of online graphics and designing. Let it be Photoshop and Illustrator or it be Brackets, Adobe tools are the first choice of every crazy, enthusiastic web designers and developers. Last year back in Nov at San Diego, Adobe held a 3-day long mega- creativity conference titled Adobe Max 2016, attracting web freaks from all around the world and those who couldn’t join, Adobe made sure that some sessions from the event remain available for them online. With something or some event being held by Adobe, It’s obvious the goal would be to pour in and out a lot of fun, creativity, review the past success and make some upcoming product/feature announcements. Talking about announcements, it was the first time when Adobe unveiled their new code-free design tool dubbed as Project Comet focused primarily on the community of UX Designers and the way they were presently doing things.

The Adobe’s foundational idea of creating Project Comet was and is to help UX designers get rid of multiple tools they use at present for designing from a multi-screen compatible interface to the testing done at different stages. With the new software Adobe claims to provide a stable and unified software application that leaves the designers with the option of multiple tools to design and prototype, along the existing brand trust. You can first design a wireframe and then your actual visual and interactive design for different screen sizes using the same application and can even further perform live testing on the prototype to see how it actually looks like and works, and therefore allowing you to iteratively improve your design. Not just that, you can use the Share Prototype feature to share your work with developers or your clients in the form of short-link, all they have to do is enter link in their web browser to see your live functioning prototype. Further added to the benefit of design this new application also supports Creative Cloud (Adobe’s cloud platform for various tools and assets) which means you can drag in your favourite assets you already use with Photoshop and illustrator.

Following the announcement, Adobe is still working on the project iteratively based on the feedback they receive. This is what Andrew Shorten, Adobe’s Director of Product Management for UX Design has to say:

Unveiling a new product to the world is a daunting experience, but following the announcement we were excited by the level of interest in Project Comet! I think we’ve read every tweet, comment, post or article about Project Comet, and the overwhelming desire for Adobe to craft a tool that was purpose-built for UX designers has been incredibly motivating for us. Thank you for sharing your thoughts on Project Comet – we really appreciate it.

App Break-down:

Before I move further discussing with you some major features available at present, it’s time to speak out the real name. Well Yes, Project Comet is not the real name as it was once but earlier this year (sometime in March), with the public release Adobe renamed the app to Experience Design Preview CC aka the Adobe XD.

As soon as you launch the application, you are provided with a screen full of clearly understandable options You can choose from three options like starting a new design project with pre-defined artboards or default sample files or platform specific UI kits.

Upon choosing one of the options, the desired app interface opens up and you can see that the XD app header is divided into two sections: design and prototype.

There are some major features packed inside both sections that make the app stand true for its name and purpose.

Design:

• Grid:

Whenever we work on a design, we try to keep all the elements properly scaled and equally placed. This objective is achieved in Photoshop with the help of grid that lays floating gridlines over your workspace or artboard.

This feature was absent from the initial preview but based on the continuous feature request, Adobe added it to their recent XD preview. One can easily lay a grid by clicking the tick over the square option in the property inspector area on right and then enter the desired size of the squares forming the grid.

• Repeat Grid:

Not just that, there is also a new addition called the Repeat Grid. Earlier every time when we had to make multiple copies of one element we used the copy-paste function and did some manual adjustments here & there as well but now with single use of Repeat Grid option, we can repeat as many times as we want and that too with the same pre-set adjustments the original element had.

Let’s say if we have to repeat the selected element in the above image. All we have to do is just click on the Repeat Grid option available in the property inspector on right. This provides us with vertical and horizontal handles over our element.

Now, by stretching these handles with the mouse cursor, we can duplicate the element both horizontally and vertically depending on the handle we stretch. We can also adjust the padding between the elements by placing the cursor in the empty space between the two elements and then stretching in and out as per the gap required.

• Drag and Drop:

This is something new and I totally like the idea of Adobe being doing this because this feature is going to save a hell lot of time. We love to make changes in something already available then to re-write or re-create, just for the sake of time and effort it takes. Just like that, there is a drag and drop assets feature in XD that allows you to drag in any asset either be text or an image directly from your computer and drop it into your XD artboard you are working on.

If the item you want to drag is a text file, then you need not to open the file and copy-past the text into your artboard. Just click on the filename and drag it, all the content in that text file will automatically be placed in your workspace. As soon as the text gets placed, you can further use the available options to format the text accordingly.

Prototype Mode:

After you are done designing each and every element for your design, its to time to swtich to Prototype mode. In this mode you can actually create the interface of your design and can set the order of pages as well as set the landing page or the home page of your project.

• Linking Actions:

In XD, you can link the real-time actions of what a particular option will do. You can link two different objects with the use of lines as shown in the image.

So in the actual interface you just built, if you click on the second grid in Latest Adventures, then it will land you to the page titled Rocky Mountains. That’s the beauty of XD, no coding or complex structure. You can do nearly anything with a basic or no design experience at all.

• Preview and Share:

Adobe XD also allows you to watch the actual design in action as you build as well as allows you share it with your client as a live link hosted over Adobe cloud.

This link can be opened in the web browser just like we open a website and therefore the browser allows the client to walk through the design.

Availability:

At the moment, Adobe XD Preview CC is available for Mac only, but we can expect a Windows version soon, may be by this fall. As I speak the word preview, it reminds me of Microsoft when they introduced Windows 8. I linked Windows 8 with Adobe XD because, Microsoft with Windows 8 did the same thing, they introduced something new and they wanted everyone to start using it from the first day but were not sure whether people will accept it or not. So at the first they launched Windows 8 developer preview, allowing everyone to use it for free, present their views, make feature requests and report any initial bugs. Later, followed by premium versions with features based on the feedback. I assume the same with Adobe XD as Adobe wants to attract an entire community of UX Designers with the free preview and later will arrive with a premium version based on the user demands.

However, before the final version there are a few more new features requested by the community and Adobe is said to be working on. Let’s see what unfolds with Adobe’s next update. Meanwhile, you can keep yourself updated through Adobe’s official blog for their recent updates in Adobe XD. If you have anything to add to, don’t forget to drop your valuable comment below.

Source: Adobe’s Blog