From the course: Introduction to Graphic Design: XD
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Adding UI components - Adobe XD Tutorial
From the course: Introduction to Graphic Design: XD
Adding UI components
- [Instructor] All right, let's go ahead and get our rectangle tool, tap r on the keyboard to get that and then come out into the art board. I'm working from the bottom here. Okay, just to draw a rectangle like so. And then, I'm going to come up to this transform region here, and I'll make these 172 by 172. So it's nice and square, like so. I'll hit Return or Enter to commit that and then go to the widgets here. And if you're an Illustrator user, you'll be very familiar with these widgets, which you use to round off corners. Perfect, so that's exactly what we need. I'm going to give this a border weight of four. And then, I'm going to go ahead and apply some colors here. So, what I'm going to do is actually right-click the magenta like color here and apply that as the fill. And then, right-click the color above that to apply that as the border color. Now, that won't make much sense just at the moment but it will do…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
Creating the screens3m 57s
-
Creating the launch page4m 51s
-
Creating the login screen3m 34s
-
Adding the login element2m 19s
-
Creating the navigation5m 15s
-
Adding UI components3m 23s
-
Drawing UI components3m 29s
-
Creating the menu page6m 51s
-
Creating the gallery page4m 8s
-
Creating a gallery item3m 38s
-
Using Repeat Grid3m 59s
-
Creating the map page4m 51s
-
Creating the user page4m 21s
-
Challenge: Comparing user experiences1m 15s
-
-
-