Add Smart Layout to buttons (including in nested symbols)

[Muurtegel]

I'm trying to add a modal dialog to my design. By default, the button says "Confirm". How can I change the label of the button to "Export" and resize the button appropriately?

[huw]

Hey Maarten,

You can change the label in the button using ordinary Sketch overrides—either by using the sidebar, or by double-clicking on the label, like so:

But if you want to change the size or placement of the buttons, you'll need to detach the layers from the symbol due to limitations with Sketch we haven't worked around. You can do that by right-clicking and selecting 'Detach from Symbol':

Let me know how this goes for you :)

Huw

[Muurtegel]

Hi Huw,

Thanks for getting back to me so quickly!

I'm aware of the override functionality, but words are almost never the same length. It's unfortunate that the only option is to detach the symbol, it kind of takes away the magic of using libraries.

How do Atlassian design teams deal with all these detached (and possibly outdated) symbols?

Cheers!

[Muurtegel]

Hey Huw,

I also asked this question in a Slack channel with Marketplace vendors. Someone pointed out that it may be possible in Sketch with Smart Layouts. https://www.sketch.com/docs/symbols/smart-layout/

Would it be possible to update the library to support this?

[huw]

We’ve been looking into Smart Layouts and we’re keen on them—but it’s a good chunk of revamping work for our libraries. If it happens, it won’t be until at least Q3.

[Muurtegel]

Definitely looks like a lot of work.

I've found a workaround in the meantime that doesn't involve detaching the symbol. Simply by hiding the buttons between a white square and placing separate buttons on top. If we ever find a solution, I can remove them without having to redo my designs.

[huw]

Awesome. I'll leave this issue open for now and get back to you if we implement a solution.