Skip to main content
Question

TextSublayer with Widget API


Is there is a way to create a TextSublayer with the Widget API ? I need to fill certain words in a string with another colors, and there could be many strings. Many text layers will slow down performance, so I thought there is a way to optimize the process.

8 replies

tank666
  • 4868 replies
  • July 6, 2022

TextSublayerNode is a nested layer of ConnectorNode, StickyNode and ShapeWithTextNode which is created automatically when the above nodes are created. It cannot be created separately from the above nodes using either the Plugin API or the Widget API.

With the Widget API, you can only create a Text component, which is equivalent to a TextNode, and it will be rendered in your widget interface.

After all, I correctly understood that you want to create a Text component in the widget interface? Or do you want to create a TextNode on the canvas after interacting with the widget?


@tank666 thank you 🙏 Sorry, seems like the TextSublayerNode it’s not what I want.
I want to create a text layer where some words will have different fills.
If I create it manually in figma there is a method getStyledTextSegments() with which I can see text segments. I’m wondering if there is a way to create a text layer with differently styled characters?


tank666
  • 4868 replies
  • July 6, 2022

So you’ve created a TextNode via figma.createText() and want to apply a different fill to the characters?

Then you can use the following methods:


Many thanks @tank666! Do you know if there is a possibility to apply this to the Text Component?


tank666
  • 4868 replies
  • July 6, 2022

Unfortunately, the Widget API does not describe this and the Widget Code Generator says that mixed styles are not supported.
widget-code-generator

I don’t know if it will work or not (because I haven’t tested it), but you can try to make nested text. Check out the React Native code example here:

stackoverflow.com

Thanks for help @tank666 I’ll check it up 🙂


tank666
  • 4868 replies
  • July 21, 2022

I tested this way and it didn’t work. Perhaps in the future the Figma team will add support for mixed colors in the Text component.


tank666
  • 4868 replies
  • July 27, 2022

Hey @PavelLaptev, the Widget API update has been released, where the Span component has been added. Now you can achieve it.

figma.com – 13 Jul 22

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings