Enhance Prototype Scroll behaviour in figma

Share an idea
1

Problem Statement:
Currently, when designing floating chat components or similar UI elements in Figma, setting a sticky position to keep components visible while scrolling is limited to static top-of-page behavior. The lack of bottom-right or bottom-left sticky positioning complicates the responsive design process, requiring manual adjustments for different screen sizes.

Proposed Solution:
Introduce an Advanced Sticky Positioning feature in Figma’s Scroll Behavior settings. This feature would allow designers to specify sticky positioning for elements in relation to top, bottom, left, right, and their combinations. This functionality would enhance responsiveness and reduce manual effort.

Key Features

  1. Sticky Position Options:
  • Top (existing behavior)
  • Bottom
  • Left
  • Right
  • Corners (e.g., bottom-right, bottom-left, top-right, top-left).
  1. Responsive Adjustments:
    Allow sticky position settings to dynamically adapt based on frame constraints and screen sizes, making designs more fluid across devices.
  2. Custom Offset:
    Add options to specify an offset value (in pixels or percentages) for finer control over positioning relative to the parent frame.
  3. Live Preview:
    Enable real-time preview of sticky behavior within Figma’s prototype mode to test scroll and responsiveness without exporting the design.
  4. Behavior Triggers:
  • Define specific conditions under which the sticky component becomes active (e.g., scroll threshold or parent visibility).
  • Allow for interactions like hide-on-scroll or appear-on-scroll-back.

Use Case Example: Floating Chat Button

  • Requirement: Place a floating chat button at the bottom-right corner that stays visible as the user scrolls through the page, regardless of the device size.
  • Implementation in Figma:
    1. Select the chat button component.
    2. Set Sticky Behavior to Bottom-Right.
    3. Define an offset of 20px from both bottom and right edges.
    4. Adjust constraints to ensure it remains within bounds for all screen sizes.
    5. Preview and refine the behavior directly in prototype mode.

Benefits

  • Improved Efficiency: Reduces manual positioning and rework for responsive designs.
  • Enhanced Precision: Offers granular control over sticky behavior.
  • Seamless Prototyping: Accelerates testing and validation of design ideas directly within Figma.
  • Consistent UX: Ensures interactive elements like floating buttons or sticky headers behave as intended across all devices.