Adobe XD, what it brings to the table? an ultimate UI/UX designer’s guide.
Tools that we, Digital creative Professionals, opt to use these days are directly playing a significant role in choosing the frameworks and the design process. For years we’ve been stuck with Photoshop and Illustrator striving to deliver web pixel excellence with tools particularly designed for that. Of course, there were plugins and actions to make the designer’s life a bit more efficient and save time on mundane tasks. Even though, available options were pretty low.
Then there was the arrival of Sketch. A tool that has become a ‘go-to’ choice for UI/UX. After Bohemian guys collaborated with InVision on introducing Craft and other handy plugins, Sketch took a strong stand as a primary UI tool and naturally seemed to be the end of a painful search.
It is of no surprise, we live in a fast-paced world and there’s always an opportunity for companies to launch another tool and see how it performs with the designers in need out there. Yet, so it happened, that one of the giants among the creative software companies on the market finally understood that there is a demand and it’s time to come up with something new. Not just by tuning up existing products to keep them debatably aggressive, but coming up with a whole new product, sharpened up specifically for creating digital services.
Most of you would have guessed it right, Its Adobe!
Adobe XD has been creating a buzz within design circles for quite some time now and it has become increasingly difficult to ignore. XD came straight from the Adobe Sneaks kitchen, where teams experiment with promising technologies, ideas, and whatnot before getting a green light. Now, XD happens to be in the spotlight of everyone’s attention after promising updates.
But is XD actually any good? Does it live up to the hype? Well, let’s find out.
General features:
Welcome screen — XD launches with a standard handy dialogue showing the device model and screen resolution, to begin with. Tutorials and shortcuts for other goodies are there at a glance as well. Soon there will be an overview of the recent files and shortcuts to the ones used the most.
UI Kits — (Apple IOS, Google Material, and Microsoft Windows) Either you access these from the welcome screen or from the menu bar later, the convenience of having the native UI Kits built-in is significant. Simple and genius.
Design Mode:
Basically, this is a mode in which you design your screens, elements, and other fancy stuff before switching to the prototyping model.
Artboards — Whilst the Artboard control is somewhat standard, the small sweet feature Adobe added is ‘the folding indicator’. As it might be clear from the name the dotted line, appearing when extending the Artboard height, indicates the beginning of the scrollable content.
Property Inspector on the right provides sufficient information, related to the tools/objects being selected. Options might vary, but generally, this is a go-to panel to change any color, size, shape-related properties, and many more.
Layers — XD has a smart layers panel, containing all the essential controls like editing, visibility, order, etc. as well as some smart zoom in/out features and a nesting structure that helps to avoid all the visual noise and mess inevitably when artboards spread around a bit.
Symbols — Similarly to what is already known to Sketch users, you can group and edit your symbols, arranging them among various screens with full control of the original. A foundation for every UI library.
Repeat Grid — Repeat grid is my personal favorite and initially the feature that made me pay more attention to XD back in the day. It not only improves the performance speed significantly when working on blocks of similar type. But allows controlling the content of those blocks, keeping the overall consistency and logic. Loading data from a text file in seconds, replacing visuals, changing hierarchy for multiple elements in one go…all these little things that really make a difference. The way it lets you change paddings and margins within the Grid is as neat and handy as it gets.
Prototyping Mode:
Creating transitions — Prototyping mode is mainly about bringing some life and telling a story of the screens designed beforehand. By wiring them together, using simple transitions, and a basic set of animations, it doesn’t take long to build the flow and share it straight away with other stakeholders for feedback.
Live Device Preview — To preview your designs on mobile you can use either the IOS or Android App using your Adobe credentials. It updates and previews your designs automatically and basically translates all the changes made on the desktop into mobile practically simultaneously.
Screencasts — Once the outcome needs approving or sharing, you can output it into a MOV file or a link that can be accessed via a browser. It is obviously clickable, so all the transitions and interactions made during the Prototyping mode will be active in the browser as well.
Developer Handover:
Mainly focused on providing a living style guide and design specs in the form of a web link, that would be completely interactive for developers to engage with. Similar to what can be currently seen in Inspector and Zeplin, but as said many times within one tool. Downloading assets, getting measurements, and transition descriptions would be a part of it as well.
Closer inspection of every single UX tool out there has its flaws. Adobe XD is hardly an exception. Yet, as things normally tend to evolve and get better, it’s safe to say that having high hopes for XD won’t be disappointing.
Adobe MAX put a lot of emphasis on the future of collaboration and how the community would be at the core of it. Logically, having a product, that meets the very best of UX designers’ expectations for an end-to-end design tool, does sound like a chance to excel at that collaboration and make everyone’s professional life much more efficient.
Janaspandana is an innovative product development company, who can help you to transform that long-awaited vision into a possible reality.
You can connect with us by dropping an email to business@janaspandana.in
