The above demonstration explores the basic fundamentals of the XD design workflow as we step through a simple single screen design. Links to assets used in the demonstration are below. Notes on the aspects covered in the demonstration are further down the page.
What is XD?
XD is an application that designs the experience users have of screen products, much the same was as InDesign is a tool for designing print user experiences. With XD you can establish the look and feel of screen designs and how content is delivered to audiences in digital formats. XD is a tool for designing interactive content delivery and publishing across multiple devices. It has tools for designing responsively and allows designers to create interactive prototypes for web and mobile apps. XD also has a range of sharing tools to facilitate user testing and collaboration.
The XD workspace: make your first artboard
The XD workspace does depart from the usual Adobe interfaces like Photoshop and illustrator. There are, however, some common threads and transferable keyboard shortcuts. Overall, the XD workflow is streamlined and fluid, perfect for rapid design and prototyping.
The main workspace areas to consider are the Main Menu across the top of the screen, a Toolbar to the left, the Artboard and Pasteboard in the centre, and the Property Inspector to the right.
To start designing, you’ll need an artboard. You can choose a pre-set from the Welcome Screen, but it is more versatile to use the Artboard tool and customise in the Property Inspector. The Artboard tool is second from the bottom in the Toolbar.
With the Artboard tool it is very easy to resize or add multiple artboards to the Pasteboard. With the Artboard tool selected you can change property values in the Property Inspector. The Artboard tool gives you access to a wide range of device and screen pre-sets.
The ease with which you can work with numerous artboards simultaneously, is some that sets XD apart from PS or AI for screen and interactive design.
You can rename your artboard by double clicking on its title top left of the artboard.
Saving your work
XD likes to save files into your Adobe Creative Cloud account. To do this simply select file and save as, add a name to your project, and click the save button. Having files in the cloud is often useful for sharing and collaboration. If you want to save your files to your local hard drive, select File and Save As to Local Document.
Altering the artboard properties, including Appearance Fill
Once you have created an Artboard you can alter its property values in the Property inspector to the left. Highlight the Artboard title and resize the height and width values or set a new background colour by changing the Appearance Fill value with the colour picker tool.
Set some boundaries with grid and guides
In XD there are several tools that can help you align and position assets on an Artboard. Guides and grids allow you to design with pixel perfect precision. With the Artboard selected, you’ll see the grid options in the property inspector. There are two types of grids that you can use inside of XD, there’s the Layout Grid and the Square Grid. You can use the dropdown menu to select which grid you’d like to use in your project, you can toggle between both if you like. The Layout Grid allows you to work to a column set-up that you design. You can decide on the number of columns, the gutter width, the column width, and the margins on the Artboard.
You can also add horizontal and vertical guides to your Artboard, which adds another level of precision to the placement of your graphic elements. Hover your cursor over the top or left edge of your artboard and you will see it highlight. Then click and drag your guide onto the art board. You’ll be able to drag your guide to the exact pixel position you desire.
There are no Rulers in XD.
Adding shapes and adjusting element properties
Adding vector shapes is much like the process in other tools like PS and AI. Select the shape tool that you need and click and drag your shape onto the Artboard. With your shape selected you’ll be able to modify it in the property inspector. The property inspector will allow you to modify:
- Numeric values for transformation, size width etc
- Fill/Border colours, border width
- Blend Mode
- Rounded corner values
- Effects, like drop shadow
- Object Alignment, when more than one shape is selected
- Pathfinder options, when more than one shape is selected
Adding images via Import or drag drop
There are numerous ways to add images and artwork from other applications to your XD designs. For example:
- Use the file import command to add JPEG, PNG and SVG files to design
- Add a shape to your artboard and drag a file from the finder directly onto that shape
- Copy and paste vector or bitmap artwork from another application
Adding text and typesetting
Use the text tool to add text to your project. Click on the artboard to create point text or click and drag to create a textbox. Either type in your copy or paste it from another source. Point text and text boxes will easily snap to guides and grids. Use the move tool to reposition or resize. When textboxes or text itself is selected, text properties become available in the Property Inspector. You can set typefaces, font size in pixels, character spacing, line spacing and paragraph spacing. There are also similar transform and appearance properties that you get with shapes and images, fill/border colour, Blend Mode etc.
Assigning Character Styles
On once you’ve set a passage of text and you’re happy with the styles you have implemented, you can define character styles to make further typesetting quicker and easier. At the bottom left of the XD workspace click on the Document Assets icon and you’ll have access to reusable assets. If you want to add a character style, select the target text, and click the plus icon next to the character styles heading. Once the style is created you can rename it appropriately. To apply the character style to other text in your design, simply select the text and click on the character style that you added to the list. if you right click a character style in the list, you’ll have access to the edit features. If you edit the character style all instances of that character style in your design will be updated on your artboards.
Make components to reuse
Components make it easy to reuse graphics and other items across your design. For example, if you had a button graphic that is included multiple times in your design, you can select the first instance of that element, right click on it, and select make component. This will add that component to the components list in the Document Assets panel. To reuse that component simply drag it from the document assets list and onto an Artboard. It’s then possible to edit this main component and have all instances update cross your artboards. You can also select individual instances of that component and make modifications to that individual instance.
Make a colour palette
Another document asset that’s speeds up your workflow is the colours list. The Colour Asset list will give you quick access to a set of colours that you’ve pre-defined. To add a colour, select an object using the target colour and click the plus symbol in the Colours Asset list.
Managing layers
Clicking on the Layers icon bottom left of the XD workspace will give you a list of all the elements included across all artboards. You can select each individual artboard layer elements, you can also navigate layers that are only on the pasteboard. Double click the icon of each artboard will show a list of the layers in the artboard stack. Double clicking on the name of a particular element will allow you to rename it appropriately. You can also drag and drop layers to modify the order of the stack.
Finishing off the project and sharing the design
When your design is finished you can share your work with stakeholders and clients in various ways. Firstly, you can create static PNGS of each of your artboards by going to the File menu and choosing Export. You can export all your artboards or select individual ones.
You can also share a live web version of your work by navigating to the Share tab, top right of the XD workspace. Click the Create Link button to generate a URL. This is particularly useful for sharing interactive prototypes and undertaking user testing.
