Before we get into the tutorial, let's just go through the slides we're going to create for Uber.

We've got a cover page, a menu, and a few slides of content. What we see here is a clean cover page, with just a logo and some text on it. The menu page has the major topics that we're going to be covering in the presentation, which when clicked upon, take us to the respective slides.

Our first content slide is the company profile, where we've created the timeline of the company's existence. As this is just a short tutorial, the second page jumps directly into the future of Uber, elaborating on the company's plans for their future. I'm sure you guys will have many more slides in between. But here the last topic we cover, is the Roadmap to 2040. Here, we have more sub topics which, when clicked upon elaborate on each subheading.

A slightly advanced thing we touch upon is to create responsive buttons so pages can be linked within each other. Now that we know what we're up to, let's get right into it. As soon as we open Adobe XD, we land in the startup menu. Here we have an option to choose from their layouts, or open a preexisting saved file. For the purpose of this recording, let's choose the web layout with 1920x1080 resolution.

If you guys are used any Adobe product before, we should land on a similar layout with all our tools on the left hand side and the property menus on the right hand side with our working space in the center. What we see here is the first page of our website, or slide deck known as the artboard. Now you can change the color of the artboard by the fill option here, which sets the tone for your presentation. 

As we're working on Uber, which works basically with white and black, we're going to keep it a minimal white background. What's really important here is to make sure to label your artboards as we create multiple slides. It's important that we keep track of which slide goes off to which, for which you can either double click on the name right above the artboard or change it in the layers panel. 

At this point, we'd like to create multiple artboards to work on simultaneously. Now, if you have some layout and formatting done on the first artboard, it's best to use the “command D” or “control D” function to duplicate your artboards.

Since we have three different pages apart from the menu page and the color page, we're going to duplicate it five times. You can figure out the number of slides you need, by referring to your initial wireframes sketches. Another way of doing this is to go to your artboard option on your left hand side and then choose the size of the artboard we need next, when the formatting of the next slide is totally different from the first one. 

Another sneaky method you can use, is to always click on the name of the artboard, and then hold “alt” or “option” and drag the artboard to the place you want it to be. For visual clarity, let’s just select the artboard’s - the last three of them and drag them below. So we've got the cover, the menu, and then the main slides. Let's also get onto renaming them quickly, before you move on to the next steps.

For the cover page would think of having something very simple, like a logo in the center, and the text about your group name, and the project name. 

So let's figure out how to bring in assets from the folders that you guys have created. So what we're doing here is we’ve minimized XD, and then opened up the folder, and just dragged in all the assets you wanted. 

So we're getting the assets for the cover page and the next few slides that we're going to use. We just saw the Uber logo disappear because XD is kind of smart, and it thought that should have been under the cover page. So what do you got to do is just drag your asset outside the cover page to find it and drag it out into general workspace.

Now we're bringing it back in. We want it to be center. You notice that XD gives you the guidelines. It makes sure that your asset has centered, and you know which part of the page it's presented in. 

You can resize it and then use the text option to add your group name and your own names underneath it. So just click and drag where you want your text to be, and on the right hand side, you see the property controls for the text box that you're going to be writing in. 

Now we adjusted the font size to size 36 because it's the cover page and chose the “Uber Moves” font option that we had downloaded previously. We're just entering the text required and formatting it. 

Now if you find it difficult to control your mouse to select things always make sure to hit “V”, which is the select tool at the top of the tools table. If you're typing a text, it may be a bit difficult to directly hit the keyboard shortcut “V” so we can just do it on the screen or click somewhere outside the box and then hit “V”. 

To select multiple items, just make sure you're holding on your shift key as you select all your items you want to move around, and the thing you can do is just drag your mouse over all the elements that are required to be selected. Now, moving on to the menu page, we realized actually we like to have a menu button that would connect every other screen back to the content space, the menu page. 

