Styling Objects in XD

When we create an object in Adobe XD, it will be created in a basic structure. To make it look attractive, we need to style it. The Adobe XD provides many options such as color fill, border, border radius, shadows, blur, etc., to style an object.

We can easily style the objects by applying the different style options as per need. Adobe XD provides several style options under the appearance section on the right property inspector area. To apply the style to an object, select the object using the select tool and apply any effect from the Appearance section. The appearance section contains the following options:

We can choose any given options from the above window as per our requirements. Let's understand each of them in detail:

Opacity: The opacity option is useful for defining the opacity of an object. By default, it is set to 100%, but we can reduce it by dragging the slider as per requirement.

Blend Mood: The blend mood drop-down menu contains several options for blending the object with the artboard. It controls how an object will blend with the content underneath the object layer. There are the following blending options available under the blend mode menu:

There is a total of 15 blending options available in the blend mode drop-down menu; we can choose any of them as per requirement. The blend mood works fine, just like in Photoshop. See more about blending mode.

Border Radius: The border-radius options are useful for defining the border-radius of an object. By default, it is set to 0; we can input any value in the border-radius field. Once we hit the enter key after typing the value, it will be applied to the objects accordingly.

There are two different options available for defining the border-radius. The first option will apply the radius value to all side borders, and the second option allows us to define the specific value for all the corners.

Once we select the second option, it will open four input fields for entering the radius value. By hovering over an input field, we can see the corner name of the border. Consider the below image:

We can change any of the corner radius values. It is not necessary to keep the same radius value for all the corners.

Fill: The fill option is used to fill the color in the created shape. When we select any object, the fill option will be displayed in the appearance section by having the currently active color in the object. To change the object color, click on the color palette and choose the desired one.

When we move the slider, the object color will change accordingly. Thus, we can change object color by selecting the fill option from the appearance menu. We can also specify a color value or change the color mode from solid to gradient using the color palette.

Border: The border option allows us to define the border color, size, and type. We can select any color for the border and define its size, style, and position from the border section.

When we check the border option, the border style options will be opened. We can select and enter any value for styling the borders.

Shadow: The shadow option provides control to the shadow properties of the activated object. We can specify the shadow color and casting of the shadow using these options.

Adobe XD supports two different shadow options; one is inner shadow, and the second is cast shadow to specify the shadow for the objects.

We can specify the X and Y value for casting the shadow, and the B value controls the blur radius of the shadow. To specify the shadow color and opacity, we can select the color picker right after the checkbox.

Blur Options: The blur options in XD applies the blur effect to the object. There are two options available in XD for applying the blur; one is background blur, and the other is object blur.

Using the blur tool, we can apply cool blur effects to our objects to make them realistic. The blur effect is very useful for a good user interface. Mostly it is applied to the background images or as an overlay to make the content focused.

The blur effect in Adobe XD is non-destructive means it does not affect the original image. When we disable the blur effect, the image and objects will be reverted to their original view. But, in Photoshop, the blur tool is destructive means if we apply blur on an image or object, it will affect the original object. See blur tool in Photoshop.

We have discussed different styling options available in the Appearance panel of the XD. These options will be useful for styling an object, such as text, images, and shapes.