Component not visible in prototype

Hi everyone, I have an issue with instances of a component (a line) that is not visible in prototype view, but shows up fine in the work file. I’ve tried the following to troubleshoot but no success:

  • copying content in affected frames, and pasting them onto new frames
  • detaching the instance
  • creating a new component
  • making sure the component instances are within the artboard
  • clearing the browser

I’d appreciate your input in solving this issue, thank you.

Okay, I think I’ve solved the issue. I had the component (a divider line) be set to 0.5px in weight, but once I set it to 1px, it shows up consistently. Looks like Figma has some trouble consistently displaying elements that are less than 1px in size.

4 Likes

Same issue happening for me and I also have .5px lines - some appear while others don’t, super annoying, hope they fix this.

Edit - Found a different solution for this issue -I making sure the object position on Y axis is pixel perfect number. When I had object on Y axis at 300.74px the line disappeared, when I corrected to 300px (removing .74) it appeared. Hope this helps someone!

5 Likes

the issue happens when our group is at the location beyond the first fold of the screen, place it the first fold, it will work perfectly.

2 Likes

Hi Thanvin, Just make sure that the line element within the same frame, move the line in layers side to the frame you want it to be in.

1 Like

Hi,
I’m having this issue with a video player navigation bar component that I created. Everything else shows up fine in prototype. I tried clearing my cache, making sure that the component is within the artboard and creating a new component, but these haven’t worked.

For those who may still experience this even after changing the stroke/Y axis: Try moving the element to a different frame and then move it back. I noticed that the disappearing elements wouldn’t snap to the grid at all before being moved around.

2 Likes

In order to fix such problem you need to ensure the component is a Layer under the screen you are working on.
→ All the layers appear on the left side of your screen.
Example of Layering:
-Rectangle ( I want this rectangle component to show in my prototype for my home-screen but it doesn’t bc is not a layer under home screen)

Home-screen ( the only layers under home screen are Button x and Button Y)

  • Button X
  • Button Y
  • Rectangle (after dragging the rectangle layer it will appear along all the other components for that screen in this case the Homescreen)

If I want the rectangle to show up in my prototype I simply grab n drag down to include it under my Homescreen Layer now the Rectangle is a layer under my Homescreen and should appear in the prototype. I hope this helps anyone out there.

Howdy.

1 Like

@Anthony_Salgado I’m having this problem, too, and I can see the layers on not on the right frame; however, I’m unable to move them. I can grab them, move it to the right layer, so I see the little black line, but the moment I release, it goes back to its original spot. Any advice for a noob? Thanks!

@Jim9 Do you want to share your figma file link with me and I can inspect and advise? What solved for me is making sure all the objects/layers are set to perfect pixel (so if height is uneven like 1.3px it needs to be 1px or 2px. Also make sure the placement of the object is perfect pixel, so go to “Frame” side panel menu and make sure all your object as set X to even number (so if 0.23px it should be 0px), same for Y - even numbers (no partial pixels).

Hey Anastasia, this was the issue. I learned that pixel values should be whole numbers. Having used Illustrator for a long time, I’ve gotten used to using decimal pixels for stroke widths, which I realized work inconsistently in Figma. But yes, if anyone else is having the issue I did, use whole numbers for pixels when working in Figma!

It doesn’t need to be whole values. I have found tricks, I use half pixels for lines all the time unfortunately without the trick it may appear thinner than other lines so I use auto layout and set height to 0.001 with alignment to bottom (which Figma automatically changes to 0 but doesn’t allow you to set 0 on it’s own); this allows me to use the half pixels for lines. However X and Y values do have to be set to whole number or by .5px (doesn’t affect it) so the 0.001 is important because it sets it to what appear and behaves like a whole value. I don’t like using 1px thickness, just too thick for certain branding.

For fixed bottom component, in right panel, make sure checked fix position when scroling"and constraints: left, bottom

3 Likes

I have the same issue, and have not been able to fix it. Can someone help me? I can share my Figma link so you can check it out.

I’m having this issue as well with dividers that are .5px. All are placed on whole numbers on the Y axis

@Liz_Green Sorry you’re dealing with this problem – would you kindly create a new topic about this, and provide more details there? This is an older/outdated topic, and there was conversation that seemed to alleviate this for others. Your issue may be different or unique to your design.

I’m going to close this topic now, but please do create a new one when you have time.