Figma file or prototype: Figma will open links to other Figma files and prototypes-or frames and pages within them-in a new tab.What happens when you follow the linked text will depend on the type of link:.Hover over the linked text to preview the link.Interact with links Preview or follow a link
Adding a shadow effect to your navbar means it can be visually raised, too.Tip! If you're using Figma in the browser, you can copy a link to the selected object from the browser's address bar. The navbar and the Content can be interchanged, but it’s good practice to put the navbar above the Content. If all done right, your layers should look like the below. You can uncheck this box when making edits to the Content.
In my example above, this Frame is named the ‘Horizontal carousel’ layer.
I then Framed it again, and shrunk the width of the new Parental Frame to 375 pixels - the width of my iPhone 8 stage. I had some card Components I duplicated, Framed them all, and then enabled Auto Layout so that they were spaced consistently. Scrollable content using Scroll OverflowĪ bit tricky, but your Parent Frame should be narrower than it’s internal contents.įinally, I’d like to introduce a horizontally scrollable widget to really demonstrate the power of nested Frames. In addition to the ‘softer’ benefits you’ll get as described above, there are a few solid use cases for nested Frames as well. Make handover and communication easier by nesting your Frames. Doing your best to Frame as you go along can reveal patterns that become Components.īetter collaboration with designers - once you involve others in the nitty gritty design process, poor layer management gets in the way.
Leads to natural components - sometimes you can envisage how to create Components, but other times you need to flesh out an idea first. Framing a selection can make it easier to navigate down to what you want to change. Why nesting is helpfulĬlean navigation between layers - making changes to your designs as they grow can be unwieldy if you don’t Group or Frame as you go. Whilst this is an arbitrary example, it’s a good starting point to introduce the concept of nesting. At least, I haven’t encountered any significant nest limit yet. You can continue nesting Frames as deep as you like. If I overlapped the Red Frame, it would be underneath everything. If I moved the Green Frame over the Blue and Orange Frame, the Green Frame would obscure the other two. In terms of overlapping, the layers nearer the top will overlap anything below them. If you aren’t sure, any ‘Frame’ layer will have this icon to the left, akin to a hashtag.