Skip to main content
Solved

Component not visible in prototype


Thanvin

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.

Best answer by Thanvin

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.

View original
This topic has been closed for comments

15 replies

Thanvin
  • Author
  • 2 replies
  • Answer
  • March 3, 2021

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.


Stazzyboo
  • 14 replies
  • July 29, 2021

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!


Riya_Jawandhiya

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.


Melhah_Albarrak

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.


Vanessa_Natelli-Millsaps

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.


Brielle_Mayfield

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.


Anthony_Salgado

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.


Jim9
  • 1 reply
  • May 10, 2022

@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!


Stazzyboo
  • 14 replies
  • June 29, 2022

@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).


Thanvin
  • Author
  • 2 replies
  • June 29, 2022

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!


Stazzyboo

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.


Veggi
  • 1 reply
  • November 30, 2022

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


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.


Liz_Green
  • 4 replies
  • March 18, 2024

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


ksn
Figmate
  • Community Support
  • 1608 replies
  • March 21, 2024

@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.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings