Christopher Smith

Article / Updated 01-22-2018

Repeat Grid is one of the top timesaving features in Adobe XD. The Repeat Grid feature allows you to create a set of repeated elements with a simple click and drag. When repeated, you can tweak one set of repeated elements and have those changes reflected instantly throughout the rest of the elements. The steps you find here help you experience this great feature. It is best to follow along with the instructions if you can. You can find a sample file that has an image and some text in it in the DummiesCCfiles folder. Open the XD folder and choose the RepeatGrid-Sample file. Then follow these steps: Open a file that has elements that you want to repeat vertically (down) the page. As previously mentioned, you can create your own or use the RepeatGrid-Sample file that has been provided at our site. Select all the items that are to be repeated, and then press the Repeat Grid button in the Properties panel. You could also choose to use the keyboard shortcut, Ctrl+R (Windows) or ⌘  +R (Mac). Handles appear on the right and bottom sides of your elements. Click and drag down on the bottom handle to see that a repeat is created automatically as you drag. Drag beyond the template to extend the artwork outside the bottom. Go back to your original art and make a simple change. Perhaps change the type size of the title, or scale the image a bit. Notice that as you make changes in this first item the changes are reflected throughout the repeat. This can be a huge timesaver, but follow along through the next steps to see how you can easily replace the repeated image and text. Importing updated images into your repeated grid After you have repeated items, you may want to demonstrate how your application is going to work with more realistic content. The repeated element does not provide an opportunity to show the various data that your app may be offering. Below, you take a folder of images and drop them on top of your repeated grid in order to replace your original image. Just follow these steps: Locate a folder of images in a format that XD supports, such as JPEG, PNG, or GIF. If you are accessing the DummiesCCfiles folder, you can find a folder named Insects inside the XD Files folder. Position your XD window that contains the artboard with the repeat so that you can see it and also the folder full of images. Make sure to select all the images, and then click and drag them onto the Repeated Grid. The images are replaced. You can drag images from the Bridge application into Adobe XD as well. Updating your text in your repeated grid Here, you discover how to update your text in a repeated grid. This is completed in much the same way as with images, but the .txt format is vital to having this process work: Create text in any application that can save the file in a Plain Text format — that is, with an extension of .txt. The text can be generated from Notepad, Word, downloaded from Google Docs as Plain Text, or exported from many other applications. For this example, you can use the sample text file named Bugtext.txt in the XD-Files folder on our site. Position the folder that contains the text file so that you can see the file and the repeated grid. As with the process of replacing the repeated image, click and drag the .txt file over your repeated grid text. The text is replaced with text from your file. You can see the example as it appears once the imagery and text have been replaced here. If you extended beyond the viewing area, make sure to click on the artboard name above the artboard to select it. Drag the bottom handle to extend to the length of your repeated grid. This allows the screen to be scrolled in the preview. The dotted line represents the area that previews before the scroll. Click on the Desktop Preview button and scroll to see your repeated grid in action.

Article / Updated 01-22-2018

