Learn to set stroke, fill, and drop shadow for objects in Adobe XD.

Apply a fill color to an object

  1. Select the object.

  2. Click the rectangle next to Fill. The Color Picker appears.

    The color picker
    The color picker
  3. You can choose to:

    • Specify the HSBA, RGB, or hexadecimal values if you know the exact values. You can also switch between the different color modes.
    • Adjust the color using the color field and color slider. When you do so, the numeric HSBA, RGB, and hexadecimal values are adjusted accordingly.  
    • You can set the fill and the opacity of the fill by using the color slider or specifying a value in percentage.
    • Use the Eyedropper tool to select a color from an artboard.
    • You can also apply gradient fills to object. For more information on gradients, see Create and modify gradients.

    As you modify the options in the color picker, you can preview the changes on the artboard.

    Bemærk:

    Adobe XD also supports shorthand for hexadecimal codes. For example, if you type 0 and press Return, XD automatically displays the color with code #000000.

  4. You can save a color as a swatch for future use. To save a color as a swatch, click the + icon at the bottom of the Color Picker. 

    Add swatches
    Add swatches

    You can rearrange swatches in the color picker by dragging a swatch to the new location. To delete a swatch, drag it outside the color picker.

Apply image fill to objects

First, turn on the fill if it's not already on (as described in Apply a fill color to an object). Then, drag the image onto the object from the location where you have saved it (for example, Finder or Windows Explorer).

Crop and place image fills

You can now double-click images placed within containers (Object > mask with Shape) to crop and reposition the images (when dragged from the desktop) within the image fills. Use the Crop mode in an image fill to:

  •      Double click and enter a crop mode for an image fill
  •      Reposition the image within the crop mode, or
  •      Move the image anywhere in the crop mode

This enhancement is also applicable for files imported from Photoshop and Sketch. The imported files retain the image fills and the crop performed in the source application.

Image paste from clipboard

You can also copy an image outside of Adobe XD into your operating system clipboard, select a shape, and paste the image as an image fill from your operating system clipboard. Images will also fill a shape if a shape is selected and a user selects File > Import.

Create strokes and specify stroke color

  1. Select the object.

  2. The default stroke width is 1. To specify a different value, change the Border value.

  3. Click the rectangular color chip next to Border. The Color picker appears.

    The color picker
    The color picker
  4. You can choose to:

    • Specify the HSBA, RGB, or hexadecimal values if you know the exact values.
    • Adjust the color using the color field and color slider. When you do so, the numeric HSBA, RGB,  and hexadecimal values are adjusted accordingly.  
    • Use the Eyedropper tool to select a color from an artboard.
    • Set the opacity of the border using the color slider or typing in a value in percentage.
    • Edit the border size and create dotted lines
    • Specify end caps (Butt, Round, Projecting) and joins (Miter, Round, Bevel), and inner and outer strokes.

    As you modify the options in the color picker, you can preview the stroke color on the object.

  5. You can save a color as a swatch for future use. To save a color as a swatch, click the + icon at the bottom of the Color Picker. 

    Add swatches
    Add swatches

    You can rearrange swatches in the color picker by dragging a swatch to a new location. To delete a swatch, drag it off the color picker.

  6. If the object is a closed path, you can specify the stroke width. To align the stroke along the path, choose one of the following options listed in the next illustration.

    By default, XD aligns the inner stroke in a closed path.

    Stroke styles
    Stroke styles

    A. Inner stroke B. Outer stroke C. Center stroke D. Butt cap E. Round cap F. Projecting cap G. Miter join H. Round join I. Bevel join 

    Bemærk:

    Changing the stroke width or stroke alignment does not change the actual size of the object (in terms of the bounding box). However, when you export the object, chances are there for the dimensions of the object to change depending on the type of stroke used.

    SVG only supports center strokes. So, if you export an object with inner or outer strokes as SVG, the size of the exported image appears as if it had a center stroke.

Create a drop shadow

  1. Select the object.

  2. To choose a color for the shadow, click Shadow in the Property Inspector. The Color Picker appears.

    You can choose to:

    • Specify the HSBA, RGB, or hexadecimal values if you know the exact values. You can also switch easily between the different color modes.
    • Adjust the color using the color field and color slider. When you do so, the numeric HSBA, RGB, and hexadecimal values are adjusted accordingly.  
    • Use the Eyedropper tool to select a color from an artboard.
    • Set the opacity of the shadow using the color slider or typing in a value in percentage.
  3. Specify the following options:

    X offset and Y offset

    Specifies the distance you want the drop shadow to be offset from the object.

    B

    (Blur) Specifies the distance from the edge of the shadow where you want any blurring to occur.

    Specifies the distance from the edge of the shadow where you want any blurring to occur. Illustrator creates a transparent raster object to simulate the blur.
    Specifies the distance from the edge of the shadow where you want any blurring to occur. Illustrator creates a transparent raster object to simulate the blur.
    Specifies the distance from the edge of the shadow where you want any blurring to occur. Illustrator creates a transparent raster object to simulate the blur.
    Specifies the distance from the edge of the shadow where you want any blurring to occur. Illustrator creates a transparent raster object to simulate the blur.

    Specifying the drop shadow
    Specifying the drop shadow

    To save a swatch, click the + icon at the bottom of the color picker. You can rearrange swatches in the color picker by dragging a swatch to a new location. To delete a swatch, drag it off the color picker.

Remove a fill, shadow, or stroke from an object

Select the object. Then, click the check box next to Border, Fill, or Shadow in the Property Inspector. If you want the fill, stroke, or shadow back, click the check box again.

Dette arbejde har licens under en Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Opslag på Twitter™ og Facebook er ikke omfattet af vilkårene for Creative Commons.

Juridiske meddelelser   |   Politik for beskyttelse af personlige oplysninger online