Log in from a computer to take this course

You'll need to log in from a computer to start Introduction to UI and UX Design. But you can practice or keep up your coding streak with the Codecademy Go app. Download the app to get started.

apple storegoogle store
Learn

In your design file, you have a few low-fidelity wireframes and an organized layers panel. While this is great progress, the design looks a little…plain. Fortunately, our next stop is the properties panel, which will help you customize the design and increase its fidelity.

If we select a layer on the canvas, the layer’s properties (such as size, color, and position) will be displayed in the properties panel on the right side of the editor. The number of properties for a single layer can be quite extensive — in some cases, we need to scroll within the properties panel to access everything. In this exercise, we’ll focus on a handful of properties that you can use to stylize your wireframes.

Let’s start with general properties that apply to most types of layers.

Alignment tools allow us to precisely align a layer within a frame. These tools are located at the top of the properties panel, and the icon for each tool shows two lines aligned to a specific position.

A screenshot of the alignment tools in the properties panel. There are six alignment tools: align left, align center (horizontally), align right, align top, align center (vertically), and align bottom.

X and Y coordinates represent a layer’s position within a frame in pixels. The X and Y coordinates for a frame represent its position on the canvas. These coordinates will update if we drag the layer to a new position, or if we enter new values for the coordinates.

The width (W) and height (H) of a layer are displayed near the top of the properties panel. If we drag a layer to resize it, its width and height will be updated. We can also type in width and height values to change the layer’s size.

A screenshot of the X and Y coordinates and width and height values in the properties panel. The X and Y variables have values listed next to them, which represent where the layer is within the frame. The W and H values represent the layer’s width and height.

Fill displays what color(s) or image(s) are in the layer. A layer can have one fill, multiple fills, or no fill at all.

 A screenshot of the Fill property in the properties panel.

Selecting the Fill icon opens the color picker. At the top left of the color picker, there is a dropdown menu that provides options for applying a solid color, gradient (Linear, Radial, Angular, Diamond), or image.

A screenshot of the color picker, which includes the dropdown menu in the top left corner of the color picker.

Stroke allows us to add a border. After adding a border, we can customize its color, weight, and style.

A screenshot of the Stroke property in the properties panel. Beneath the text that says Stroke, the color, weight, and style of the stroke are displayed.

Now, let’s take a look at some properties that are specific to text layers.

Text properties allow us to view and update the typeface, size, weight, and much more for a text layer.

A screenshot of the Text properties. In this section, the text’s typeface, size, weight, alignment, and more are displayed.

Finally, we’ll investigate the corner radius property, which only applies to layers that are made up of lines.

Corner Radius allows us to round the corners of a layer. If the corner radius is zero, there is no rounding on the corners. We can type in a value to round the corners.

A screenshot of the corner radius property in the properties panel. The corner radius is located below the width and height values, and the icon looks like a curved corner.

Instructions

Task: Increase the fidelity of your wireframes by using the properties panel to customize the layers. Replicate the example design from the video, or make your own version by adjusting the following properties for layers in your design: stroke, fill-image, fill-color, text, corner radius, and alignment.

If you would like to use images of Codey, Codecademy’s mascot, you can download them here: Codey Images

Stroke
  1. Select the layer you will add a stroke, or border, to.
  2. Locate the Stroke property.
  3. Select the plus sign next to Stroke.
  4. Adjust the weight (thickness) of the stroke by typing in a value in the box.
  5. Adjust the stroke color by selecting the box icon and opening the color picker.
Fill-Image
  1. Download the image you want to use, or choose one of these images of Codey, Codecademy’s mascot.
  2. Select the layer you want to add an image to.
  3. Locate the Fill property.
  4. Select the box icon to open the color picker.
  5. Open the menu on the top left of the color picker (the default will be “Solid”) and select “Image.”
  6. Then, select the “Choose Image” button.
  7. Locate the image file from your device and add it in.
  8. To adjust the image within the shape, select “Crop” from the dropdown menu. Now, you can resize the image and reposition it within the layer.
Fill-Color
  1. Select the frame or layer you want to update.
  2. Locate the Fill property.
  3. Select the box icon to open the color picker.
  4. Choose the color you want.
Text
  1. Select a text layer.
  2. Locate the Text properties.
  3. To adjust the typeface, select an option from the dropdown menu, or type in the name of a typeface.
  4. To adjust the text size, type a value in the box.
  5. To adjust the text weight, or thickness, open the menu, and select the desired weight.
Corner Radius
  1. Select a rectangle or other layer made up of lines.
  2. Locate the corner radius property.
  3. Type in a value to round the corners. The higher the value, the more rounding will be applied to the corners.
Alignment Tools
  1. Select a layer that’s in a frame.
  2. Locate the alignment tools.
  3. Select the alignment tool that will align the layer to the desired position within the frame.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?