When you have text in your Adobe XD project, you can start changing the text properties. These properties include Font Family, Font Size, Font Weight, Alignment, Character Spacing (kerning and tracking), Line Spacing (leading), Fill, Border (stroke), Shadow (drop shadow), and Background Blur. So let’s review how those properties are applied. About readability and font selections The selection of a font is of critical importance. You may have many font choices in your system, but only a select few will cut it as a successful choice for onscreen reading. Some characteristics to look for in your font selection include the following: Serif or non-serif? Below, you see a font family in the serif style on the top and one in sans serif on the bottom. Serifs have a slight projection that finishes off a stroke of a letter. Sans serif, on the other hand, does not have that slight projection. Sans serif typefaces tend to look more modern and are a popular choice for interactive applications and websites. In the past, it was believed that font families with serifs were easier to read when there was a large amount of text. Tests performed with eye-tracking devices have proven that there is no major difference in readability between serif or sans-serif, so feel free to pick either style as long as you pay attention to some of the other font characteristics that follow. Straight, even line widths: Because your type is going to be created from pixels, it is best not to have lots of variation in the width of your text. You can see the difference, in a pixel preview, between a font choice with variation in the width (top) and a font that is consistent in its width. Strong counters: Counters are the holes that you see in letters like “O,” “B,” and “R.” Pay attention to how large those counters are as they can also cause readability issues if they close up when displayed as pixels on a screen. A pixel view of two different font families appears; see how the counters look in each in comparison to each other. Descenders and cap height: Short descenders and low cap heights are important for readability on the screen. At the top you see a font family with short descenders and low cap heights; at the bottom, a font with long descenders and high cap heights. Selecting your font family Now that you know what makes a better font selection for readability, use the Properties panel to select one. Things to look for when making your selection include the following: Font family: After you have entered some type on your screen, you can select it and choose the Font Family drop-down menu in the Text section of the Properties panel. If you know the font you want, simply start typing the font’s name into the Font Family textbox, and if it is in your system, it will be found in your list. Don’t forget that you have fonts available to you through Adobe TypeKit. Font weight: After you select a font family, you can choose a weight from the Font Weight drop-down menu. Depending upon the fonts that you have in your system, you will have different font weight choices. Font size: You can simply type a font size into the Font Size textbox, but if you are not sure what size works best, you can position your cursor underneath the Font Size textbox and click and drag. Look for the double-headed arrow before you drag. Dragging up decreases the size; down increases the size. Alignment: You can change your selected text to Align Left, Center, or Right using the Alignment buttons in the Text section of the Properties panel. Character spacing: Character spacing refers to the space between characters. This is known as tracking. Here, you see the result of increasing the spacing between characters. Note that you can use the same click-and-drag technique that is available in the Font Size textbox in order to visually change the character spacing. Line height: Line height is leading, the space between the lines of text. This can play an important role in information design, so make sure that you are using this consistently throughout your design. You can also position your cursor below the Line Height textbox and click and drag up or down to decrease and increase your line height. Color: Change the Fill color by clicking on the box next to Fill color in the Properties panel. You perform this task the same way you would with any shape. Select the Fill box and select a color from the Color Picker. You can also select transparency for your text from the Transparency slide available on the right of the Color Picker. Border: Applying a border puts a stroke around your text. This is not recommended because it may cause readability issues. Use it sparingly and perhaps only for special effects. The image below shows an example of a larger typeface that has a thin stroke and a white fill on a darker background. In a situation like this, a border could work, but not with smaller text.

Article / Updated 01-19-2018

After you have imported your images into Adobe XD, you don’t have a great deal of editing control, but you can resize and rotate images just like you would any other shape. You can also easily round the corners of an imported image using the corner widgets. Masking your images By defining a closed shape with a shape tool or pen tool, you can define what becomes a mask. A mask offers you the ability to put an image into a custom shape. It also offers you the ability to crop out parts of an image that you do not want to be visible. Follow these steps in order to create a mask: Import an image on to an artboard. Create a shape and size and position it over the image. The placement over the image determines what part of the image will show. Using the Select tool, select both the shape and the image. It is important that the shape be on top of the image; if it is not, choose Object →Arrange → Bring to Front. With both objects selected, choose Object → Mask with Shape. The shape now contains the image. If you would like to edit the positioning of the shape over the image, simply double-click the masked object using the Select tool. When you are finished repositioning your image and shape, click anywhere else on your artboard. Taking advantage of masks You can mask any object(s) with a shape. Perhaps you have several items that you want to keep together in a circular shape, or you want to crop a series of repeated images. Both of these tasks can be done by following these steps: After creating your artwork, add a shape on the top, or bring a shape that you wish to mask into to the front using Object → Arrange → Bring to Front. Select all the objects that are to be masked in addition to the topmost object, which is the mask, and choose Object  → Mask with Shape. If you need to edit objects in a mask independently, you can either choose Object → Ungroup Mask, or open the Layers panel and double-click on the icon to the left of the object named Mask Group. When you double-click, it allows you to select individual objects.