So we've deleted it for now, to make sure that we can have uniformity. So let's just see how that goes. So we're just resizing the Uber logo to act as our home button, bringing it to the top left corner, kind of feeling out the size, and then for uniformity purpose, select all our content remains in the center of the screen. 

You can just drag your guidelines from the corner of an article. So if you can see on your left hand side and the top as you hover the mouse over the edge, there's an activity that goes on. Just click on it and drag your guidelines from there. Now these guidelines will get duplicated in all the slides coming forward, so make sure they're in the right place where you want it to be. 

Now we're starting off with the content of the menu page, so just giving it a heading - saying menu. Bringing it back to where you'd want it to be. Then make sure you're using the text property tools on the right hand side, and making sure it looks like the heading. Yeah. Now we get into the cool part that's kind of unique to XD We’ll be using the repeat grid function, which we’ll use multiple times in this presentation and this workshop in a variety of different ways. 

Now, make sure that your item is selected. Click on Repeat Grid and you can drag the bottom green controls so you see your item. Your text box gets repeated as many times as the space allows. And when you hover over the space in between two items, you get a pink box and just click and drag to adjust the spacing between the items. 

This is a super cool function, which will get used in multiple different ways. But the reason why we asked you guys to make sure that all your assets are in order is because this option allows you to populate all the different text boxes with different text by just dragging and dropping your file into it. Because we had three lines of text, three boxes got populated. 

If you had more, make sure to add those by just dragging down your bottom controls for the repeat group. And if there were too many, the text starts repeating itself, so just close it down to how many we need. Once I kind of show up with the placement of our objects, right click on it and then ungroup your grid just doing some final checking on your compositions and almost done with the menu page.

Now we’re onto creating the rest of our pages. So as we learned before we select the page we want to duplicate, and then “Control + D” or “Command + D”. But oops, we don't really want the menu and its items to be duplicated. 

So we're just going to “Control + Z” “Command + Z”, which is undo. And then on the first duplication, let's just remove the content and then duplicate that slide. 

So we've got the menu icon we wanted and we've got the guidelines which make sure we maintain uniformity and create a beautiful visual system. We brought them back to the initial location that they were. 

So we've got the cover page, menu page, and now finally making sure that all our next artboards have the names that reflect what the menu page calls them.

Moving on, we're going to check out another cool function of XD. So these are called components. You see on the left hand panel near the layers panel, the box or you can right click on it and go to make component. 

The other option is to go “Command or Control + K.” Let's just check out what it does. So we select the component, copy, and paste it into the next artboard. Here we center it just above the guideline so that it becomes the title of the page. 

So what's interesting now, is if you click on the original component and make any changes in it, you see that it's reflected in its copies. So let's say you want to change the name of the slide later on. You just go to the menu page and change the main component, and all of its copies will reflect the change.

As we start designing our company profile, we know from our wire frame that we want a timeline where there's a central line, and then we have elements on the top and the bottom. So let's start off by using the tools and drawing a line in the center. 

Make sure to hold “Shift” while drawing the line so that it's perpendicular or horizontal, so it will be 90 degrees or zero degrees based on whichever side you're closer to. Let's use the properties on the right hand side. Make sure it's clicked and then the property panel is activated.

Coming back to use the magical repeat grid option. So we created text blocks. You got the right kind of setting we want. So we've got headings and we've got body text. 

So create the, make sure that the heading is slightly bolder, slightly bigger. And the next text box, which is the body text, is slightly smaller, lighter, easier to use. Even if you have fancy text in the heading,

have relatively simple text for the body. So use like a Sans Serif, Works Sans, Open Sans, Sans works well.

So once you have your text boxes in place, select both of them and click on repeat grid.

This time, instead of the vertical, we’ll choose the horizontal control buttons. So as we drag it out, we've got as many as we need. 

I think we need five. So let's stop there and for the heading, bring in your heading text file. Just drag it and make sure that it is extracted in case you're using the Uber file as non extracted files won't be populated. So you've got your headings and your heading spaces, and then you've got your body text and the body box. 

