How to Use Adobe XD’s Smart Guides

Original Source: https://www.sitepoint.com/using-adobe-xds-smart-guides/

The following is a short extract from our book, Jump Start Adobe XD, written by Daniel Schwarz, a highly practical tutorial on this fantastic prototyping tool. SitePoint Premium members get access with their membership, or you can buy a copy in stores worldwide.

Smart Guides were originally introduced in Sketch and later adopted in Photoshop after the feature became a hit. Adobe XD explains them in their help section: “When you move an object or artboard, use Smart Guides to align the selected object or artboard to other objects or artboards. The alignment is based on the geometry of objects and artboards. Guides appear as the object approaches the edge or center point of other objects."

Let me start by saying than an object is a common term used to describe a shape layer, text layer, group or bitmap on the canvas. Basically, any type of layer or group is an object.

Guides are visual cues that illustrate how objects align to one another — they can display the distance between two layers, or indicate whether or not a layer has snapped to the bounds of another object or artboard edge. Adobe XD will try to anticipate where you want to move a layer, and automatically snap to that location when you draw close to it, while showing how far you have left until you reach it. You can work out the distance manually by selecting the first layer, holding Option/Alt, and hovering over the second layer.

Manual Alignments

Let's start by aligning a layer manually, so we understand the difference. A moment ago we grouped two text layers together — select both of them once more (hold Shift while you click them) and click the Align Center (Horizontally) button in the Inspector, or use the shortcut: Cmd + Control + C (Shift + C in Windows).

Smart Guides When Moving Layers

Now select the actual group. You can either use the Select tool (keyboard shortcut: V) and select the group by clicking on it, or use the Esc key to traverse up to the parent container, which is the group. Move it until two things happen:

It appears 28px below the form
It snaps to the dead-center of the artboard horizontally

You’ll know you’ve done this correctly because the colored lines of the smart guides will illustrate what the object has snapped to (which will be the dead-center of the artboard, as indicated by the vertical line that appears). You'll also notice the relative distance between the search function group and the welcome text group (as indicated by the numerical value).

Smart Guides With Option/Alt-Hold

Select the bottom-most layer of this group, hold Option (Alt in Windows), then hover the cursor over the top-most layer. This is a manual approach (also known as Option/Alt-hold) to measuring the relative distance between two layers. You can move layers as normal while option-holding, so use the ↑→↓← arrow keys until the distance is 5px.

Let's use what we've learned to add some more elements. So far we’ve taken our first look at shape layers, text layers, grouping of layers, alignments, smart guides, and some other basics. Let's recap some of that and finish off this screen, starting with a bottom navigation component with four links.

Continue reading %How to Use Adobe XD’s Smart Guides%