Article / Updated 01-19-2018

Using the Layers panel that appears when you click on the Adobe XD Layers icon, you can rearrange the stacking order, rename, duplicate, delete, and select artboards. Rearranging artboards Click and drag up or down an artboard in the Artboard in the Layers panel in order to move it up or down in the stacking order. If you like working with contextual menus, you can right-click any artboard listed in the Layers panel to see a list of features you can use, including Copy, Paste, Duplicate, Delete, Rename, and Export. Following are other methods you can use to take advantage of these same features. Renaming your artboards You can rename your artboards using one of these methods: Double-click the Artboard name that appears directly above the artboard, and then type a new name. Double-click the Artboard name that appears in the Layers panel, and type a new name. Copying or duplicating an artboard To copy your artboard in order to paste it into another document, right-click it and select Copy. Then open a new document or navigate to another open document and choose Edit → Paste. To duplicate an artboard, right-click it and select Duplicate. A new artboard immediately appears at the top of the list and in your work area. You can also duplicate an artboard by holding down the Alt (Windows) or Option (Mac OS) key and dragging the artboard into the work area. Deleting an artboard Be careful with deleting artboards. It is very easy to do, because you only have to select an artboard in the Layers panel and press the Delete or Backspace key. Fortunately, this step can be undone using Ctrl+Z (Windows) or Command+Z (Mac OS). Selecting artboards Before trying to select artboards, make sure that you have at least three in your project. To select an artboard, simply click the artboard name in the Layers panel. You can also click on the artboard name above the artboard to select it. To select multiple artboards, click an artboard, and then Shift-click on another. This action selects all artboards in between in the stacking order as well. To select artboards that are not contiguous, select an artboard and then hold down the Control+Shift(Windows) or Command+Shift keys and select another.

Article / Updated 01-19-2018

After you start creating many objects in Adobe XD, you need to consider the position of those objects and how they relate to each other. In order to lessen noise in your design, you want to keep icons and text aligned and distributed in a clean manner. You can check your alignment in several ways, including using a grid or using guides. Turning on your grid You can turn on a grid that is only visible to you by following these steps: Select an artboard by clicking the artboard in the Layers panel or clicking the Artboard name above the artboard in your work area. Check the checkbox for the Grid in the lower portion of the Properties panel. If you prefer a different color for your grid, select the square to the right of the grid checkbox and select a color from the color picker. You can also use the Transparency slider to change the level of opacity. If you like, change the size of the grid by typing a value in the Grid Size textbox to the right of the checkbox. Be smart about your guides As a default, XD provides you with guides that turn on as needed. These are called Smart Guides and should be familiar to you if you use other Adobe Products. To use the smart guides, simply pay attention to the lines and shaded areas that appear as you work. Note in the image below that when the one diamond is dragged, a guide appears indicating that it is aligned with the diamond on the left. Smart guides can help with distribution as well Distribution of objects refers to the space between a bounding box created by a first object and a last object. Here, you see uneven distribution of several diamonds on the left, and even distribution of the same objects on the right. In this example, the spacing is evenly distributed horizontally. When you position objects, you will see shaded areas appear that indicate when the space between the objects is equal. This shading hint also appears when you Alt/Option drag to clone objects. Using the Align and Distribute feature The Align and Distribute feature that is available in the Object menu and in the Properties panel can help you keep items in line and spaced evening. If you select two items, you can take advantage of the Alignment features. If you select three or more objects, you can also use the Distribution features. Keep in mind the trick to determining horizontal versus vertical. The horizon is horizontal. Anything going from left to right on your page should be distributed horizontally. Any objects going from the top to the bottom should be distributed vertically.

Article / Updated 01-19-2018

