In our latest Mac app update, you’ll be able to enjoy major enhancements to Smart Layout, including the ability to use Smart Layout outside Symbols, in groups and Artboards. Our team has made some really great content around this update to one of our major features, check it out!
Meet Smart Layout (again! )
If you’ve been using Sketch for a while, you’ve probably found yourself coming up with workarounds and cumbersome things to stretch out the capabilities of Smart Layout. So we’d like to play a fun game with you. Let’s try rebuilding those components, this time using the new improvements!
I want to share a workaround I found to an issue that has been around for some time related to nested Smart Layout symbols that have a minimum width value.
Let’s say you have a button symbol with Smart Layout and add a min-width of 148px. Then you use this button to create a new second symbol where most of the time you’ll want to override the original text, like in the screenshots below:
Button with Smart Layout and min-width:
Modal component that uses this button, notice that the button has a text override:
The issue that currently affects this setup is that when you override the text on a modal instance, the button will always grow even if the text is short enough to fit in the min-width value:
The workaround: nest the button without overriding text
To avoid the unwanted growth all that needs to be done is to reset the nested button in the modal component, so it uses the default text. If you remember, in our excercise, the original text is “Button label” so if we use this text, when we override the text in a modal instance it doesn’t grow unless text is large enough to grow past the min-width value of 148px:
And here’s an example of the fixed modal with overriden text:
thanks for your workaround. But I try it over and over again … I add an s to the button label of the nested instance. The button becomes longer, as expected. I reset the instance, write “Button Labels” to the instance via override and the button lengthens, contrary to expectations.
I cannot reproduce your workaround. What am I doing wrong? Have I overlooked something? (I have also tested it in your file, without success).
So here’s the update. I’ll summarize it and I prepared a video that goes through the details. There are two scenarios:
A- You want to use a single nested symbol with min-width
In this scenario the workaround stays unchanged → don’t override the symbol’s text and it won’t grow unless it’s needed.
B- You want to use two or more nested symbols with min-width
Here we need some tweaking and I see two ways this can work:
Make your base symbol match the min-width value and add a text label as large as possible
This will give you room to add several text variations withouth the symbol growing, because the text will be close to the min-width value. This workaround allows you to work with symbols
Use a Smart Layout Group
Use a Smart Layout group for the parent container and for wrapping the min-width buttons. The buttons and text can be symbols, as long as the parent is not. With this setup you can use a base symbol that’s shorter than the min-width value.
now I understand better what this is all about. It’s all about the “Minimun Width” feature, which I didn’t know before and now I understand why it works for you and didn’t work for me.
Thanks for the update and I hope this workaround is useful.
About minimum height, it’s something the team has explored as well and we have it as a Feature Request. I was wondering if you mind sharing a use case where you’d use min-height. For example, in a card component, where you want to keep a minimum height and use the card in a grid display.
)
