Efficiency Tips3:06 with Hope Armstrong
Learn best practices for making mockups more efficiently.
Now that you know the basics, I'll share a few efficiency tips. 0:00 Throughout your project, be sure to give assets and artboards meaningful names. 0:04 As you create mockups, you'll amass several layers, and 0:10 it quickly gets confusing. 0:13 When naming artboards, 0:15 include any important changes, such as the page name or interaction state. 0:16 With the assets panel open, rearrange styles and components in a logical order. 0:22 This keeps it organized and tidy. 0:28 Speaking of components, create components wherever possible. 0:32 These reusable UI elements are defined in a master version. 0:36 And then they can be easily be repeated across your art boards in multiple 0:41 instances. 0:45 While you could duplicate these elements, 0:46 they're much easier to maintain as a component. 0:48 As a component, you can edit in one place and 0:52 the change gets automatically updated across the other instances. 0:54 If you ever need to override an aspect of a component, 0:59 make the changes to an instance. 1:02 This won't affect the master component. 1:04 If you decide you don't like your overrides, you can reset it back to 1:07 the original master component by right-clicking an instance and 1:11 selecting Reset to Master Component. 1:15 It's also easy to replace components. 1:17 With the assets panel open, drag and 1:20 drop a component onto a component on an artboard. 1:22 Watch as it magically replaces it. 1:25 Be sure to use styles wherever possible. 1:29 Adobe XD has character and color styles. 1:33 Similar to components, you can define them in one spot and 1:36 reuse them across your designs. 1:40 Character styles are listed on the asset tab. 1:43 To create a new one, first select a text box with the desired style. 1:48 Then click the plus icon to create a new style. 1:56 This saves the textbox's properties as a new character style. 2:00 Double-click the style to give it a descriptive name. 2:04 Now, that style was just for fun, but my real character styles for 2:13 this project were titles, subheading, pull quote, and so on. 2:17 Color styles work in the same way. 2:21 Select the color, then click the plus icon to add it as a new color style. 2:29 So in this project, I have brand primary, link, 2:35 a couple of gradients, and topic colors for lifestyle, environment, and health. 2:38 Don't sweat it if you don't have your workflow streamlined right away. 2:44 The more you practice, 2:48 the more you'll develop these techniques that allow you to work more efficiently. 2:49 Also, if you're using another design program, Figma or 2:53 Sketch have similar features. 2:57 Check out the teacher's notes. 2:59 In the next video, we'll take a look at how to share these mockups with others. 3:01
You need to sign up for Treehouse in order to download course files.Sign up