So just make sure all the body text fits. If you find it difficult for the body text to be fitting into the drawn box, make sure you use the controls. Here are about restricted height, restricted width, fixed width, I'm sure for different needs. 

You guys will figure it out as you use it, play with it. And once we're done, we make sure we just had elements we need and ungroup them, and then we move around the text so that it's in the right place. Alternating top and bottom, and we bring in the icons, scale it down. 

You can scale together by making sure you select all and then scale them down. And we've almost got the company profiles. It's always a good habit to kind of group the icon and the text related to it. 

So when you adjust things around, then move together. It also helps with the alignment functions that we’ll learn shortly.

We're now going to learn about the prototyping function of XD. This is what makes any kind of UI / UX software special. It makes sure that our sense of storytelling is more than just linear, right? And we can move around. 

We can click around, have parallel story lines running. For this, we need to make sure that we're in the prototype window. You can find this after the design window at the top left corner of your screen. 

Now, the prototyping window is used to make sure that all the links and connections between different elements in the slide deck or in the presentation in the website is created. How we do this is by clicking on the element that we want to link, and you can see on the right side of the element. You get a blue arrow mark. 

When we click and drag the blue arrow mark. You see a link, a connection, an arrow being made. Now this can be either an element to a page or even a whole page to a page. 

So if you want anyone to click anywhere on the page and it goes to the next page, make sure you click the artboard and the artboard gets a small arrow marked link that to the next dartboard. 

We made sure that all our menu icons link back to the menu page and all the elements of the menu, link to the slides. At this point, Nikhil shared the document with me, Padmashree. 

So he just went to the share option up there and added - invited me to edit. So when you work in groups, this helps a lot. So on my end, when I received the invitation, I just make sure 

I went to Creative Cloud notifications and clicked on the latest notification Let's let it load I'm the new teammate and owner of the file.

Yep, so we're going to start with the future of Uber. If we refer back to our wire frame, we know that there is a short brief under each topic. So what I did was hold “Alt” and then drag down the text.

Because I realized that the “Future of Uber” was actually a component, I right click on it and then set ungroup component.

And then let's just format it to the way we like. Have it slightly lighter, more easier to read, and center aligned.

So once I choose a color for my secondary text, I know that it's a color that I'll be using again and again. So an interesting thing to do is to maybe add it your swatches by clicking on the plus button in the color panel.

For the content of the page, I know that we're going to approximately have similar formatting. Have the title and subtitle of the page, so I select them both while holding shift. Make sure that the title is no longer a component, by ungrouping component.

And then I left align both my text boxes within the text function and then left align both the text functions to each other. Now this can be done by using the align functions at the absolute top of your property panels.

As I want them both aligned to the left, I choose the fifth option.

I also know from our wireframes that I want these to be bullet points that are linked together, so let's just add shape next to it. For that, I'm going to choose the rectangle.

I could also just press “R” on my keyboard.

Choose the color I want.

And go back to the repeat grid tool. So just make sure it's in the right place, select all my items holding shift or dragging over it and press on the appropriate function.

I need three bullet points, but that would be the spacing required, so I'll just make sure I've got my spacing checked

and bring in the elements from my folder. So bring in my .txt files of the header to the first header of the group and the .txt of the first body copy to the first body copy text box of the group.

So to make sure that all the bullet points seem connected, I'm using the line tool, which is on the left hand side toolbar,

connecting all of them and using the properties on the right hand tab to make it a bit darker. Use the colors there and increase the thickness of the line.

Now with Importing images, while we can directly just drag and drop, you have to come in and scale it again and see how that works. So a better habit is to use the rectangle to draw the shape where you want the image to be and then drag your image into that box.

And what this does is gives you a frame. And when you double click into that frame, you can adjust how you want the picture to sit within that frame.

Let's now get into the last and most adventurous and advanced frame slash group of frames, group of slides, of this workshop. So in Roadmap to 2040, we want to do something different. 

