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

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

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.

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up