A border, also known as a stroke, can be applied to any of your Adobe XD document’s shapes and paths. When you create a border, you select both the width and color. If you still have your button selected, make sure the checkbox is on to the left of the Border in the Properties panel; then click the box to the right of the checkbox to open the color picker and select a color that you would like to use for your border. To select a width, type a value into the Width textbox. Sampling a color using the eyedropper Both the Fill and the Border have an eyedropper icon positioned off to the right. You can select the Eyedropper tool in the Properties panel and then click on any color located within your current project. This can be helpful when you have imported images that you want to sample colors from or if you are trying to match controls that were created in a different application. Creating a gradient Adobe XD includes advanced tools that make it simple to create gradients. To create and use a gradient in your project, follow these steps: Select a shape. Currently, a gradient can only be applied to a fill. Click the box to the left of Fill in the Properties panel to open the color picker. Click Solid Fill at the top of the picker and select Gradient from the menu that appears. A gradient ramp appears with default colors. You can either click the gradient ramp at the top of the color picker to add colors, or click directly on the gradient annotator that appears inside the fill of your object. After you click to add a color stop, you can then use the picker to select a color. Continue adding color stops with various colors if you like. Click and drag the color stops to reposition them. Remove any unwanted color stops by selecting one and then pressing the Delete or Backspace key. Choose a level of transparency by selecting a color stop, and then dragging up or down in the transparency slider on the right side of the color picker.

Article / Updated 01-18-2018

Here, you are directed through the steps to create a simple button with a solid fill and some text in Adobe XD. Follow along with these simple steps. Select the Rectangle tool and click and drag to create a rectangle of any size on an artboard. In this example, the standard iPhone 6 template is selected. With the rectangle still active, type 200 into the Width textbox and 70 into the Height textbox. Press Tab after you type each to confirm the value. Applying a solid fill Here, you add a solid fill color to your shape: Make sure your rectangle is still selected. Click the white box to the left of Fill in the Properties panel to open the color picker. Scroll through the colors by clicking and dragging on the Hue slider. After you have entered the hue color that you like, click a color in the color panel to apply it to your rectangle. You can save colors that you might use often by clicking the Save Color Swatch plus sign at the bottom of the color picker. You can apply transparency to your fill by using the slider on the right side of the color picker window. Uncheck the checkbox to the left of Border to remove the stroke around the rectangle. Rounding your corners You can leave the corners square or follow either of these next steps to round the corners of the shape: You can round corners visually by clicking and dragging the corner widgets inside the corners of the rectangles. Hold down the Alt (Windows) or Option (Mac OS) key and drag one corner radius to make it an independent value. You can also enter values for your corner radius entering values in the Corner Radios textboxes in the Properties panel. Adding text to your button Now you add the text to the button: Select the Type tool from the Tools panel and then click inside your button. A text cursor appears. Don’t worry about the exact placement of the textbox because this can be moved later. Type the word Submit, and then select the text by pressing Ctrl+A (Windows) or Command+A (Mac). With the word selected, change the properties in the Text area of the Properties panel to select a font and a type size you like. You can also change the alignment by selecting the Left Align, Center, or Right Align buttons. You can select your current font size in the Font size textbox and press the arrow up or down to increase or decrease the font size. Click on the Fill box to change the color of your text.

Article / Updated 01-18-2018

