1 00:00:00,420 --> 00:00:03,750 Now that you know the basics, I'll share a few efficiency tips. 2 00:00:04,900 --> 00:00:10,000 Throughout your project, be sure to give assets and artboards meaningful names. 3 00:00:10,000 --> 00:00:13,130 As you create mockups, you'll amass several layers, and 4 00:00:13,130 --> 00:00:14,590 it quickly gets confusing. 5 00:00:15,680 --> 00:00:16,990 When naming artboards, 6 00:00:16,990 --> 00:00:21,420 include any important changes, such as the page name or interaction state. 7 00:00:22,630 --> 00:00:28,190 With the assets panel open, rearrange styles and components in a logical order. 8 00:00:28,190 --> 00:00:30,200 This keeps it organized and tidy. 9 00:00:32,060 --> 00:00:36,970 Speaking of components, create components wherever possible. 10 00:00:36,970 --> 00:00:41,170 These reusable UI elements are defined in a master version. 11 00:00:41,170 --> 00:00:45,709 And then they can be easily be repeated across your art boards in multiple 12 00:00:45,709 --> 00:00:46,730 instances. 13 00:00:46,730 --> 00:00:48,685 While you could duplicate these elements, 14 00:00:48,685 --> 00:00:52,100 they're much easier to maintain as a component. 15 00:00:52,100 --> 00:00:54,880 As a component, you can edit in one place and 16 00:00:54,880 --> 00:00:59,200 the change gets automatically updated across the other instances. 17 00:00:59,200 --> 00:01:02,559 If you ever need to override an aspect of a component, 18 00:01:02,559 --> 00:01:04,658 make the changes to an instance. 19 00:01:04,658 --> 00:01:07,050 This won't affect the master component. 20 00:01:07,050 --> 00:01:11,196 If you decide you don't like your overrides, you can reset it back to 21 00:01:11,196 --> 00:01:15,203 the original master component by right-clicking an instance and 22 00:01:15,203 --> 00:01:17,582 selecting Reset to Master Component. 23 00:01:17,582 --> 00:01:20,190 It's also easy to replace components. 24 00:01:20,190 --> 00:01:22,538 With the assets panel open, drag and 25 00:01:22,538 --> 00:01:25,732 drop a component onto a component on an artboard. 26 00:01:25,732 --> 00:01:29,891 Watch as it magically replaces it. 27 00:01:29,891 --> 00:01:33,010 Be sure to use styles wherever possible. 28 00:01:33,010 --> 00:01:36,840 Adobe XD has character and color styles. 29 00:01:36,840 --> 00:01:40,780 Similar to components, you can define them in one spot and 30 00:01:40,780 --> 00:01:43,370 reuse them across your designs. 31 00:01:43,370 --> 00:01:48,452 Character styles are listed on the asset tab. 32 00:01:48,452 --> 00:01:52,428 To create a new one, first select a text box with the desired style. 33 00:01:56,506 --> 00:02:00,163 Then click the plus icon to create a new style. 34 00:02:00,163 --> 00:02:04,149 This saves the textbox's properties as a new character style. 35 00:02:04,149 --> 00:02:06,916 Double-click the style to give it a descriptive name. 36 00:02:13,063 --> 00:02:17,039 Now, that style was just for fun, but my real character styles for 37 00:02:17,039 --> 00:02:21,930 this project were titles, subheading, pull quote, and so on. 38 00:02:21,930 --> 00:02:23,948 Color styles work in the same way. 39 00:02:29,328 --> 00:02:33,550 Select the color, then click the plus icon to add it as a new color style. 40 00:02:35,250 --> 00:02:38,980 So in this project, I have brand primary, link, 41 00:02:38,980 --> 00:02:44,470 a couple of gradients, and topic colors for lifestyle, environment, and health. 42 00:02:44,470 --> 00:02:48,400 Don't sweat it if you don't have your workflow streamlined right away. 43 00:02:48,400 --> 00:02:49,450 The more you practice, 44 00:02:49,450 --> 00:02:53,880 the more you'll develop these techniques that allow you to work more efficiently. 45 00:02:53,880 --> 00:02:57,320 Also, if you're using another design program, Figma or 46 00:02:57,320 --> 00:02:59,660 Sketch have similar features. 47 00:02:59,660 --> 00:03:01,700 Check out the teacher's notes. 48 00:03:01,700 --> 00:03:05,480 In the next video, we'll take a look at how to share these mockups with others.