We want to create icons and decks that lead to other screens. So how do we do that? Initially, let's just create a rectangle. Now, if you see in the corner of the rectangles, inside the box, there are side dots. If you click on those dots and drag it in. It creates curved corners. 

Now this gives it a nice, modern finished look. You could also do that on the properties panel, right above the color and the fill option.

We're going to format it so that it has a thicker background and then we have a smaller box inside it where the icons will fit. Below icons, we would like the text of what those icons represent. So let's just add a text box there. 

Now it's super important to make sure that we have this idea beforehand, which is why - just draw rough of sketches of what you want. It becomes much easier to do subsequent things when you have an idea of what you want. 

Now, make sure they're aligned, by dragging my mouse over it when it's in the select option and then clicking that align function at the top right hand corner align buttons.

I’m also just gonna format the text button and now use the “Repeat Grid” option. So this populates not just text, but even shapes get repeated.

Now let's say I want to add images or icons into those boxes. It's super important that we know which order we want them in. So just label them accordingly so that when you select all and then drag them into the “Repeat Grid” function, they just fit perfectly . Now, for four you may think it's easy to do it by hand, but this is possible even if you, let's say you have 40 or 50 options.

Now, once we tried to add our text, we noticed that there's a slight problem that happens. This is a common problem, which happens very regularly. So just click into the first text box. Yeah, and then go to this fixed width text box option, click on that. So you decide to which space your text box fits and there won't be any auto adjusting patterns. Let's drag our text in now, and it works perfectly.

Let's get back into formatting our pretty boxes. Because these are buttons, or these are clickable, you'd want them to hover over the screen a bit. 

So what I'm doing is opening the layers panel, making sure only the rectangle is selected and then on the right hand side, add a shadow. Now right now because it's gray it may not be very visible, but I'm sure that it will come through

once we get our colors in place.

Now, let's assign a different color for each of them here. So when we try to do that directly, we realize that the same color gets assigned to all of them. 

So what we got to do is make sure our formatting for the boxes are completed, the set, and then we ungroup the grid. And then get into formatting each color as you format the color, Make sure to,

add the colors, into your swatches, so that you can use it again if it ever pops up. So you have some sort of uniformity and a visual language that's getting developed along with your storytelling methods.

Once we have our Road for 2040 page in place, let's create more screens for the different options, the different sub topics within them. So I'm going to click on Road to 2040.

I realized that this needed, a subtitle, so I'm just going to borrow that from the previous page by clicking on it, holding “Alt” or “Option” dragging it into my new screen and changing the text for it. 

Now they have the screen in place. I'm just going to hold “Alt” and then copy the whole artboard by clicking on the name and dragging it down. But this wouldn't be the best function, so let's just do “Command + D” or “Control + D”. 

In this new artboard in this new slide, I don't want the icons in the exact same manner as before, so I'm just going to pull that down for a bit. Even the text - pull it up for a bit and then just just duplicate the plain artboard with the menu option and the guidelines.

Now this is to demonstrate another superpower that the repeat grid function has, which

is used to create text in a very symmetric manner across different artboards and across different slides.

So what we wanted to do is to zoom out to be able to see the screens we want to use and then select the text box by holding “Shift”, click on “Repeat Grid” and

drag the controls across the screens. Now we'd like to get the spacing of 1920, which is the width of each screen between -

between each text. But don't worry about that. That may be a bit difficult depending on the size of the text. So let's just keep that keep a spacing so that it's central to each screen and then drag in your content that you've written down in a .txt file to the header and the subtitle, subtitle body.

Now, once we got these in place, we just need to right click on it ungroup.

You can't see the

text on the next slides immediately, but don't worry, it's right there. So just ungroup it and then you can center each of them. Do the artboard using the align functions at the top right hand corner.

Now we just get super creative and add our bullet points along with images to make sure that the most effective points are conveyed.

So these go along with your voice and your enthusiasm.

So just

in case it's a presentation in a web site, it would be slightly different. But yeah, just make sure you got all your points in there with as many images as you think necessary,

