Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Designing Dynamic UI States

Well done!

You have completed Designing Dynamic UI States!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Dynamic Components

2: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