Adobe has been one of the main driving force in the industry of design. Their tools has been widely used on almost everything digital whether it’s print, web, or film. They have a solid set of tools that professionals use everyday and they have been updating these tools for many years offering new ways to craft their creative visions.
This is the reason why it’s sometimes rare for Adobe to release a new tool since most of their softwares can handle almost everything. You need to design a website? There’s Photoshop, which can also handle image manipulation and graphics design. A logo for a client? There’s Illustrator, which can also be used for designing web, packaging, and print materials. You need a book? There’s Indesign for that. How about some cool visual fx and motion graphics? Adobe After Effects and Premiere got you covered.
So What’s Adobe XD?
Adobe XD (or Adobe Experience Design) is a new software from Adobe that only does one thing – and that’s UI/UX design. It’s being categorized as a “Screen Design Tool” by many which is a whole new category in the world of design. The software’s single focus makes it very fast and offers tools not found on mainstream design softwares like Photoshop and Illustrator.
Now you might ask, “what the heck is screen design?”. Designing these days is a lot different compared before where we only design for desktop computers (960 grids anyone?). Today, there are a lot of devices (or screens) to consider before creating your next big web or app project. You’re literally designing both the user interface and user experience for a bunch of different screens.
Adobe XD’s 5 Amazing Features
For many years, most of our design work revolves around sketching our ideas on paper, converting those sketches into scalable vector objects using Illustrator, and doing the necessary magic to present it to our clients using Photoshop. Our 2d design work always revolves around these 2 softwares. Adobe XD will change all of that not only in the design aspect of things, but also in getting design feedbacks from clients and shipping the final design for development.
1. It’s Vector Based
Adobe XD is a pure vector based application. It means your designs are 100% flexible and scalable depending on your needs. It offers a nifty export feature that lets users export UI assets with ease. You can also set the scale of the exported asset for high density displays (ie: retina).
2. Photoshop Support
Now this is a big one. When we started using XD on it’s early beta stages, you have to basically redo your current design projects inside XD to use all of its great features. On XD’s March 2018 update, they basically surprised everyone and added this mind blowing feature that lets users import their current PSD design inside XD! Why mind blowing? Because upon testing this feature, XD preserved all layers, groups, and artboards like how it was originally done in Photoshop! No need to redo your work and you can directly head straight to using XD’s amazing features!
3. Symbols
One of XD’s powerful feature is called “symbols”. Imagine you have a design with a bunch of repeated UI objects and let’s say the client requested to change those objects to a different color. If you designed it in Photoshop, you’re out of luck since you will have to apply these changes on each and every object in your design.
In XD, symbols are like “blueprints” that you can reuse in your designs. If the client requested to change its shape or color, you can just change the “blueprint” or “symbol” and XD will automatically update all of its instances in your design. Neat!
4. Style Guides & Developer Handoff
Another mind blowing feature of XD is the automatic generation of “style guides”. In other design softwares, this feature is only possible either by using a paid plugin or by using a separate application. In Adobe XD, this feature is baked right into XD by default. What this does is it generates an interactive style guide that can be used by developers to ensure consistency of the finalized design once it’s converted into code. The generated style guide will display all the colors, fonts, even the margin and padding values!
5. Prototyping
Last and definitely not the least is “prototyping”. Like the “developer handoff” feature, in other applications, this can only be done via a paid plugin or a separate paid application. Once again, Adobe XD has this feature by default. It allows designers to create a “working prototype” of their designs that can be used in testing the “flow” of their design or application. This is also a useful tool when presenting the designs to clients as it simulates how it’s going to behave in real world situations. Another neat feature is people can directly leave and “pin” a feedback about the design directly inside the prototype so no more messy email threads!
Final Thoughts
We only just scratched the surface of Adobe XD feature wise and a single article isn’t enough to tell you how great it is. We are really excited what’s next specially since Adobe is constantly churning out updates every month to make XD even more amazing. Stay tuned as we will definitely share our thoughts about it here at our blog.