and we can do that in many formats. A really cool place to check out how people give presentations is actually just Behance. 

You can check it out on Behance or go to Creative Marketplace, go to Dribble, get some inspiration from how people make screens, not just presentations and implement whatever is best to you.

What you've got to remember with the .txt files is as you press, enter or as you create a new line that gets read as a new block of text during repeat. 

So make sure there aren't any spaces in between your - make sure that there aren't multiple lines in your grid, so you can always add them together and then bring it to XD and then create multiple lines.

But for now, have it as a single paragraph.

And we're almost there guys, now we're just going to get our images in place and create the icon buttons.

Creating the icons or clickable elements is part of the magic of components. Now this is slightly advanced and you don't have to worry about it immediately, but it's nice to have when you have XD. So this is a bit more than beginners.

This is intermediate. So what you want is just the images and the colors of the boxes. So we're just going to click into the groups, by holding down control or command. So that lets us select the options directly of a group. Or we can just select them from the layers panel as I do rectangles.

Now we all want them to be slightly smaller, so they can be part of the screen. Let's just bring it down to 120 “Width” and “Height”

and now select the images and bring them on top of the rectangle, so that they sit in-between.

Now we immediately see the problem that we can't see their backgrounds behind, which is why we use the magic of “Layer Styles”. Now Layer Styles, essentially,

lets us choose how an image or a layer interacts with its background.

If we choose multiply, only to darker aspects of the image

show. So here the darkest aspect being the icon itself, the white disappears.

And after we've come to this point, let's just try to rearrange it bit make sure that the images are center of the box, We can either do it by eye measurement,

the guidelines, or use align functions.

After that, get - make sure that they appear in the right place on the screen, because this is a repeating element that we'll use again and again. I feel like the border is a bit too thick, so going to reduce that a bit, and maybe even reduce the intensity of the shadows, and looks good. At this point, we make the icons into a component. Now this is super important to create some kind of reaction to the clicking. So let's select all aspects of the image and the background, and click on component on the right hand side - or “Command / Control + K”. Just right Click on it and find “Make Component” order.

We're gonna quickly go into the prototype window and make sure all the icons are linked to the respective pages. Now because they’re components, when we copy paste these into the next sheet,

they retain their connections.

So what I'm going to do now is go back to the design screen,

select all of them, “Control + C” and “Control + V” into the next sheet. Right. So we see, except for the first one, all of them are already linked to which screen that's supposed to go to. 

So we'll just quickly select the first option, the leaf and connect it back to the screen it's supposed to go to when clicked upon.

Now we've got an awesome animation creation, So you want it to react, you want to give the person feedback that it has been clicked upon. So what we do is we work with states, so click on the component. 

And on the right hand side where we added it as a component, click on the plus button and go to toggle state. So toggle state is what happens when you click on it. 

Let's edit the component while it's still in the toggle state. So just keep an eye that is in the toggle state in the component panel.

Now what we're going to do is click into the component

instead of a shadow, give it an inner shadow. So instead of drop shadow, it's an inner shadow. And then maybe you could change the background so that it's a lighter green,

even reduce the capacity of the image. So it looks a bit pressed. It's - it's used, and now we've got a button.

So if you go back, I'll zoom out and click outside, click back in in the component.

Try seeing it in the toggle state, non toggle state, toggle state, default state.

It looks good. Awesome. Now this is something you could repeat on the other buttons. But for now, let's just go back to the preview. Check out how we're doing. So that's the preview - the play button.

We start with our call page. Click anywhere to go into menu. Let's just click on Future of Uber. That’s a clean page. 

Click Anywhere Again to go into the next page, which is Road Map. Now we haven't yet completed this, but let's click on first Button, and that's great animation.

So it leads to its own page.

Just a little bit more hard work, and work done.

And here's is the final product, guys. I'm sure all of yours look so cool.

I’ll be excited to see it again. Clicking on your option, going to your company profile,

the future of your company. Use hover states. Just try it out and clickable

buttons. Yay.