Intro to Adobe XD

Welcome to our workshop!

tinyurl.com/XDADLI2024

Thank you for joining us for this workshop! We highly recommend that you have Adobe XD installed on your device before the workshop so that you can work along with us! When we finish today please complete the Post Workshop Survey if you have the time, thank you!

Workshop Resources

Please download these files if you would like to follow along with us!

STEP 1: Creating a New Project

Select the starting "Artboard" for "iPhone 13,12 Pro Max (428x926" from the first set of preset display sizes.

Double click on the title of the "Artboard" and rename it as "Homepage."

STEP 2: Creating frames using shape tools

Create a 428 x 650px rectangle using the "Rectangle Tool (R)" by clicking and dragging. The dimensions of your shape will appear in the Transform section of your Properties Menu on the right-hand side of your screen. Once created the dimensions of shapes can be edited using that panel. Once created you can use the "Selection Tool (V)" to move the shape into place.

Navigate your Finder window to where your assets are saved on your computer and locate STICKER STACK HOMEPAGE.jpg.

Click-hold-drag the file over the rectangle you just created and let go to convert it into a Frame for the graphic.

The Frame will cut off the parts of the graphic in order to fit the image to the frame by height.

In Isolation Mode you will notice the two sides of the graphic seem slightly faded, these are the parts hidden outside of our rectangular Frame.

To make the image bigger or smaller inside the Frame make sure to hold the Shift key as you drag the edges of your Bounding Box to reach the size you desire. To exit Isolation Mode, double-click outside of the graphic area.

Step 3: Creating Headers Using Shape and Type Tools

Using the same "Rectangle Tool (R)" create another rectangle above your graphic with the dimensions of 428 x 200px. Once created you can use the "Selection Tool (V)" to move the shape into place. Deselect the Stroke option and click on the Fill color selecting black or Hex #000000.

Click on the "Type Tool (T)" and inside of your Artboard once and type "STICKER STACK" hitting the Return key after the first word to create two lines of text. Make sure there is no Stroke and change the Fill color to white or Hex #ffffff.

Select a font from the Type panel in the Properties Menu on the right hand side of your screen. Adjust the Font size 75pt and the Leading to 90.

Center the text using the same Type panel then use the "Selection Tool (V)" to move the type into the center of the black rectangle.

Using the "Type Tool (T)" click and type "STICKERSTACK.COM" above the black rectangle we created earlier. Change the Font to Arial, change the Font size to 15pt and change the Kerning to 200. Select a medium grey Fill color for your type before using the "Selection Tool (V)"  to move the type into place.

STEP 4: Importing elements

From the Application Menu Bar at the very top of your screen click "File>Import." Navigate to your Asset Files and locate "X SYMBOL.ai"  and click "Import."

Adobe XD can Import vector objects from other programs such as Adobe Illustrator, so more intricate symbols and objects can be created there and simply copied and pasted into XD.

Using the "Selection Tool (V)" move the X Symbol into place towards the top left of your Homepage Artboard.

Repeat the same process with Importing the "Three Lines Symbol.ai" and then moving it into place in the upper right of your Homepage Artboard.

STEP 5: Duplicating an Artboard

Using the "Selection Tool (V)" click on the title of you Homepage Artboard, then click and hold on the Artboard and hold the Option and Shift keys then drag to your right to create a second Artboard with all the same elements. Rename this Artboard "Sticker 1."

Select the X Symbol on the new Sticker 1 Artboard and press the Delete key to remove it.

Import  the "BACK ARROW SYMBOL.ai" and place it where the X Symbol used to be.

STEP 6: Creating a scroll Feature

Click and drag over the three Import files we added to our project and press the Delete key to remove them from the Pasteboard.

In the Transform Panel in the Properties Menu double the length of the Artboard by changing the height (H) to 1852px. Notice the small blue rectangle that appears to the left where the bottom of the Artboard used to be just above the additional whitespace. This indicates we now have a Vertical Scroll Feature.

STEP 7: Creating a "Repeat Grid"

Create a square with the dimensions 164 x 164px using the "Rectangle Tool (R).

Use the "Type Tool (T) to create a text box below the rectangle and type out Sample as a place holder for now. Use the "Selection Tool (V)" to select the two objects and use the Center Alignment Tool at the top of your Properties Menu, and move them so they are to the left of the center of your Artboard.

With both objects selected click on Repeat Grid towards the top of your Properties Menu just below your Alignment Tools.

Click on the new green Bounding Box that appears around the two shapes and drag to the right and downward to increase the grid to 6 copies. Hovering below the first row will create a pink rectangle to appear, click and drag downward to increase the space between sets in the Repeat Grid.

