Dynamic Components2:48 with Hope Armstrong
Learn a few tips for how to set up your Figma file for dynamic content. Feel free to use the design tool you prefer; similar component functionality is available in many popular design tools.
Now that you have a grasp of the dynamic UI states, 0:00 I'll show you a couple of tips for how to set up your design for dynamic content. 0:04 I used Figma but feel free to use the design tool that you prefer. 0:09 Similar functionality is available in tools such as Adobe XD and Sketch. 0:15 Here I have a page with my designs for the various states. 0:20 As you can see, there is a lot of repeated content. 0:24 To make it easier to maintain, 0:28 I've put all of my master components on a page I named components. 0:30 Any structural changes I make to a master 0:35 component will automatically update on the other instances. 0:38 For example, on the trip card of master component, I could move an element 0:42 around or change the text color, and it would affect all of the other instances. 0:47 Changing the text however, does not affect the other instances. 1:01 They will maintain the text I've inputted, which is what I want. 1:09 Remember to create components wherever possible so 1:14 your design file is easier to maintain. 1:17 As for the card images, there are four scenarios. 1:21 Each of these is a master component. 1:25 And I've named them Card Image/Image. 1:27 Card Image/No Image. 1:33 Card Image/Sync Error Outage. 1:39 And Card Image/Sync Error Re-Auth. 1:44 Now, I can go to the design and swap out an instance of the given state. 1:49 When I right-click on a trip image, the instance panel appears. 2:01 And from the drop down, 2:06 I can select another instance. 2:11 Because I use the forward slash to organize the components, 2:25 they appear grouped in the drop down. 2:29 This makes it easy to discern the relevant states when swapping components. 2:32 I hope that makes it easier for you to reuse and 2:38 swap content across your UI state designs. 2:40 Have fun experimenting with dynamic UI states. 2:44
You need to sign up for Treehouse in order to download course files.Sign up