Have you ever tried to copy a text with html style properties and paste it on Figma with this style?

Ask the community
1

Hello everyone,

On my free time, I’m working on a way to copy text with html style properties and paste it on Figma with this style.

I noticed that the html tag <svg> is interpreted as a symbol for figma which is not the case with other html tags (<p> <div> <span> …). So I managed to display text copied in svg format as follows:

<svg viewbox="0 0 300 300" xmnls="http://www.w3.org/2000/svg" width="300" height="300">
<text x="0" y="24" style="font-size: 12.003px; line-height: 24px;">
Font display test
</text>
<text x="0" y="48" style="font-size: 16px; line-height: 24px;">
Font display test test bigger
</text>
</svg>

On Figma I display my texts with their font-size property, but it doesn’t work on another property like line-height. The MDN documentation on this subject mentions that the line-height property is not taken into account in an svg.
Now after several tests I see that other properties change the way a copy svg is formatted on figma. For example:

  • The html tag <svg> create a frame
  • The html tag <g> create a group
  • The id attribute allows you to rename the layer
    …

In this case I wonder if other properties or ways exist to add recognized styles in figma. Either directly through the style applied in html/css or through custom attributes that would allow to apply other styles to my text (styles, constraints etc…). To tell the truth I’m wondering about the line-height property, but it’s valid for other properties like displaying a display: flex to have an auto-layout display as soon as you paste your style.

I haven’t found an explicit resource on this subject. Have you ever encountered this type of problem?

Thank you very much!