Collect superscript and subscript texts from figma

[KevynTD]

Your extension is very good, thank you btw!!

In figma, the designers on my team use this functionality a lot to place the text with sub or sup text, but when I copy the text of it, it never works:

If you could export this on HTML, it would be amazing not to have to do the manual work of placing each of these by hand 😅

In HTML the tags used for this are <sub> and <sup>, and in CSS, the equivalent is to use the "vertical-align: sub;font-size: 0.9em;" and "vertical-align: super;font-size: 0.9em;" respectively.

[bernaferrari]

hmmm, maybe I can do that? Can you share a simple Figma layout of what you want? I'll take a look if it is possible to do what you want. If it is, I'll surely do it.

[KevynTD]

Apologies for the delay!
I made a very simple example in this file, I'm new to creating things in figma
In this file I put some examples of how I would like the text to be exported
Sup and Sub Text Examples.zip

In the current export to html, the numbers and letters with sup/sub remain as normal text

[KevynTD]

Hello @bernaferrari!
I have some news

I dug into your code a bit and started researching the topic of Figma plugins
And I saw that the official documentation didn't have anything to get Sub and Sup from the text (in these words at least).

I opened a ticket to the Figma Team, asking them to add this method to getStyledTextSegments (which is what I saw you use here), they said it already exists, and can be used as node.getStyledTextSegments(['openTypeFeatures']), so I asked them to update the documentation, since this wasn't written in the getStyledTextSegments documentation.

I did a quick console.log test, and it worked to extract Sub and Sup:

I'm not that experienced in your code yet, but I think this might help something.

[bernaferrari]

oh, I completely forgot that. I'll get that working, thanks!!

[pulonaglobant]

@bernaferrari I also would have great usage on my daily tasks for this feature (meaning the sup/sub - we work with a lot of references using ^{and molecules having _{texts), it would be amazing if you'd add that. I'd like to thank you in any case for the plugin, it speeds up a whole lot of things.}}

[bernaferrari]

I'll get this done by the end of this week!

[pulonaglobant]

I'll get this done by the end of this week!

that's amazing news dude. thanks for the hard work, really appreciate it