How do you pin a Close icon to a modal's top-right corner?

WHAT THIS TESTS: This question evaluates whether you understand Figma's constraint system as a responsive design tool rather than just a static layout feature. Interviewers want to see that you know constraints are applied per layer along independent horizontal and vertical axes, and that you understand the difference between position pinning and scaling behavior. It also checks if you know the structural requirement that constraints only apply to layers nested directly inside a Frame, not Groups or Auto Layout containers.

A GOOD ANSWER COVERS: First, identify the specific constraint values needed for the desired behavior. For a top-right pin, the horizontal constraint must be set to Right and the vertical constraint must be set to Top. Second, explain that this tells Figma to maintain the layer's distance from the right edge and top edge of the parent modal Frame respectively, regardless of how that Frame is resized. Third, note that the icon's own dimensions remain fixed unless you intentionally change them, because you are not using Left and Right or Top and Bottom which would stretch the layer. Fourth, mention the prerequisite that the icon must be a direct child of the modal Frame, since constraints cannot be applied to layers outside frames, layers inside groups, or layers inside auto layout frames.

COMMON WRONG ANSWERS: A major red flag is suggesting Scale constraints. Scale would resize the icon proportionally to the Frame's dimensions, so a modal that grows wider would also enlarge the Close icon, which is almost never the desired behavior for a fixed-size UI element. Another red flag is proposing manual repositioning or centering, which shows a lack of familiarity with responsive design workflows in Figma. Suggesting that constraints work on Groups is also incorrect, since Groups inherit bounds from their contents and do not support constraints. Finally, saying you would use Left and Right or Top and Bottom constraints is wrong for this use case because those settings stretch the layer to maintain distance from both edges simultaneously.

LIKELY FOLLOW-UPS: An interviewer might ask what happens if the modal is resized to be smaller than the icon's position, which could cause the icon to sit outside the visible bounds or overlap content. They might also ask how you would handle the same behavior inside an Auto Layout frame, where you cannot use traditional constraints and would instead need to use alignment and spacing properties. Another follow-up could be asking how to maintain consistent padding between the icon and the modal edges across different screen sizes, which might lead to a discussion about nested frames with their own constraint setups.

ONE CONCRETE EXAMPLE: Imagine a modal Frame that is 400 pixels wide and 300 pixels tall. The Close icon is a 24 by 24 pixel button placed 16 pixels from the top edge and 16 pixels from the right edge. With horizontal set to Right and vertical set to Top, if you stretch the modal to 600 pixels wide, the icon remains 16 pixels from the right edge and 16 pixels from the top edge, still 24 by 24 pixels. If you had incorrectly chosen Scale, the icon would grow to 36 pixels wide because it would maintain 6 percent of the Frame's width, breaking the design system.