I am replicating a website in Figma and I’m stuck at a point.
I want to create a header which will fix at the top. But here is one more condition, the header will change its color after scrolling the page. I don’t know how to accomplish it with Figma.I fixed my header at the top by clicking the checkbox button but how I supposed to change the header color?
The original website is here.
Answer
Not possible with Figma natively at this moment but there’s a workaround.
If you check the Prototype tab you’ll see that on the Trigger section there’s no scroll option. So you can’t set a change to happen when a user scrolls your prototype. (I’m not sure if there are any plans to add a scroll trigger in the future). You can find more info on how to use Figma in their own help center.
What you could do is to make two artboards/frames: one with the site as it loads and one with the fixed header so you would at least see both headers. Other than that you’re better off using a tool that allows more complex prototypes.
Actually after some search in their forum I found a user with a clever similar solution: switch between the two artboards with Mouse Enter / Mouse Leave triggers on a certain area, so the user has to scroll down to trigger the transition. Not ideal but perhaps close enough. See my quick test below
and my file setup. The gray boxes are the areas where I added the mouse enter/leave triggers to switch between frames. They have to be grouped with the green textbox otherwise it’s not seen as part of the artboard and you can’t use them as targets for the triggers.
Attribution
Source : Link , Question Author : B4BIPIN , Answer Author : Luciano