Adobe XD and

Creative Cloud
for the in-house
studio
With Ryan Wiseman

L6530

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman

Hey, I’m Ryan!

I’m a Designer, Creative Consultant and one of the Global Creative Cloud
Leads at Deloitte Digital. I have a passion for solving problems through user
centred design. I’m an accessibility and design systems enthusiast, and I’m
fascinated by the way artificial intelligence is transforming creativity. I have
experience working with a range of clients on large digital and creative
transformations. In my spare time, you can find me somewhere on a golf
course or waiting for the next Air Max 1 release. 

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 2

Introduction
We’re going to walk through how you can use Adobe XD and Creative Cloud
across your entire creative studio to create consistency across your brand,
streamline your workflows, and centralise your asset management.

We’ll build out some scalable templates for a banking brand called Onyx. In this
lab you’ll learn how to use XD and Creative Cloud to create the following:

- Design system
- Website homepage
- Email template
- Social media template
- Digital marketing banner

You’ll also learn how to use some of the services in Creative Cloud like:

- Adobe Fonts
- Adobe Stock
- Libraries
- Cloud documents
- Collaboration
- Review and share

You should have a folder containing some assets (we’ll discuss these as we need
them) and 3 XD files:

- 01_Onyx_DS.xd – this file contains assets that we’ll use to create our design
system.
- 02_Onyx_WIP.xd – this file contains the artboards and wireframes to get
started with your design.
- 03_Onyx_Completed.xd – this file contains the completed designs for you
to use as a guide if you need.

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 3

You will need to install the following plugins before kicking off this lab:

- Google Sheets
- unDraw
- Lorem ipsum

To install a plugin:

- Go to the plugins panel in the bottom left corner.

- Hit the ‘+’ symbol in the top right of the plugins menu.
- This opens the plugins library; you can search and install plugins from there.

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 4

 Introduction to Adobe XD

1 13
2
3
4
5
6
7
8
9

10
11
12

Tools
1. Object select (V)
2. Rectangle (R)
3. Ellipse (E)
4. Polygon (Y)
5. Line (L)
6. Pen (P)
7. Text (T)
8. Artboard (A)
9. Zoom (Z)

Panels
10. Libraries (cmd+shift+Y)
11. Layers (cmd+Y)
12. Plugins (cmd+shift+P)
13. Properties inspector

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 5

Using Adobe Fonts
As part of your Creative Cloud subscription, you get access to 1,000s of licensed
fonts, at no extra cost.

- Head to fonts.adobe.com.
- You can browse all the fonts and choose one that you like by going to
‘Browse Fonts’ in the top left corner.
- If you have a picture of a design that has a font you like, you can drag and
drop that in, or upload it using the camera icon in the search bar. You will
be able to search through similar fonts, recommended by Adobe Fonts.

- For this lab, I’ll be using Sofia Pro.

- After navigating to the font family – you can browse all the styles and then
activate what you need using the toggle.

- This will sync, and make your font available directly in app.

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 6

Using Adobe Stock
With your Creative Cloud subscription, you have access to a heap of stock content,
including photography, video, audio, illustrations and more. You will need to pay
for credits in order to license assets and remove the watermark. However, Adobe
offer a 30-day free trial where you can get 10 free images! Just register with your
Adobe ID.

- Head to stock.adobe.com.
- You can browse curated content by clicking one of the menu items in the
top left corner (‘Photos’, ‘Illustrations’ etc.) or if you know what you’re looking
for, you can search a key term or phrase using the search bar in the middle
of the screen.
- Make sure you select the category you need using the selection menu on the
left of the search bar.
- Similar to Fonts, you can also use the camera icon to add an image and
search for something similar on Stock. After hitting search, you will be able
to select whether you want to search based on all attributes or only content,
colour or composition.
- Once you’ve found an image you like, you can save it to a library or
download a preview to use it in your designs.

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 7

Part 1
Create a design system in XD
A design system consists of a library of commonly used components, styles and
assets that can be reused when scaling your work. Accompanying the library
should be a set of rules and guidelines defining how assets should be used as
they’re scaled across the design.

For the purpose of this lab, we’ll be creating an XD library containing the
components, colour styles and character styles. Feel free to add rules and
guidelines to take your design system to the next level.

- Open the file ‘01_Onyx_DS.xd’.

- You will find all the assets needed for this project.
- Feel free to add to this collection of assets if you’d like.

Adding character styles

