So, when there’s text in a Symbol, you’re able to allow most of the text configuration to be overridden, but, for some reason, you can’t override the alignment’s “Auto Width” / “Auto Height” / “Fixed Size” settings as well as the width of the text when set to “Fixed Size”. I wonder why that is? Is that simply something that got overlooked? It would be quite useful to be able override those thing.
To help clarify, here are a couple screenshots from the Mac app.
Symbol:
Instance:
Hi there, welcome to the Forum and thank you for sharing this!
Auto width / height / Fixed size define how you want the text layer to behave, but they are not text attributes themselves. This is why you don’t see them as part of text overrides.
I wanted to ask what you’re building and how switching alignment on a symbol instance would help. Maybe I can help get the same result in a different way.
Welcome again!
Hi Jorge! Thanks for the welcome!
So, I’m currently in the process of moving a prototyping component library from XD to Sketch (which for the most part I’m very impressed by!). The component you see in the screenshots is one example of a few in which I need to be able to switch that text layer behavior.
It’s a component that much of the time I’m fine with its “value” layer just being “Auto Width”. However, there are times when I want to mock it up with multiple lines of text within the context of a “column” and don’t want to have to manually add line-breaks to mock up the text. I’d rather the text be able to simply wrap itself in a fixed width. Now, considering that the “columns” can be different widths, setting the layer to “Fixed Size” would also require me to be able to change the width and height.
Here’s a screenshot of the equivalent situation in XD where I’m clicking into my component instance’s text layer and I’m provided with the ability to switch between “Auto Width” and “Fixed Size”, which you can see highlighted in the context panel.
Anyway, this is a pretty common need for me and right now, the only way that I can currently achieve what I need (and have come to expect through my experience with XD) is via detaching the instance. That’s definitely not optimal and defeats the purpose of using symbols.
Thanks
Mike
Hey Mike, thanks for sharing this info! I think there’s a workaround that can help you!
You can create a symbol that uses auto height layers and then you set the symbol with vertical Smart Layout. This setup will allow you to change the instance’s width and the text will adapt to it, so you don’t need to change between auto width / auto height.
Here’s the demo video and a sample file. I hope it helps!
Video link: CleanShot 2024-11-22 at 15.16.17
resizeable text symbol.sketch (78.9 KB)
Let me know if this helps!
Hey Jorge. Thanks for the solution! That works exactly as I need it to. It definitely was not obvious that it would work that way, but it’s ultimately easier to change the width at the component level than what I was trying to do at the text layer level.
Hey Mike,
Oh, this is great! I’m happy that this method works for you! We want to make things easier with the Flex layout work that’s currently in progress. You’ll still need to edit the component’s width, but it should be smoother than the current behavior with Smart Layout.