If you find that you are reusing objects in your Adobe XD UI, you should consider converting them to symbols. Symbols are linked objects that can be reused across all artboards in a document. Because they are dynamically linked, changes to one reflect across all instances. In this next set of steps, you use the icon artwork from this DummiesCCfiles folder. You can use our sample files or one of your own. To convert an object into a symbol, follow these steps: Open a document that contains at least one artboard, an icon, and some related text. In this example, we open the file from the DummiesCCfiles folder named delivery-symbol-sample in Adobe XD. Select an object and some text that you want to reuse. In this example, one of the grouped Submit buttons is selected. Right-click (Windows) or Ctrl-click (Mac) and select Make Symbol from the contextual menu. If you like keyboard shortcuts, you can select an item and press Ctrl+K (Windows) or ⌘  +K (Mac) to convert it into a symbol. A couple things happen when you convert object(s) into a symbol: If you look in the Layers panel, the object that you converted into a symbol now has a symbol icon to the left of the name. If you click the Symbols icon in the lower left of the XD workspace, you see your symbol in a thumbnail view. Using your symbol Perhaps you want to use this symbol in another location. You can do so by following these steps: If you are using the delivery-symbol-sample file, delete the Submit button on artboard iPhone 6/7-2 (use the Delete or Backspace keys to delete). If you are creating your own file, this step is unnecessary. Make sure the Symbols panel is open by clicking the Symbols icon in the lower left of the XD workspace. Click and drag the newly created symbol from the Symbols panel to the second artboard. Reposition it as necessary. You can also Alt/Option-drag a symbol to clone it to another location. Making edits to your symbol Here, you see how edits to one instance of your symbol instantaneously update any other instances. To see how this works, follow these steps: Click the rectangle in one of your symbol instances. In the Properties panel, change the Fill to a different color, perhaps red. Note how that change instantly occurs in both instances of the symbol. This is the case with any property. Now double-click the text in either symbol to edit it. Change the word from Submit to Send. Notice that this change of text is not reflected in the other instance. This makes a great solution when you want consistency in buttons but don’t want the same text in each one. If the text change is something that you want reflected in all the symbol instances, right-click and choose Update All Symbols. Removing a symbol If you are no longer interested in keeping your symbol instances linked, you can right-click on the symbol in the Symbols panel and select Remove Symbol from the contextual menu. The objects on the page are not deleted, but they are no longer linked to a symbol and can be edited independently. If you want to remove just one symbol to change it without affecting all instances of the symbol, select the symbol, right-click, and select Ungroup Symbol.

Article / Updated 01-18-2018

There are many times that you want to show items scrolling in your Adobe XD prototype. You can simulate scrolling by changing the size of the artboard while keeping something called the View Point at the original artboard size. If you were following along earlier, you can use any of the artboards you have created, or create a new file with an artboard of any size. You will first need to create content that extends beyond your screen area. For this, you add some easy shapes: Select the Ellipse tool and click and drag to add a circle to your artboard. Choose the Selection tool. Hold down the Alt (Windows) or Option (Mac) key and drag the circle down to clone it. Repeat this as many times as you need to in order to have content positioned outside the default template size. Now, select the artboard either by clicking on the artboard name or by Ctrl-clicking (Windows) or ⌘-clicking (Mac) on the artboard. Make sure that Scrolling is selected in the Scrolling section of the Properties Inspector. Note the value in the Viewport Height. Click and drag the bottom-middle handle. This extends the artboard, but if you used a default template you should see a dotted guide where the artboard used to end. If you do not see this dotted guide, see the following note. If you are using a default template, the Viewport Height value will not change when you click and drag to make your artboard longer. If Viewport Height does change, you more than likely created your artboard with custom values. No worries; just type back in the original height into the view box control after you extend your artboard. Now you can test the scrolling by clicking on the Desktop Preview play button in the upper right of your workspace. Note that when the preview appears that you can scroll through your content. Now that you are familiar with the basics of creating and organizing artboards, you are ready to start putting more content on those screens.

Article / Updated 01-18-2018