- To add character styles to the library, select the ‘Typography’ artboard and
hit the ‘+’ symbol next to ‘Character Styles’ in the assets panel. You can also
select the character styles on the artboard, right click and hit ‘Add Character
Style to Assets’.

Artboard selected Character styles selected

TIP – if you’re hot on keyboard shortcuts, with the character styles selected,
you can hit ‘cmd+shift+T’ on Mac or ‘ctrl+shift+T’ on Windows.

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 8

 - Your character styles should look something like this once you’ve added
them:

- You can rename any asset in the library by double clicking on the name.

Adding colour styles

- To add colour styles to the library, repeat the above steps, just using the
‘Colour’ artboard and selecting the options for ‘Colours’.

Artboard selected Colour styles selected

TIP – if you’re hot on keyboard shortcuts, with the colour styles selected, you
can hit ‘cmd+shift+C’ on Mac or ‘ctrl+shift+C’ on Windows.

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 9

 - Your colour styles should look something like this once you’ve added them:

Adding components
- To add components to the library, you’re going to follow exactly the same
process, but you’ll want to individually add them.
- You can either select a component and hit the ‘+’ in the assets panel, or you
can right click and hit ‘Make Component’.

Assets panel

Right click

TIP – if you’re hot on keyboard shortcuts, with the component selected, you
can hit ‘cmd+K’ on Mac or ‘ctrl+K’ on Windows.

NOTE – if you have multiple components selected and try to add them to
the library, it will add them as a group as 1 component.

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 10

 NOTE – don’t add the secondary button style yet – we’re going to make a
component state before we add it to the library.

- Also be sure to add the image filter to the library as a component as we’ll
use that later in our designs.
- Your components should look something like this once you’ve added them:

Component states
- If your component has multiple states, you don’t need to add them
separately. You can add 1 component and have different states embedded.
- Add the grey secondary button to the library.

NOTE – main components always have a solid green box in the upper left
corner.

- In the properties inspector, you can view component states towards the top
right corner.

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 11

 - Hit the ‘+’ symbol to the right of ‘Default State’. Select ‘Hover State’ (you can
come back and add more states later).
- With the hover state selected, we’re going to change the styling of this
component to reflect the red button with the line below (to the right).

NOTE – you can double click on a component to add more elements to it.
For example, if you double click, you can then draw a line within the
component.

- When the hover state is selected, your button should now look a little like this:

- Notice how the default state hasn’t changed:

- You can now delete the example that was on the right of this component.

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 12

 - Now we’ve sorted the styling of the second state, we need to make sure to
prototype the interaction.

NOTE – for the hover state, XD automatically links up the interaction. For
any other states, you will need to prototype the interaction yourself.

- Head to ‘Prototype’ mode in the top bard of XD.

- With the desired state selected, hit the ‘+’ symbol to the right of ‘interaction’
in the properties inspector.

- This allows you to select the interaction trigger and set the
behaviours/actions.

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 13

Publish a library in XD
- Now you’ve added all of your assets, you can go ahead and publish the
library so we can reuse it later. Hit the button to publish as a library:

- You’ll then see the library manager where you can hit ‘Publish’.

- Once published, you can decide whether you want to share it.

Import a library in XD
- If you want to use a published library in an XD document, click the ‘Browse
libraries’ button in the assets panel.

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 14

 - This will bring the libraries manager up where you can use the toggle to
switch on a library for this document.

- Once you’ve turned on the library, you can access it from the libraries panel.
You can access the libraries panel using the back arrow at the top of the
assets panel.

Assets panel Libraries panel

- From the libraries panel, you can view all libraries that are available to use
in this document. You can also add a library using the ‘+’ symbol in the top
right, or by hitting ‘Browse libraries’.

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 15

Part 2
Design a website homepage in XD
We’re going to leverage the library we’ve just created to design a clean and
simple, on-brand website homepage. I’ve already set up a wireframe to use here,
but feel free to knock yourself out and create your own layout!

- Open the file ‘02_Onyx_WIP’.

- You should see 8 artboards. For this section we’re going to focus on the
website artboard. That’s the large one on the far left.

Navigation
- Let’s start by creating our navigation. Grab the component ‘Logo’ and align
it with the grey box in the top left corner.

NOTE – be sure to grab ‘Logo’ and not ‘Logo – small’.

- You can just click and drag a component from the libraries panel.
- Next, we’ll add some buttons to our navigation. We’ll start with the primary
button. Grab that from the assets panel and align it with the larger button
on the far right (the one with the grey box behind it).
- Add a label. I’ll go with ‘Join’ but feel free to come up with your own.

