Skip to main content
Shelene_Lee
February 24, 2021

Show Font Weight in Inspect panel

  • February 24, 2021
  • 94 replies
  • 26847 views

When inspecting the following component, I can click on the font to see the font weight and style in the inspect panel. When my dev clicks on the same item, he does not have all the CSS information that I have in the inspect panel, specifically he is missing font weight and font style. He does not have the ability to see the different font weights, which is unacceptable. Is there some way to fix this?

Component with my inspect panel:
Screen Shot 2021-02-24 at 10.12.33 AM

My (designer) Inspect panel:

Developer Inspect Panel:


✏️ Note from the moderator

There is a way to see the actual font weight, but it’s hidden and inconvenient: Show Font Weight in Inspect panel - #5 by Gleb

94 replies

Jess3
July 9, 2021

Anyone have any updates on this issue? We are seeing this on my team as well. In the design tab, the font style is clearly set to bold, but in the inspect panel, it says 400 / normal. For some reason, though, if you look at the iOS code in the inspect tab, it’s correct (it is incorrect in CSS and Android).

VladimirK
July 13, 2021

We are seeing something similar, according to some posts I’ve seen Figma seems to infer the weight from the font name and a mapping table somehow…

Kristian_Larsen
August 9, 2021

I have the same issue. We have developed our design system that the developers are inspecting during development and because of this Bug the have been creating components with the incorrect font weight.
Would love to have this bug bumped up the list

Nikita8
August 11, 2021

We experience the same issue. This has been reported for 6 months already. When this can be fixed?

Han
New Member
August 11, 2021

I know, yes, this is a problem for developers, that’s why it’s a common practice to create UI kits/reference sheets for developers and styles for texts so they know which style corresponds to which weight.

Gleb, you sounded like ‘because the public transportation has an issue, people should buy their own cars…’ Of course, having a UI kit is good practice for any product team. But this issue is not the reason to do that.

Gleb
Power Member
August 12, 2021

I’m not saying it’s supposed to be like that. I wanted to point out exactly this problem — that people who don’t need it have to drive cars because there is no public transportation.

mmcdaniel
August 13, 2021

Is there any confirmation that this is actually a bug? It’s a pretty big issue with the inspect panel if I have to supplement those values and the CSS with a spec sheet just so someone can see the font-weight that I’m seeing on my end but they’re not for an inexplicable reason. Is it like a difference in license between the “designers” and “devs” in these cases?

Also might be worth noting that font-style is also missing…

Gleb
Power Member
August 13, 2021

I don’t know if this is considered a bug but you can find the weight in the inspect panel: Show Font Weight in Inspect panel - #5 by Gleb

Font style is available in the panel without the need to search, so not sure what you mean:

image

mmcdaniel
August 16, 2021

What I mean is that, without using the “Table” view, font-stlye is missing along with font-weight. People shouldn’t have to switch to that table version of the view to see all the details of the object — especially when someone else can see all those details in both views.

Feels like a bug to me if there’s any time someone sees something different from what someone else sees in the inspect panel.

For what it’s worth, I’m seeing different things in the table view vs the code view. It does show font-style but no font-weight:

Gleb
Power Member
August 16, 2021

I totally agree, just wanted to share a workaround.

That’s weird. You also have two font heights there. What’s that about? o_O