Prototyping a Double Sticky Nav | Figma Bites
HTML-код
- Опубликовано: 12 сен 2023
- In this video we share our secret family recipe for a double sticky nav. We recently had a need to make a Figma prototype that had a fixed navigation on top of the screen, some content, and a filter bar. The filter bar needed to stick under the fixed header once they touched.
We'll walk you through the steps needed to make a navigation like this in a frame made with Auto Layout.
===
ABOUT FIGMA BITES
===
Figma Bites is a video series that aims to teach you how to speed up your Figma workflow.
📺 Who is the Audience? 📺
Any UX Designer or person using Figma is the perfect audience for this series. These short videos will give you actionable tidbits of information that you can start using in your Figma workflow today.
👔 Why this format? 👔
We’re all busy working on making the world better for our users and making changes to our workflow can take us out of that focus. Our hope is that these short videos will be easily digestible when you’ve only got a few minutes to learn something new. The topics will be small enough to learn quickly and add to your workflow without trying to boil the ocean.
⏳ When do new videos come out? ⏳
We’re planning to release a new video every other week on Tuesdays. We can’t promise to hit this 100% of the time but will do our best to go no longer than 1 month between videos if things get busy.
Some much better method than getting rid of auto-layout and some more tricky stuff. Thanks!
Thanks!
This is a good work-around. Figma should really make this easier.
Thanks! I remember needing to do something like this with CSS to accomplish the same thing. But I think they've added that to CSS already, I don't write it much these days. FIgma should make it easier.
awesome! the second part didn't work because I have a object inside an object and when I add the 84px nav padding I can't get the object it is inside of to allow for that spacing :( But really helpful.
This tutorial is so helpful! love all your tutorials, short and on point!!
Thank you!
I really appreciate the troubleshooting vs just showing how to do it correctly the first time!
Thanks, Jake!
Figma's like the drunk uncle that you never know what to expect. Iv'e watched very few Figam videos where things matched up and actually worked. Even when you do get something to work you can be sure that it won't work the next day even if you've locked the file!!!
Ha! It do be like that sometimes.
What’s the verdict on this technique, though? It’s based on how it works in the browser but even that can be tricky sometimes
The technique is good no doubt @@FigmaBites
So helpful!! Thank you
Glad it helped!
Hi, are you planning some video about data tables?
Yeah we'll most likely do one about those. Not 100% sure when right now, though.
Life saver this! Thank you so much!
I'm glad it helped you :)
lol this is the easy way, now trying doing it while the the bar is a component, and it has more components under it. AND also u have 2 columns PC , meaning the bar is to 1 side while on the other side (righ or left) u have something else like a map. think of similar to airbnb
oh and also add a border to the left part panel. that contains several components. and then good luck doing this lol
This sounds like a completely different UI than what I was showing. Your prototype would definitely be harder but not impossible from the sounds of it. Do you have a link to a file? I’m happy to try it out
Love it!
Thanks!!
Figma is really a pain. They just have to add a value in px to the sticky option... damn
It can be for sure. Maybe they will add that option someday, who knows. You should send them that feedback!