I am trying to add a function to a widget I am currently developing that changes the width of text with the touch of a button.

I have implemented this so that the width of the text is held in a variable using useSyncedState and can be switched between a fixed value and “hug-content”.

If width is a fixed value, it works as expected, but when switching from a fixed value to “hug-content”, it is not reflected in the width of the Text layer.

Here is the sample code.

const { widget } = figma

const { useSyncedState, AutoLayout, Text} = widget



function Widget() {

  const  textWidth, setTextWidth] = useSyncedState<WidgetJSX.AutolayoutSize>('textWidth', 'hug-contents')



  return (

    <AutoLayout

      direction="vertical"

    >

      <Text 

        fill={"#cc0000"}

        onClick={() => {

          if(textWidth === 'hug-contents'){

            setTextWidth(300)

          }else{

            setTextWidth('hug-contents')

          }

        }}

        >

          {'textWidth = ' + textWidth}

      </Text>

      <Text width={textWidth}>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

      </Text>

    </AutoLayout>

  )

}



widget.register(Widget)

The following is the result.

You can see that the value of the textWidth variable is not reflected as expected.

Is this a bug in the WidgetAPI?