Fixed elements in prototypes in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Fixed Elements in Prototypes

In Figma prototypes, what is the main purpose of setting an element as fixed?

A To lock the element so it cannot be edited in the design file.

B To keep the element visible and in the same position while scrolling the frame.

C To make the element invisible during prototype playback.

D To duplicate the element automatically on every page.

💡 Hint

Think about what happens when you scroll a page and some parts stay visible.

Fixed elements stay visible and do not move when you scroll the prototype frame, like a sticky header or footer.

🎯 Scenario

intermediate

Applying Fixed Elements in a Scrolling Frame

You have a long scrolling page prototype in Figma. You want the navigation bar to stay visible at the top while users scroll down. What should you do?

A Group the navigation bar and set the group as fixed position when scrolling.

B Convert the navigation bar to a component and disable scrolling.

C Place the navigation bar outside the scrolling frame.

D Set the navigation bar layer as fixed position when scrolling.

💡 Hint

Only elements inside the scrolling frame can be fixed during scroll.

Setting the navigation bar layer as fixed position inside the scrolling frame keeps it visible at the top while scrolling.

🔧 Formula Fix

advanced

Why is the Fixed Element Not Staying Visible?

You set a header as fixed in your Figma prototype, but when you scroll, it disappears. What is the most likely cause?

A The header is outside the scrolling frame, so fixed position does not apply.

B The header layer is locked, preventing it from being fixed.

C The prototype frame has no scrolling enabled.

D The header is set as a component, which disables fixed positioning.

💡 Hint

Fixed elements must be inside the scrolling frame to stay visible.

If the fixed element is outside the scrolling frame, it will not stay visible during scroll.

❓ visualization

advanced

Visualizing Fixed Elements Behavior

Which visualization best represents how a fixed footer behaves in a scrolling prototype?

A Footer duplicates at the top and bottom of the page.

B Footer scrolls up and out of view with the rest of the content.

C Footer stays at the bottom of the viewport while content scrolls behind it.

D Footer disappears when scrolling starts and reappears at the end.

💡 Hint

Think about sticky footers on websites.

A fixed footer remains visible at the bottom of the screen while the rest of the content scrolls behind it.

❓ data_modeling

expert

Modeling Fixed Elements with Multiple Scrollable Areas

You have a prototype with two scrollable frames: a sidebar and a main content area. You want a header fixed only in the main content area. How should you set the fixed element?

A Place the header inside the main content scroll frame and set it as fixed position when scrolling.

B Place the header outside both scroll frames and set it as fixed position.

C Place the header inside the sidebar scroll frame and set it as fixed position.

D Create two headers, one fixed in each scroll frame.

💡 Hint

Fixed elements only stay fixed inside their own scroll frame.

To fix a header only in the main content area, it must be inside that scroll frame and set as fixed position.