Hide "Fixed position" layers to see design specs of other layers beneath them
Layers that have been set to "Fix position when scrolling" often overlap over other key layers and block the inspection of the layers underneath.
For example, if you have a mobile screen with a bottom fixed menu then this layer will need to be positioned on top of the 0-viewport. This results in any other layers in body below this bottom tab layer becoming invisible in design and design specs mode. And the developer cannot see any of their details.
So a way to hide these layers in the design specs mode will be of great help.
-
Anonymous commented
Yes this is a good idea, I think this would be very useful for developers.
-
Erik commented
It would be nice if developers could toggle the visibility of sticky layers when viewing a shared link.
For example, a sticky footer often falls on top of other elements. Being able to toggle the visibility of layers will solve this.
Background: our devs use different tools to extract design details. We want to switch to XD shared links. However, not being able to manipulate the visibility of layers is often a struggle for them.
Thanks!
-
Sabin Antony commented
Opening shared link in browser and changed to developer mode.
Fixed element (bottom tab menu) is blocking below elements and developer is not able to get the below element style.
how to solve?
Elements show/hide option in browser will fix this issue.
Or
fixed to bottom items will show most bottom of the page (only in developer mode)
-
Amin Shazrin commented
The comments above generally explain why do I upvote this idea. It needs to be implemented ASAP to Design Specs or any other related sharing link. It can be fixed by simply hide the element when the element is on "Fix Scroll". Simple as that!
-
Dashanan commented
It is common for mobile designs to have a bottom fixed navigation. However when the navigation layer is set to "Fix position when scrolling" - any layers in the body which happen to be at the bottom of the viewport get hidden by the fixed layer.
This creates a big problem when we have to:
1. Export the designs as PNGs for internal reviews
2. Export to extensions like Overflow.
3. Export design specs.Because in all the above cases there is no way for us to clearly see the layers beneath the fixed layers.
As a result the stakeholder/programmers get frustrated in working with these designs.
Example: In the attached "01 Current State... .png", the bottom nav can be seen hiding the graph layer. As a result, the stakeholders reviewing the PNG will not be able to see the graph information. Tools like Overflow will render the design with the graph hidden and no way for users to see its data. And finally the coders will have no idea how to code the graph layer in the design specs link.
Solution:
Shift the fixed element to the bottom of the screen, where we anyway keep an empty margin, so that the fixed elements don't hide any critical elements.
For example, in the attached image "02 Ideal state... .png", the fixed nav bar is shifted to the bottom of the screen so that it does not obstruct any view of the elements in the body. As a result we can clearly see the graph layer without any obstruction.
-
Amin Khadmi commented
Fixed element should be floating or moveable in design specs, because it's appearing at top of other elements in design specs and developer are not able to check/see properties of those elements.
-
Dashanan commented
The fact that this feature has so little upvotes means that people have still never used XD for making design specs of a live project. :-(
We don't have any way to let developers see elements hidden behind fixed-elements in the specs. This happens in case of both specs exported within XD or on Zeplin.
Also the fixed elements feature is a pain when you want to export png of designs to share with the product team. Again the fixed elements hide everything behind them, and so the designers have to move every fixed element at the bottom of the screen and then do the export. Not fun when you have fixed elements on 50 artboards.
XD should have simply designed the fixed element feature as in Invision. Place them at the bottom of the screen so that they don't interfere with the body of the design, while rendering perfectly in prototype mode.
In XD we are forced to maintain two files for the same project. One for prototyping and other for design specs. Very inefficient.
-
Harun Alikadić commented
At this moments fixed elements need to be positioned at the exact position in which we want them to be fixed, on top of all other elements on the scrollable artboard. In design mode we can hide fixed elements and work on stuff that lays underneath, but, in specs view, fixed elements appear on top of all other elements and there is no way for developers to access information of the elements positioned under the fixed element.
The obvious example is the mobile phone bottom bar, as from the attached screenshot.Solutions may vary, from possibility to hide/show elements in specs view to the possibility to position elements also relatively to the viewport (bottom, top, left, center ...) regardless of their position on the artboard.