Artwork by Matt Rae
Whether you’re designing a website landing page for a new product launch, prototyping a mobile app experience, or crafting ad banners for a marketing campaign, Adobe XD gives you contextual tools for styling your designs. In this guide you’ll learn several tips and tricks to integrate into your styling workflow.
If you’re interested in learning more tips and tricks, check out our Tips and tricks for working with layout in Adobe XD.
Object fills and gradients
Easily pick colors with the Eyedropper tool hotkey
From the Properties Inspector in Adobe XD, colors can easily be picked for object fills and borders using the Eyedropper icon to the right of the color box. However, there is also a keyboard shortcut. Pressing I on the keyboard at any time will open the Eyedropper tool for object fill, allowing you to pick a color from anywhere on your screen.
Change the opacity of an object
In Adobe XD, fills and border colors can have specific opacity defined in the color picker. However, the overall opacity of an object can also be defined and edited simply by using the number keys.
With an object selected, use the number keys to change the opacity in increments of 10%. Use 1 for 10%, 2 for 20%, etc. with 0 representing 100%.
Paste the appearance of one object onto another
If you’re looking for a quick way to style an object to match another object, using the Paste Appearance function will save you lots of time.
To use this, just copy the object with the appearance you wish to replicate, and then right-click on the target object and select Paste Appearance. This will paste the fill, border, and shadows from the original object. This will not however change the shape, meaning that you can use this to paste the appearance of an ellipse onto a rectangle or vice versa.
Save colors to the Document Assets
Once a color is applied, it can be saved for later. Rather than adding the color temporarily to the color picker, open the Document Assets and save colors or character styles by clicking on the + icon next to that section. Colors can then be named by double-clicking on them, and later can be published as a library to share with others.
Globally edit a style saved in your assets
Once colors are saved in the Asset panel, they can be applied to a selected object by simply clicking on the color of choice. Colors applied this way remain linked back to the asset, and can be globally edited if that color value should change.
To do so, simply right-click on a color in the Document Asset panel and select Edit. You’ll see all the instances of that color change in real time.
Easily see where a style is applied
Within the Asset panel it's easy to identify where a color or character style has been used. Simply right-click on the asset and select Highlight on canvas to show all instances highlighted with a blue box in the design.
Apply a color from the asset panel as the border color
Not only can you set the fill color of an object by clicking on the color in the asset panel, you can also apply the border color from the Asset panel as well.
To apply a border color from the asset panel in Adobe XD, simply right-click on the desired color and select Apply border color.
Use gradients as fills
Fills are not limited to solid colors, in fact a shape can have one of four fill types; Solid Color, Linear Gradient, Radial Gradient, and Angular Gradient.
Gradient fills can be edited both in the color picker like with the solid color fill, but also directly on your design using the on canvas controls. Add colors, remove colors and change the angle of a gradient directly in context.
Creating image fills with drag and drop
Though technically not a fill, any shape can be populated with an image and Adobe XD will automatically mask the image to fill the shape.
To do this, drag an image from your file browser or a web page into Adobe XD, then release it once the target shape highlights blue. You can then double-click to open up and adjust the mask.
Working with vector paths and shapes
Open editing mode with a click
When working with any shape in Adobe XD, accessing the vector editing mode is easy. With the shape or path selected, press Enter / Return to open the path and reveal the vector points.
If editing a shape, clicking away without making edits will return it to a shape, but once edits are made it will now be a vector path.
Convert a square point to a curved point
The pen tool in Adobe XD can be a powerful tool for drawing custom vector paths. Simply click to create points to form any shape. By default, all these points start as straight corners, meaning they have no curvature.
To add a curve while drawing, click and drag when placing a new point to begin forming it into a curve. If a point is already created, double-clicking on the point will convert it to a curved point, and double-clicking again will return it to a square point.
Asymmetrically edit vector curves
Once a point is converted to a curved point, the handles can be used to adjust that curvature. By default these handles are connected and will symmetrically adjust the curve. To edit one handle independently, hold Alt / Option and click and drag on a single handle to adjust the curve asymmetrically.
Quickly convert a polygon to a heart shape
The polygon tool in Adobe XD provides lots of options for customizing the look of polygon shapes. There is also a hidden feature built into the tool to create hearts, simply by changing the number of sides of the polygon to <3 in the Properties Inspector.
Adjust the border radius of a single corner
The border radius of shapes (not vector paths) can be controlled both on canvas and in the Properties Inspector. The Properties Inspector will indicate which corner you’re editing when the appropriate input field is selected, allowing you to edit individual corners.
This can also be done on canvas by holding Alt / Option and clicking and dragging on the desired corner.
Working with border and stroke
Borders and strokes can be used in many different ways in Adobe XD - to outline a shape, create dashed lines, and even for animating with Auto-Animate. Here are some tips for working with borders and strokes.
Change the positioning and endpoints of a border
The position of a border on the edge of an object can be modified to be on the inside, outside, or centred on the edge of the shape. These controls are available in the property inspector and appear once a border is toggled on.
There are also controls for the roundness of endpoints, and vector points along the path. These are helpful if you’re trying to create a softer appearance to corners, or the ends of a line.
Convert a border to an outline stroke
By default, border strokes in Adobe XD are connected to the shape they’re applied on. When using a standard border in Adobe XD, the border width will remain persistent as the object is resized up and down. If working with elements like iconography, or another element where the border should scale with the object, convert the border to an Outline Stroke.
Do this by selecting the object, and navigating to the Object menu, and selecting Outline stroke under the Path controls. This will now separate the border from the object as an independent path. Group these two elements together so they’ll move as one.
With these tips and tricks in your back pocket you can accelerate your styling workflow and focus more time on building incredible experiences. If you’re interested in learning more tips and tricks, check out this guide on prototyping tips and tricks, or this one on layout tips and tricks.
