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