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!
We also prepared a sample document to get you started, feel free to download and play around with it!
- Post a sample Document URL (or the document itself, you can attach it!)
- Explain in the post or document what you would like the component to do
- My colleague @raulrincon and I, will try our hand at making it with Smart Layout
- If we can’t do it, we’ll accept defeat and provide alternative methods, if possible!
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:
This also solves the problem for a very common pattern of button combos, where you need all buttons to have the same width:
I hope this helps! Here’s the Sketch file. Please take a look and let us know what you think!
MIn width workaround.sketch (533.1 KB)
That is indeed a very very smart and useful workaround, thank you for sharing Jorge!
Hello @dfmedrano ,
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).
Hi @Xhaust I found what’s going on! Good news: the workaround is still viable. I’ll make a video and share it here. Thanks for testing the file
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.
Here’s the demo video link
And the file I used in the video
Workaround detailed - min width.sketch (437.3 KB)
Let us know how it goes!
Thank you @dfmedrano ,
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.
I think I’ve understood it now too
Something like the ability to set a minimum height would also be very nice to have.
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.
that’s thought transfer … just 10 minutes ago I discovered that the minimum height feature already exists:
You’re absolutely right! It depends on the direction of Smart Layout! I think I mixed it with max-width or max-height values
If you have any feedback on those feel free to share as well!