bernaferrari
Collect superscript and subscript texts from figma
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.
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.
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
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 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.
I'll get this done by the end of this week!
that's amazing news dude. thanks for the hard work, really appreciate it
Finally, thanks for the patience. Fixed and deployed!!
you're the best dude, thanks a lot!