Hi, I’ve been teaching myself to use Figma by creating reusable components at their lowest level which I will then use to build a site. It’s going well so far but I’m stuck on one component. I have a drop-down search box which I would like to roll down and then roll back up on clicking the magnifying glass. For the life of me I can’t seem to get a working roll animation, everything I try is just fade-in / fade-out. I had some luck with a “similar” component where I used a rectangle to simulate a Label being underlined from left to right on hover, but couldn’t seem to get that approach to work either. I want to figure this out as it builds knowledge for the next component (I’m trying to get progressively more complex). Here is a link to the component I have been working on.
Hi, Jacob. After looking at your component, it seems like you’re using the Change to which only have the 3 basic transitions. If you want it to roll down like a drop down you have to separate the search box and open it as overlay and add the move in transition.
Here is how to do it:
Create a Search Button component and a drop down search box component, or just separate your component into two parts.
Add a Click event on the search button with open overlay using these conditions.
Manually adjust the overlay below the search button according to your design.
Inside your dropdown search box component and on the close button, add a click event on it with close overlay.
After doing that, the dropdown menu should work like this:
Thanks so much Raphael! I had no idea the other transitions were available, this opens up so many possibilities and actually gives me a cleaner way to handle some components I’ve already created. I’ve got the roll-down and roll-up working as per your instructions (this is so much nicer). A couple of things I’m still trying to figure out:
- The drop-down starts at the top of the btn_search component and overlays the icon itself during the transition. I see your example is very cleanly happening behind/underneath the search component/icon.
- How does this work for packaging it up and using it on a different page? I can’t seem to get it to work on another page.
I’m still working in the same link as before.
Hi, Jacob. Just copy and paste the search button to any of your frames.
Since the overlay is connected to the button component, no matter which frames you put it, it will work.
Thanks for responding! I think maybe I didn’t articulate the first questions well, here is an illustration of what I mean. Is it possible to set the starting position for the “move in” animation? You somehow accomplished this in your original example.
Sorry for misunderstanding your question. You will need to manually adjust it on the overlay settings.
Cons: If you put the search button in a different layout, there might be issues with the layout. If that happens, you will have to do the prototypes on the search button instances and not on the component.