Last week I took the Blueclaw blog readers through all of the fantastic (and free) things Adobe XD has to offer and why it is a lifesaver for myself and a good few industry leaders (If you missed it, that post can be found here).
This week, I’ve put together a quick rundown of how to use XD to create a basic 2 wireframe with a modal to give you a bit more insight into how XD can make your life 10x easier!
Open Adobe XD.
You will be greeted by a selection modal. This will give you options to select artboards, work through a tutorial, take a look at recent work, etc, etc. For this example, I will select the desktop 1920×1080.
This is your canvas/artboard. Even though the application is very minimal looking these are just the basics. Here you will see your main tools, the design/prototype navigation and the properties panel.
You will, by default, be on the design option.
The Tool panel consists of:
Underneath the tools on the left, you will see 3 vertically aligned icons. These are:
Assets: Here will house all of your components, saved styles and fonts. It’s a simple drag and drop functionality whether you want to add or reuse elements.
Artboard: Think of this as your layers panel. Things can be renamed, moved, etc.
Plugins: This is where you will use or add plugins.
On the right, you have the properties panel. This holds:
Rename the artboard “Home” (this can be anything but for this “how-to”, it just makes it simpler). On the Home Artboard, create two CTAs.
Now, click on the “Artboard” tool, which should bring up a list of device sizes on the right. Click on the device size that is the same as the “Home” artboard twice. You should now have two blank artboards. Rename one “Contents” and the other “Modal”
In the contents artboard, Write in large text “Hello World”; using the circle and line tool lets you create a generic back button.
We are going to do something similar to the “modal” artboard. Using the Rectangle tool, fill the artboard and set the opacity to 70%. Again with the same tool, create a smaller white box and place some text here. Add a close button.
Now, on each artboard, individually select the CTAs/Buttons (shape, text, icon) and group them (Command+G OR Control+G).
Time to Prototype. Click on the Prototype tab at the top of the application. You will notice the tools will disappear and the properties panel will be now an “Interaction Panel”.
Here we will link the pages together.
Click on the home artboard and you should notice a home icon. If it isn’t blue, click it. This means this is your homepage. Now select the left button. A little blue tab should appear.
Drag the blue tab to the Contents Artboard. Well done! You have created your first link. You should notice the interactive panel will light up with options here.
Your options are:
In the action dropdown, select “auto-animate” – this should produce a simple fade.
Now do the same with the back button on the content page.
With the Second “Home” artboard button, link this up to the “modal” artboard, but this time change the action in the action down drop to “overlay”.
This should produce an overlay effect with an automatic close, however, for this exercise, let’s make this clear by linking the close button to the “Home” artboard. Make sure once you have linked the button that you have changed the action back to transition or auto-animate.
Now comes time to test. You will see an “arrowhead” or “play” button at the top right-hand corner. This will open a window and allow you to test the links to see if you are happy with what you have created. You can also record the interactions if needs be for user testing etc.
If you are happy with this, then let’s move to step 7.
You can now share your product both publicly and privately, add a password to protect, and allow comments and hotspots to be added by a reviewer. All you need to do is click the big blue button at the top right side.
Click “Share for Review”. This will give you options. Select the ones you want and click on “Create Link”.
This is simply processing a link that you can copy and send to whoever needs to see it.
And that’s it! These are the basics. Have a play, use the plugins (there are a ton of them) and have fun.
“It has improved my design process in a huge way, flowing through wireframes to a design system. Flat designs is now 100 times easier while keeping the client involved and informed throughout the process. The design specs have made handing designs over to our development team so easy. In a nutshell, it has saved me a huge amount of time and made it super fun along the way.” – Andrew Cox, Lead Designer, Ghyston