Creating complex interactions with interactive components — Date Picker
Let’s create a date picker component animation in Figma using the concept of the interactive component.
Date picker interaction:
Date picker usually has too many atom-level components. Especially all the date components. So when we need a hover state animation for a date, then it becomes more complex to create a prototype that will give a hover effect for all the individual date components.
To eliminate the complexity, we can use the concept of interactive components in Figma. New to this? learn more about this concept here.
Step 1: To achieve this prototype, make a set of date components comprising of all states you need. Here, I have default and hover states. As of date types, I have today, default, and disabled date.
Step 2: There are two major animations we have in the date picker component. Hover and selected state animations.
To achieve hover state animaiton, connect the default and hover state variants and choose “while hovering as trigger” and “animation as smart animate”.
Step 3: For selected state, connect the hover and selected state variants and choose “on tap” and “animation as smart animate”.
Connect the selected state to the default state with the same above interaction property to complete the cycle.
Repeat the above steps for all variants in the component set.
That’s it. Now when you use these atom-level date components in the date picker component, these hover and selected state animations will happen automatically.
Hope you can able to build the date picker component prototype with the above method. To learn more about components, design systems, and Figma as a tool, check this list of blogs.
