Autolayout not applied correctly

[elisehein]

Autolayout not applied correctly

I expect to be able to resize a component as fluidly as I can in the browser, with all contents and text wrapping in the same way. this component's text layers have all autolayout horizontal resize settings set to Hug when they should be Fill, so resizing doesn't wrap text correctly.

---

Bug report identity: Please do not edit

Task path: JpgOzuVMCTUy9zBYognV/ROtOnnINTJGlfMWLcSLG/1z0fm7tjnmewc

[muryoh]

Hi @elisehein,

First off, a couple unreleased fixes are necessary. We'll release them soon so you can reproduce exactyl what I'm showing. I will comment soon after that release has been done, and you will need to update your agent to benefit from them 🙏

I expect to be able to resize a component as fluidly as I can in the browser, with all contents and text wrapping in the same way.

This is definitely what we strive for, however browser behavior cannot always be reproduced in Figma :(

Then, let's see what's happening (TLDR at the end)

Long explaination

Your component is imported to be HUG, not fixed width

Seeing what you're trying to do, ie resizing the component directly and expecting children to resize, you are expecting the component to be fixed width. However by default story.to.design forces components to be HUG. story.to.design does this by default because many components render full-width in a browser because they're block even if the expected behavior is for them to be HUG

In order to import it fixed width, you can set a viewport:

This will capture the component as it would render in a 1280px browser, so your component will effectively be fixed size:

However the text will still not behave as you expect:

Browser vs Figma

The browser has a behavior that I don't know how to reproduce in Figma. If you know a way, please share!

I'll try to illustrate by adding a background to a specific div in your component. This is your component in the browser:

What's tricky here is that the yellow background element is a flex child and that layout is not 100% implemented in Figma. That child is, in Figma terms, HUG, but only until it hits the parent element's width in which case it switches to FILL:

1. 

2. 

In order not to introduce any visual inconsistency in most cases, we import the component in configuration 1. (this is your component imported in Figma with the mentioned :viewport value and after manually changing the text in Figma):

Now, in order to tell story.to.design that it's OK to choose behavior 2. instead of 1., you can tell it that the yellow background element actually FILLs the parent horizontally with :css set to <style>#storybook-root > div > div > div:nth-child(2) { flex-grow: 1; }</style> (I also added background: yellow here to make sure we understand what's happening visually):

In that case, the text will actually be FILL, and have the behavior you expect (this is after manually resizing the component horizontally):

TLDR

Please try importing your component with the following Advanced configuration:

{
  "initArgs": {
    ":css": "<style>#storybook-root > div > div > div:nth-child(2) { flex-grow: 1; }</style>"
  },
  "variantProperties": [
    {
      "fromArg": ":viewport",
      "values": [
        "default"
      ]
    },
    {
      "fromArg": "tone"
    }
  ]
}

This sets a :viewport arg so your component will be full-width
and a :css arg that will override the CSS styles of your component so story.to.design understand it's OK to make the container FILL (please refer to my lengthy explaination)

---

Very sorry for the lengthy reply, I wanted to try and be thorough with the explaination

I hope that clears things up a bit - we will release a version that contains some fixes that were needed for your use case 🙏

Cheers,
Remy

[muryoh]

Hi @elisehein,

We just released both the plugin and the agent that should allow you to get the results I showed in my screenshots

Please make sure to update the agent (it should automatically check for updates on startup, last version is 1.22.3 as well as the plugin (Figma automatically updates it after having refreshed your Figma tab)

Let me know how it goes 🙏

Cheers
Remy