Skip to main content
Question

Widget API does not reflect the change of Text width from fixed value to "hug-content" on the layer


Shingo_Suzuki

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?

0 replies

Be the first to reply!

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