To create a vertical scrolling effect similar to the Flipkart product landing page in Figma, you can follow these steps:

1. Create a new frame: Start by creating a new frame in Figma. This frame will represent the viewport of your scrolling page.


2. Adjust frame size: Set the height of the frame to the desired height of your scrolling page. You can do this by selecting the frame and adjusting its height in the properties panel.


3. Add content: Begin designing your product landing page by adding the various elements, such as images, text, buttons, and other components, within the frame. Arrange the content vertically as you would like it to appear when scrolling.


4. Create a mask: Select all the elements within the frame that you want to be scrollable. Right-click on the selection and choose “Create Component.” Then, with the newly created component selected, click on the “Mask” icon in the toolbar at the top. This will create a mask around the component.


5. Enable vertical scrolling: With the masked component selected, go to the properties panel on the right. Under the “Scrolling” section, enable the vertical scrolling option by toggling the switch.


6. Adjust scrolling height: In the properties panel, you will see a slider for “Scrollable Height.” Adjust this slider to match the height of your content within the mask. This will determine how much the content will scroll within the frame.


7. Preview scrolling: To see the scrolling effect, click the “Present” button at the top-right corner of the Figma interface. This will open a preview window where you can interact with the scrolling page.


8. Fine-tune and iterate: Test the scrolling behavior and make any necessary adjustments to the height, content layout, or other design elements until you achieve the desired effect.

Thank you, Hari. This helped a lot.