Adobe XD Tutorial: A Pain-free Way to Import Assets

Ever since Adobe decided to take on Sketch by finally building a dedicated user interface design tool, many have wondered how long it would take before both apps were fighting in the same weight division.

Let's take a look at Adobe XD's new drag and drop asset import feature, and then you can decide for yourself. Adobe XD is only available for Mac at the moment, but it'll be available for Windows very soon. Here's how we typically import assets today:

• Save As → File → Import or
• Ctrl/Command+C → Ctrl/Command+V

"Drag and drop" has also been a feature in most design applications for as long as I can remember, but there's no way to automate this action with various reusable components at once, essentially offering unique content to a set of components that are otherwise identical in terms of visuals – until now that is.

Designing a Grid of Article Cards with Repeat Grids

Start by opening a new "Web" document from the splash screen - it doesn't matter which size you choose, as long as there's a lovely white canvas to work on. Press R to create and draw a rectangle, and ensure that the dimensions are 400x300px.

Now create another rectangle (400x100px), remove its border, and then use black (#000000) with 80% opacity for the "Fill" color – make sure to select Color Sliders → RGB Sliders first.

Let's create a series of text layers to lay over this rectangle; in a moment it'll be clear that we're designing article cards consisting of the article's category, title, and date. Press T to select the "Text" tool and use the following optional styles:

• Fill: #F39C12
• Text: Helvetica Neue, 15, Bold
• Height: 18 (same as Line Spacing)

And again:

• Text: Helvetica Neue, 21, Condensed Bold
• Fill: #FFFFFF
• Height: 26

Final time:

• Text: Helvetica Neue, 14, Regular
• Fill: #FFFFFF
• Height: 16
• Align: Right

Reusing Components with the Repeat Grid Tool

Drag the mouse cursor to select all of the layers at once, then select the "Repeat Grid" tool from the sidebar. You'll notice that the component now has tug-able side handles – you can tug these handles to tile the component as many times as needed. What happens to one tile will happen to all of them (in terms of styling, but not necessarily in content, which is very handy).

Tip: you can easily adjust the width of the gutter by dragging the spaces in-between each row or column of the grid.

Continue reading %Adobe XD Tutorial: A Pain-free Way to Import Assets%

by Daniel Schwarz via SitePoint