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.

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?

1 Like

@tank666 thank you :pray: 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?

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:

1 Like

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

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

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:

1 Like

Thanks for help @tank666 I’ll check it up :slightly_smiling_face:

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.

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