Repeat the same process to increase the columns between the copies in the Repeat Grid. Continue to adjust until there is equal space to the sides and above and below.

Step 8: Placing groups of images and type into a repeat grid

LaunchFinder and locate the Asset folder titles STICKER FILES. Click and drag over all the files so they are all selected.

Drag all the selected sticker and drop them over the first Square Frame in the Repeat Grid. The images will auto-populate the remaining Frames  in the Repeat Grid. Images can be places in images one at a time if you prefer by clicking "Ungroup Grid" where you initially selected "Repeat Grid."

Launch Finder again and locate the the file "STICKER NAMES.txt" in the "Text" folder. Drag the document over the first Text Box with the word "Sample" written in it. This will auto-populate all of the text boxes with the existing name list created in Microsoft Word. Note that to add lists this way requires them to be saved as .txt files.

STEP 9: Creating a Linkable page

Delete the graphic from your "STICKER 1" Artboard, and create a square using the "Rectangle Tool (R)" to the size of 350 x 350px.

Using the "Type Tool (T)" create two text boxes below the square fill the first text box with Sticker 1, adjusting the Font to Arial Bold, and the Size to 25. The second larger text box below type "Information" as a place holder.

Launch Finder and locate the file "STICKER INFO.txt" then drag and drop it into the "Information" text box.

Adjust the Font to Arial Regular, Size to 15, Kerning to 200 and the Leading to 25.

Locate the file "STICKER 1.jpg" in Finder, then drag and drop the image into your Frame.

STEP 10: Adding a "component"

Go to "File>Import" and search for "Heart Component," select both files "HEART EMPTY.ai" and "HEART FILLED.ai" then click Import.

Using the "Selection Tool (V)" move the empty heart over the filled heart and increase the Border to 2.

Move both elements so it is just below the graphic on the STICKER 1 Artboard. Use the "Selection Tool (V)" to scale the heart down slightly holding the Shift key as you shrink it.

Right click on the two heart elements when they are both selected. Select "Make Component" from the drop down menu.

In the Properties Menu on the right hand side of your screen click on the "+" to the right of Default State and select Toggle State. This means to enact a change in the component you will need to "Click" on the object.

Under the Component (Main) Panel in the Properties Menu click on "Default State." Using the "Selection Tool (V)" double click on the heart shape to enter Isolation Mode. Select the filled heart and drop the objects Opacity to 0%. So only the black border should be present, this establishes the appearance of the object has not been clicked on. Double click outside of the object to exit Isolation Mode.

Click on the hearts again and select "Toggle State" in the Properties Menu under Component (Main).

Double click on the hearts to enter Isolation Mode, and select the filled heart and bring it's Opacity back to 100%. Then select the black border and drop it's Opacity to 0%, so it looks like the screen above. This indicated what the object will look like when clicked on.

After double clicking off of the hearts to exit Isolation Mode click on Default State in the Properties Menu and notice the Heart returns to just a border with no fill.

STEP 11: Using "Prototype" to link artboards

Select Prototype Mode and click on the image of Sticker 1 on your Homepage Artboard. Drag the end of the arrow that appears until it connects to your Sticker 1 Artboard.

Repeat the process by clicking on the Back Arrow Symbol on your Sticker 1 Artboard then dragging the arrow that appears back to the HOMEPAGE Artboard, to link the page back.

STEP 12: Testing your prototype using preview

Click on the title of your HOMEPAGE Artboard and then select the Preview Tool located at the top of the Pasteboard to the right. A new window will appear with your functioning prototype.

Scroll downward to see the 6 stickers we added and then click on Sticker 1.

This should take you to your STICKER 1 Artboard. Try clicking on the heart to see if the empty heart fill appropriately.

Try clicking on it to turn the Component element you created on and off. When you have finished testing the Component click on the Back Arrow Symbol and see if it redirects you back to your HOMEPAGE Artboard.

Click on the red circle in the upper left hand corner of the Preview Tool to exit back to your Design Mode.

STEP 13: Sharing and Saving

Click on the Share Mode, and you will notice a new menu will appear on your right where the Properties Menu was. Click Update Link then select the link above it to launch your prototype in the web. Here you can copy and paste the web address to anyone you would like to share the document with.

Another way to share it to invite people to Review your project by selecting Invite and typing in the emails of people you would like to share the project with.

To save your document click on "File > Save As." Retitle your project as you and and select save to "Save to Creative Cloud."

To save a PNG, SVG, PDF, or JPG click "File > Export > All Artboards" and then use the drop down menu to select the file type you would like to save the project as. Locate where you would like to save the file and click Export All Artboards.