Bottom sheet issue in prototype

Hey Abbey_Odunlami,

I might not exactly understand what the issue is, but it seems like you wanna know where certain functions are.

Create the whole sheet first with all content. To set up your frames as scroll container go the prototyping tap, select your frame and you see a dropdown to change/activate the scroll behavior. Set the main frame that contains all content to vertical and the carousel to horizontal, make sure to reduce the frame sizes of your scroll containers to define the scroll area. (to make the content visible again outside the frame untick the clip content box on the right menu in the design tap while selecting the frame)

The last step would be just an animation between screens to let the sheet go up and down.

Hey Carlhauser,

Thanks for the feedback.
I’ve tried your suggestions but still no dice.

I’m trying to have the “bottom-sheet” go up when tapped and inside of the “bottom sheet” would be a container that also needs to be able to scroll vertically. Inside of that container are sliders that need to go horizontally.
Here’s a link to my Figma file:

Here is a screenshot of the problem I’m trying to solve.

Hey,

I think this is what you wanted.

You need to make sure when you use a device frame for the prototype that your artboard has the same size as the device, otherwise you will move/scroll your whole screen. In your case it’s a 441x951 screen and you use an iphone 13 pro max that has a size of 428x926. Just make the screen smaller or don’t use any device frame.

Another thing is that your layer structure needs to be cleaned up a bit to avoid any weird behavior.

Have a great day

Oh carlhauser, you’re awesome!!!
Thank you for looking at this for me. Really!

It’s my first project in Figma so a bit of a learning curve.

When you say to clean up the layer structure, what advice would you offer for a novice( who’s also learning by doing) in terms of structuring?

You are welcome!
The biggest trouble I would say get caused through the mix of “frames” and “groups”. You don’t need for example a background rectangle if you use a frame because you can give it a fill. Frames also behave differently than groups in terms of for example constraints or sizing. Also groups can’t have a scroll behavior and get always just as big as the elements in it. Here is a link for more → .)

A lot of elements in your design like the search or menu bar that are supposed to be in the foreground are also in a group that has background elements in it and is in the layer stack at the bottom. So try to bring some logic in it when you group things.

For example here it would be better to create a frame with all your sheet elements in it, that cleans it up a bit and things are not flying around. (naming is also important especially when you hand it over to someone else)

Or here the frame “frame 139” and the group “carousel” can be one frame again or an auto-layout group.

Hope that helps for now.

It does a great deal. Thank you again.
Would you have a link to the version you fixed?

You are welcome! I had a link in my second answer (the blue “have a great day” text)