TIP – use content-aware layouts to make responsive components that

adapt as the content changes. Steps for creating a content-aware button
can be found after the navigation sub-section.

NOTE – after typing your label, you may need to align the button to the right
of the grey box behind it.

- You should have something that looks a little like this so far:

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 16

 - Now we’re finished aligning, we can delete the grey boxes. We’ve also got
our primary button in place, which we can use as an anchor for the other
buttons, so go ahead and delete the placeholders for the other buttons too.
- Now, let’s finish the navigation by adding the 3 remaining buttons. We’re
going to add the secondary button style we created. I’m going to be using
the labels ‘Personal’, ‘Business’ and ‘About’. As before, feel free to use your
own labels.

TIP – after adding 1 secondary button from the libraries panel, you can
easily duplicate it using ‘cmd+D’ on Mac or ‘ctrl+D’ on Windows.

- After you’ve created your labels, go ahead and align them with the primary
button. We want to align all the buttons to the middle and leave a 32px
space between each.
- Now we’ve got all of the elements in place, we’re going to create a
navigation component so we can easily reuse it in the future.
- First create a white rectangle, the same height and width as the white space
that’s already there (it should be 1440px x 158px).
- Remove the border, align it centred and to the top, and send it to the back
(behind the navigation elements we’ve just created).
- Now drag to select the white rectangle and all the components we’ve just
created, and group them (right click and hit group OR ‘cmd+G’ on Mac or
‘ctrl+G’ on Windows).
- Now we want to copy and paste this group over to our library document
(‘01_Onyx_DS’).
- Add it to the components artboard and then add it to the library.
- You should have something that looks like this:

- Hit ‘Update now’ to push updates to everywhere this library is used.

- Now let’s replace our navigation in our design with the component so if any
global updates are made later, they will be updated here.

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 17

Hero
- We’re going to bring the top of the web page to life with a hero image.
- Head to the assets folder and drag the image ‘Brand_image.jpeg’ directly
from the folder and drop it on the grey box in the hero section. This will
create a mask and automatically resize the image to the container.

- You can also bring the image into XD, move it onto the grey box and mask it
by going to ‘Object > Mask with Shape’. You’ll need to resize the image.

NOTE – you’ll need to put the image into the ‘Hero’ group in the layers
panel. You also need to make sure you have the image and the grey box
selected together before making the mask.

TIP – for the keyboard shortcut lovers, it’s ‘cmd+shift+M’ on Mac or

‘ctrl+shift+M’ on Windows to make a mask.

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 18

 - After you’re finished with your image, you should have something that looks
like this:

- Now the legibility won’t be great on the copy, so grab that image filter we
added to the components panel and place it in the hero. You’ll need to
order it, so it is in front of the image mask, but behind the text.
- Make the copy white so it stands out a little better.
- You can now make the hero group a component and add it to the library if
you’d like, so it can be reused later.
- Now we’re ready to add some text. We’re going to do this using the Google
Sheets plugin. You’ll need a Google Sheet setup already and the plugin
installed (instructions to install plugins are at the start of this workbook).

- Select the text fields in the hero and open the Google Sheet plugin.
- You’ll need to select the source ‘Google Sheets’. You may also need to log in
if you haven’t done this before.
- Once you’re logged in, you can select your file name. Mine is called ‘Onyx
hero’.

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 19

 - You can then hit ‘Import’, which will bring in your fields.
- Check the fields are mapped correctly, and then hit ‘Apply’.

- You should now have a hero component with a title and subtitle.

NOTE – the legibility might look a little weird still because of the
watermarked image. Try to play around with your own imagery to figure
out what works best.

Body components
- We’re going to now add some personality to the page.
- Head to the unDraw plugin and find some illustrations you like. We will need
2 – 1 for each of the large grey boxes in the body section of the website.
- Once you’ve found one that you like, just click the illustration and that will
copy the illustration to the clipboard.
- Paste the illustration in and align it to the grey box.
- Now we need to make this on-brand. Head to the libraries panel and
ensure you’re on ‘document assets’. The unDraw purple should have been
added.

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 20

 - Now head back to the Onyx library in the libraries panel and grab one of
our brand colours. You can right click and hit copy on the one you want.
- Then, go back to the document assets, right click on the purple and hit ‘Edit’.

- Paste the HEX code of the colour you chose, overwriting the purple’s HEX
code.
- That should have updated the purple in the assets panel and on the
illustration.

