A catchall meant for “water-cooler chat"
What's the workflow for fixing a tab bar position in a prototype?February 19, 2019 at 6:06pm
In Sketch there's a "Fix Position when scrolling" option where I can select a layer, say a bottom tab bar, set it as fixed and then when I click preview (prototyping) - Sketch pins the tab bar to the bottom of the iPhone sized preview window and I can scroll my oversized artboard content up & down "behind" the tab bar.
I appreciate there's a "Preserve scroll position" option in Figma but I can't get it to do the same as "Fix position when scrolling" does in Sketch.
Firstly if I select my entire tab bar in Figma that I'd like to lock down, I can only access "Preserve scroll position" after I've created a link between the whole tab bar and another layer.
The option isn't available simply by selecting the tab bar, I need to make a connection first and I don't want a connection from the entire tab bar, I just want to fix it at the bottom of the screen and be able to scroll my artboard content up & down.
Any help much apprecaited, I've probably missed something obvious.... ;-)
February 19, 2019 at 7:19pm
I think you are looking for this. It's in design tab, shows up after selecting element(s)
February 20, 2019 at 8:09am
Hi @sama I'm happy to believe this is my misunderstanding of how Figma works, but this is what I do in Sketch and its result.
• Create an oversize iPhone X artboard (375w x 956h) • Place my tab bar layer at the very bottom of the artboard • Select my tab bar and check "Fix position when scrolling"
This has the desired effect when viewed in the Sketch preview; I see a regular size 375 x 812 view with my tab bar "pinned" to the bottom of the screen and when I scroll vertically any content outside the viewport comes into view behind the tab bar.
• I've imported the same 375 x 956 artboard • Selected the tab bar. • I do not get offered any option to preserve the tab bar position yet • I have to create a connection between the tab bar and another layer • At this point the "Preserve scroll position" option appears in the Prototype palette & I choose it • When I view my prototype the tab bar isn't pinned to the base of the screen, it's at the bottom of the artboard & is only brought into view when I scroll
I've tried a similar thing with title bars - trying to fix their position at the top of the screen but it's the same issue. When I use "Preserve scroll position" the title bars just move up when I scroll.
Expected behaviour, as shown in Sketch
Tab bar not pinned to base of screel in Figma
It seems you're trying to use the "Preserve scroll position" feature when you should be using "Fix position when scrolling" as @sama pointed out.
From what I understand, 'Preserve scroll position' is used when linking between frames, to scroll the target frame to the same position as the source frame - to avoid a screen jumping back to the top when similating on-page actions.
Aaarrrgh.....That option seems to make matters worse !! :-)
• I've performed a fresh import of my Sketch file to Figma, to start from scratch. • I've selected my bottom tab bar on the 375x956 artboard and checked "Fix position when scolling" from the Design tab • I click the play / preview icon to show my screen in the iPhone X bezel • Now my tab bar isn't visible at all! in preview, even when I scroll.
Bottom tab bar missing in preview
I don't know where to go with this now.
I've taken my artboard out of the main file and created a new project containing just the single screen.
But something very strange happens just by checking "Fix position when scrolling" option. The layer I'm trying to fix into position disappears from preview.
It doesn't seem possible to upload video here? This is a link to a video showing what happens:
February 20, 2019 at 5:24pm
@steveharman I think it hid the tab bar because your artboard is bigger than default iphone X size and you don't have 'overflow behavior' set to vertical scrolling.
Here is how I recreated the effect you are trying to get:
- Made an artboard 375x956.
- Added a tab bar and other elements
- Imported the Sketch file
- Under design tab, rearranged layers so that tab bar was set to "fixed position when scrolling" and made sure that all of my elements imported from Sketch (including the large artboard) were inside an iphone X frame on figma measuring 375x812
- Having iphone X frame selected, went to prototype mode and under overflow behavior selected vertical scrolling
- Previewed it and was able to see tab bar fixed at bottom
Here is a video to explain it better - https://www.dropbox.com/s/z3neeppgoxesqvt/fixed-scroll.mov?dl=0
Hope it works. If you still have any questions feel free to ask :)
That's really kind, thanks for your help with this. The part I'm now struggling with is getting the "Overflow behaviour" option to appear. It isn't there for me. Must be something I missed.
Can't help thinking that Invision & Sketch have got the edge on pinning layers & scrolling so far. "Check a box and we'll take care of it"
My learning curve, I guess ;-)
UPDATE: Without the "Overflow behaviour" option, I accidentally managed to get it working (thanks to inspiration from your steps ^^ !) :-)
For me it was simply a case of:
• Import the 375 x 956 artboard from Sketch • Move the bottom tab bar up from 956px to 812 (the lower extent of an iPhone X) • Set the bottom tab bar to be "Fix position when scrolling"
Then go into Preview and the tab bar is fixed at the bottom of the screen, with content off the artboard scrolling behind it
@steveharman glad that it worked for you :) I am also new to Figma so can't really pin point what went wrong or what worked. I agree that learning curve is a bit steep when it comes to Figma especially the part where you have to figure out the behavior of the tool.
I guess moving the tab bar up to 812px must have fixed the issue for you. Though I am wondering why you were unable to see 'Overflow behavior' under the prototype tab
February 25, 2019 at 10:25pm
You can only adjust "overflow Behaviour" if you content is larger than the container so it can overflow
Sometimes you have to uncheck "Fix position when scrolling" to adjust constraints, then recheck it