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.

  • 1
    I edited your question to make it a bit more clear. See if my answer below helps.
    – Luciano
    Commented Jul 8, 2019 at 14:36

1 Answer 1


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

enter image description here

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.

  • Thanks for this solution I don't think I able to create it myself. I tried a lot but not got anything. Could you share Figma file with me?
    – B4BIPIN
    Commented Jul 11, 2019 at 10:29
  • Set it up like I did: 2 artboards, only the second one has a fixed header. The grey rectangles under the textbox are targets for the triggers. Have you tried anything?
    – Luciano
    Commented Jul 11, 2019 at 11:28
  • super helpful. thank you for this work-around! Hopefully Figma will listen to our needs
    – pete c
    Commented Jun 16, 2021 at 15:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.