- Repeat this process again for the second illustration.

NOTE – if you’re going to use the same colour on both illustrations, you can
edit the purple in the assets panel after you’ve added the second illustration
to update the HEX in both illustrations at the same time.

- You can then delete the grey boxes behind the illustrations.
- Feel free to add some copy to replace the lorem ipsum.
- You should have something that looks like this:

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 21

 - Now we’re going to populate the grid at the bottom.
- I’ve set up a repeat grid to add some assets. Here’s how you can set one up:
- Create a placeholder box.
- Add a label below it.
- Select both the box and the label together.
- Click ‘Repeat Grid’ in the top left corner of the properties inspector.

- Use the handles on the right and the bottom of the green bounding
box to drag out your grid to the desired size.
- Hovering over the padding allows you to click and drag to increase
the spacing.

- Feel free to change the repeat grid that is set up to suit your preferences.
- Now we’re going to add some content to our repeat grid.
- Head back to the assets folder and grab the file ‘Banking_services.txt’. Drag
and drop this file on the first label in the repeat grid.
- Now go into the folder ‘Banking_services_icons’. Select all 6 images, then
drag and drop them onto the first image placeholder in the repeat grid.
- You should now have a grid that looks something like this:

NOTE – we did add these icons as components earlier, so feel free to add
them individually if you’d prefer. Although, you might find this way is faster.

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 22

Footer
- To finish off our web page we need to finalise the footer.
- For the footer buttons, we can use the secondary button style. Similar to the
navigation, drag one from the components panel, but this time align it with
the placeholder on the far left.
- Now delete the other 3 placeholders and duplicate the secondary button
component.
- Now add the social icons from the components panel. Align with the grey
placeholders on the right of the footer and then you can remove the
placeholders.
- The last thing we need to do is make sure the footer background is on-
brand. Select the grey background box and then select the light grey in the
colour styles (this will be in the Onyx library panel).
- Your footer should look something like this:

- That finishes the design for our website home page.

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 23

Design an email template
Now we’re going to leverage our library to design an email template that’s on-
brand and consistent with the design of the website homepage we’ve just created.
I’ve already set up a wireframe to use here, but feel free to create your own layout!

- Open the file ‘02_Onyx_WIP’

- To the right of the website homepage artboard, you should see the email
artboard.

- First, we’re going to add the logo. Grab the component ‘Logo – small’ and
align it with the grey box at the top of the template.

NOTE – you should try to leverage the same assets wherever possible. For
the purpose of the demo, I’ve created a small version of logo. Feel free to
resize the default size and play around with the shapes.

- Once the logo is in place, you can delete the placeholder box behind it.
- Now type in some copy for the title of the email.
- Next, we’re going to add another illustration. Head to the unDraw plugin,
find one you like, and paste it in place.
- Update the purple, as we did before.
- Now let’s add some placeholder body copy to this email… With the text box
selected (where it says ‘Lorem ipsum’), head to the plugins menu and select
the Lorem Ipsum plugin.
- Chose the option to ‘Fill with placeholder text…’.

- The Lorem Ipsum plugin menu will appear. You can just hit ‘Insert text’.
- Your placeholder text box should now be filled with lorem ipsum.

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 24

 - Before we finish, let’s just add a call to action at the bottom of the email.
- Drag the primary button component from the library panel and align it with
the placeholder button.
- Add a label to your call to action and then you can remove the placeholder
behind it.
- Finally, as with the website, let’s make sure the footer background is on
brand. Head to the library panel and update the colour (you know how to
do that now).
- You should now have an email template that looks something like this:

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 25

Part 3
Design digital marketing templates in XD
We’re now going to create some digital marketing assets. We want to maintain
that consistency across the brand so we’re going to use assets that we’ve already
created.

- Open the file ‘02_Onyx_WIP’.

- We’re going to work on the 4 social media template artboards and the 2
digital banner artboards, to the right of the email template we’ve just
created.

Design a social media template

- First, duplicate the hero component from the website homepage, and then
bring it over to the space where the social media artboards are.

HINT: try using the shortcut we used earlier…

- ‘Responsive Resize’ should be enabled already. If it’s not, you can turn it on
using the toggle in the properties inspector.

- Now resize the group to fit the ‘Instagram’ artboard and place it in there.

NOTE: see how Sensei (Adobe’s AI software) automatically adjusts the

layout and the image for us.

