At MUXL Conference 2019, the London UX community had a great opportunity to get an introductory workshop in Adobe Xd by Stephanie Maier, a UX/UI evangelist at Adobe. The workshop ‘Adobe XD – programmed to make you work faster’ proved to do exactly that. In just an hour and a half, workshop participants had designed a web application page, with the core components you’d expect to see across most web apps. Not only that, these components were turned into ‘Master Components’, meaning they could be used across different pages as instances of the master component. This is just one of many of the great tools used to optimise workflow when designing for mobile or web, let’s take a look at some more.
Works seamlessly with other Creative Cloud apps
One of the things that Adobe do great when it comes to its Creative Cloud software is integration across its applications. Xd has great integration with Adobe Photoshop and Illustrator, you can drag and drop Photoshop and Illustrator files into Adobe Xd. You’ll see many of the tools that you use in other Adobe software in Xd and many of the shortcut commands are the same, which makes for a seamless transition to Xd from using other Adobe software. You’ll find Layers, the Artboard Tool, Pen Tool, Text Tool and the most common shapes you’d expect from a UX/UI software. There are many layout tools similar to the ones you’ll find in Adobe InDesign, including columns, grids and guides.
Mastering components tools to speed up workflow
Master Components and Repeat Grid
As mentioned before, ‘Master Components’ are a great feature responsible for speeding up workflow when working with several artboards (pages). In simple terms, when you make a component (button, text or graphic etc.) a master component, that component then becomes an asset which you can drag onto any page, the plus to this is that when you change any attribute of the master component, that attribute will also change in all the places that you’ve placed it.
Often when designing a webpage, you’ll find yourself needing to duplicate several like components while maintaining their alignment, like buttons on a navigation bar or entry fields in a form, this is where the ‘Repeat Grid’ feature comes in. This is another great feature that Stephanie demonstrated through a time selection form entry field. She created a grid full of times in a matter of seconds, much like you would drag-duplicate cells in excel, the only issue was that the times didn’t duplicate incrementally like they would in excel. Fortunately, there’s a plugin that solves that issue.
More Plugins equals more time for design
Plugins take what already exists on Adobe Xd and adds powerful extensions created by the Adobe Xd community, which is testament to one of Adobe’s 4 Pillars of Xd focussed on future-proofing and keeping up with the latest developments and trends. Stephanie showed us the ‘Google Sheets’ plugin that allows you to use data from a Google Sheets spreadsheet to populate the information in a series of text-based objects, like the example given above of a list of times. Stephanie shared her pre-populated Google Sheets template with us on her Bēhance page, where you can also find a tutorial on how to do this. There are lots of other great plugins available like the Calendar plugin, a dummy text plugin (Lorem ipsum) and another really useful plugins that Stephanie demonstrated called ‘Icons 4 design’. This plugin allows you to create vector-based icons with a broad range to choose from. These icons can then be exported and used by the developer building the platform.
Sharing with Stakeholders
Once at the point where you want to start sharing your first prototypes with clients, developers or other stakeholders involved in your project, Adobe Xd provides some great features for not only showing your work, but also demonstrating how it will work with the power of ‘Prototype Mode’. Switching to Adobe’s prototype mode, allows you to be able to set a home page, create links between pages, and create triggers based on different actions (click, hover active etc.).
Then there’s the ‘Components States’ feature that Stephanie brilliantly demonstrated with form fields. This feature allows you to create multiple versions of a component or component group which, can be triggered based on different actions, for example when you hover over or select a component, it will change to a state that you’ve predefined.
When you’re ready to start sharing your prototypes with stakeholders, you can create direct links to them so your stakeholders can view them straight away, without the need for them installing any software or applications. You can also install the Adobe Xd app so you can run these prototypes from your mobile.
Bonus features
You’ve made it to the end of the article, congratulations. To reward you, here’s some bonus features and tips that were mentioned in the workshop.
Document history – Adobe Xd keeps all the changes you’ve made so you can easily go back to an earlier version of your project and even retrieve something from there to use in your most up-to-date version.
Co-editing – This is a very exciting feature that allows you and your co-workers to work on the same project at the same time, in real-time through the cloud; so, no need to attempt to merge two Adobe Xd files.
Creative Cloud Libraries – This feature allows you to create libraries that you can use across several different Adobe Creative Cloud applications.
To close this article, here’s a top tip from Stephanie:
“When designing for mobile, make sure you use system fonts to ensure that your design works as planned when developed”
Author: André Thompson – An Alumni Data & Engagement Officer at Middlesex University and a freelance Digital Producer and full-stack Web Developer. Start-up founder of social enterprise @StudentLight. Linkedin.com/in/HelloAndre
Interesting in becoming a UX Designer, want to learn more about Adobe XD, how to Prototype and wireframe, check out our training course at UX Academy