You can bend objects — make them wavy, gooey, or spiky — by creating simple to complex distortions with the Illustrator Liquify tools and the Envelope Distort features. The Liquify tools The Liquify tools can accomplish all sorts of creative or wacky (depending on how you look at it) distortions to your objects. You can choose from eight Liquify tools. You should experiment with these tools to understand their full capabilities. Here are some tips: A variety of Liquify tools are available by holding down the mouse button on the default selection, the Width tool. If you use the tools frequently, drag to the arrow at the end of the tools. You can then position the tools anywhere in your work area. Double-click any Liquify tool to open a dialog box specific to the selected tool. When a Liquify tool is selected, the brush size appears. Adjust the diameter and shape of the Liquify tool by holding down the Alt (Windows) or Option (Mac) key while dragging the brush shape smaller or larger. Press the Shift key to constrain the shape to a circle. Using the Width tool, cross over a selected path. When a hollow square appears, click and drag outward (or inward), and the stroke width at that location is adjusted. If you want a little more accuracy, you can double-click the stroke by using the Width tool and create, modify, or delete the width point by using the Width Point Edit dialog box. To create a discontinuous width point, just create two width points on a stroke with different stroke widths and then drag one width point on to the other width point to create a discontinuous width point for the stroke. Width Tool Keyboard Shortcuts Width Tool Function Windows Mac OS Create non-uniform widths Alt-drag Opt-drag Create a copy of the width point Alt-drag the width point Opt-drag the width point Copy and move all the points along the path Alt+Shift+drag Opt+Shift+drag Change the position of multiple width points Shift-drag Shift-drag Select multiple width points Shift-click Shift-click Delete selected width points Delete Delete Deselect a width point Esc Esc Check out the Liquify tools next. The Liquify Tools Icon Tool Name What It Does to an Object Width Increases the stroke width or height when you click and drag a path. Warp Molds it with the movement of the cursor. (Pretend that you’re pushing through dough with this tool.) Twirl Creates swirling distortions within it. Pucker Deflates it. Bloat Inflates it. Scallop Adds curved details to its outline. (Think of a seashell with scalloped edges.) Crystallize Adds many spiked details to the outline of an object, such as crystals on a rock. Wrinkle Adds wrinklelike details to the outline of an object. Using the Envelope Distort command Use the Envelope Distort command to arch text and apply other creative distortions to an Illustrator object. To use the Envelope Distort command, you can use a preset warp (the easiest method), a grid, or a top object to determine the amount and type of distortion. Using the preset warps Experimenting with warp presets is a little more interesting if you have a word or an object selected before trying out the warp options. To warp an object or some text to a preset style, follow these steps: Select the text or object that you want to distort and then choose Object  →  Envelope Distort  →  Make with Warp. The Warp Options dialog box appears. Select a warp style from the Style drop-down list and then specify any other options you want. Click OK to apply the distortion. If you want to experiment with warping but also want to revert to the original at any time, choose Effect  →  Warp. You later change or delete the warp effect by double-clicking it in the Appearance panel or by dragging the effect to the trash can in the Appearance panel. Reshaping with a mesh grid You can assign a grid to an object so that you can drag different points and create your own, custom distortion. Follow these steps to apply a mesh grid: Using the Selection tool, select the text or object that you want to distort and then choose Object  →  Envelope Distort  →  Make with Mesh. The Envelope Mesh dialog box appears. Specify the number of rows and columns you want the mesh to contain and then click OK. Drag any anchor point on the mesh grid with the Direct Selection tool to reshape the object. To delete anchor points on the mesh grid, select an anchor point by using the Direct Selection tool and press the Delete key. You can also use the Mesh tool to edit and delete points when using a mesh grid on objects. Reshaping an object with a different object To form letters into the shape of an oval or to distort selected objects into another object, use this technique: Create text that you want to distort. Create the object you want to use as the envelope (the object to be used to define the distortion). Choose Object  →  Arrange to ensure that the envelope object is on top. Select the text and Shift-click to select the envelope object. Choose Object  →  Envelope Distort  →  Make with Top Object. The underlying object is distorted to fit the shape of the top (envelope) object. Choose Effect  →  Distort and Transform  →  Free Distort to take advantage of the Free Distort dialog box. You can edit or undo effects at any time by clicking or deleting the Free Distort effect from the Appearance menu.