mistica-design icon indicating copy to clipboard operation
mistica-design copied to clipboard
verified publisher icon Telefonica

Figma and code are using different weights for Title 4

Open BiancaMach opened this issue 8 months ago • 6 comments

Describe the bug

When we use the Title 4 component in Figma the weight is regular, but in production it looks heavier, more like medium or bold. We found this inconsistency in this specific component but the text components in Mini Cart also look different.

Figma example

Image

Coded

Image

What libraries are you seeing the problem on?

Desktop Library

Steps to reproduce

Selecting title 4 in Figma and in the storybook page, you will see the difference between both components.

Expected behavior

The weight in both platforms should be the same, either is medium or regular.

BiancaMach avatar Mar 27 '25 22:03 BiancaMach

Hi @BiancaMach, the Title4 uses internally a text6 so when we added the medium weight to vivo, this was one of the requested changes:

https://github.com/Telefonica/mistica-design/pull/1921/files#diff-0c865a41214a52e684269da4ebaa651b9e9970bf5dd3d9f45a0004162bfc110bL1447

So the correct should be medium weight it seems.

The title in Figma is also using the font weight medium

aweell avatar Mar 28 '25 09:03 aweell

I see that is using medium for other brands, but for Vivo still shows the regular weight in Figma. When I detach the style I can confirm that, but looking you can tell the difference already. We made the updates availabe for the library but nothing changed.

Title 4 - desktop component Image
Title 4 - desktop component detached (still using the same text preset) Image

BiancaMach avatar Mar 28 '25 11:03 BiancaMach

I'm not being able to reproduce the issue, we will investigate further to see what could be happening, thank you @BiancaMach

aweell avatar Mar 28 '25 12:03 aweell

@aweell ok! thank you.

BiancaMach avatar Mar 28 '25 14:03 BiancaMach

@aweell @yceballost do we have any news about this issue?

BiancaMach avatar Apr 28 '25 22:04 BiancaMach

Hi @BiancaMach,

After reviewing the issue we believe this could be due to this Figma issue:

https://help.figma.com/hc/en-us/articles/4403175325719-Manage-conflicting-fonts#text-reformatting

There's two ways to solve this issue:

  1. The fonts are provided to the Figma organization, so at least for using vivo type in Figma editors shouldn't need to have the local font installed.
  2. Since we understand the font could be necessary for other programs or applications, check if all editors have the same version of the font installed.

Let us know if this solves your issue

aweell avatar May 05 '25 11:05 aweell