- You should have something like this:

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 26

 TIP: you could use the padding feature on the main component to prevent
the copy from cutting off at the edge when you resize, but we’re going to
change that for our social template, so I’ve left it off. Do try it out though!

- Now let’s sort the copy out. Let’s move the text box that used to be the sub
header to the top left and make it larger. This can be for the logo. And let’s
move the title below it – this can be the copy for our social post.
- Resize and place in the layout how you see fit.
- Once you’re happy with the layout. You can either type some copy, use the
Lorem Ipsum plugin for some placeholder text, or link it with a Google Sheet.
I’m going to link this with a Google Sheet.
- You should have something that looks similar to this:

- Next, let’s turn ‘Responsive Resize’ on (at the artboard level – make sure
you’re clicked on the artboard), and duplicate it.
- Now, let’s resize this social post 3 times to match the sizes of our Facebook,
Twitter and LinkedIn post template.
- You may need to slightly readjust your layout and text sizes to comply with
the larger template sizes.

TIP: when resizing, if elements resize and are not whole numbers, you can
right click and select ‘Align to Pixel Grid’.

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 27

 - After you’ve finished, you should have a set of consistent social templates
that look something like this:

Design a digital banner

- We’re going to use exactly the same technique to create a digital banner.
- Take one of the social template artboards - any will work.
- Use the same technique to resize the artboard. This time we’re going to
match it to the artboard that’s titled ‘Banner – large’.
- You may need to slightly readjust your layout and text sizes to comply with
the larger template size.
- Now grab a primary button from the library. Update the label and place
that into your layout.
- Feel free to lay the elements out however suits you.
- Once you’ve created the larger banner, use the same technique again to
resize it to the smaller banner size.
- Again, you may need to slightly readjust your layout and text sizes to comply
with the different template size.
- When you’re finished, you should have 2 digital banners that look something
like this:

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 28

 - You should now have completed all the designs. Zoom out to check out how
they all work together.

Collaboration in XD
If you’re working with other designers you can invite them to co-edit on documents
with you!

- Click the icon that looks like a person with a ‘+’ symbol next to it, it’s in the top
right corner of XD.

- Then click ‘Enable Coediting’ at the bottom of the pop-up.

- You can type an email address and then hit ‘Invite to edit’.

- Your colleague will then get an invite by email and through their Creative
Cloud app. They just need to accept that invite. They’ll have access to the
document in the ‘Cloud documents’ section in Creative Cloud Libraries.

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 29

 - When another user is the same document, you’ll see their profile icon in the
top bar in XD.

- You can also see exactly where they are in real-time in the document. The
artboards they’re working on will have a colour outline to match their icon
and you’ll be able to see their cursor.

Share and review in XD

In XD, you can share your work with people who don’t have a Creative Cloud
license. For example, Developers, Product Owners, or other client stakeholders.

- Go to ‘Share’ mode in the top bar in XD.

- You can select what type of link you’d like to create, in this case we’ll create
a review link.

- You can then set your link access, ‘Anyone with the link’ will just create a
public link with no restrictions. ‘Only invited people’ will only allow people
you’ve invited to the document (you can do this in the same way as when
you invite someone to co-edit). ‘Anyone with a password’ creates a public
link but requires you to set the password.

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 30

 NOTE: after you have created a password protected link, it is not possible to
remove the password. You will need to delete the link and create a new
one. You can do this by going to ‘Manage links’.

- After you’ve set your access, go ahead and click ‘Create Link’.
- You can then copy your link and send it to stakeholders.

- On the link, you have the ability to view the design, and make comments.
You can also use the pin to pin comments to a specific part of the design.
Any comments will be visible and stored in the panel on the right.

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 31

 - Sharing for development handoff is exactly the same process, you just need
to select ‘Development’ in the view setting.
- This will give you exactly the same view as review, however, you will also
have 2 more tabs on the far right to select ‘Specs’ or ‘Variables’.

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 32

Brand governance and asset management with
Creative Cloud
We’ve looked at how you can manage your assets in XD with libraries. Creative
Cloud also allows you to manage assets across your entire brand.

- On assets.adobe.com, you can go into the ‘Libraries’ tab to view all libraries
that you own, have been shared with you or that you are following.

- You have the ability to go into libraries and manage or organise the assets.

NOTE: you will need edit access to change anything in the library.

- You can also manage libraries in the Creative Cloud desktop app.

Ryan Wiseman | ryanwiseman@deloitte.co.uk | @rywiseman 33