Set padding on multiple layers within a symbol

[stphndxn]

Feature request / enhancement

I tend to construct button components like this:

• A text layer
• A symbol (this symbol contains a single rectangle with a solid color)
• A mask (this helps me get border radii on my buttons)

When I use this plugin, the padding is applied to the "mask" layer—as expected given it is the layer furthest to the back—except I'd like it to be applied to both the symbol and the mask. I feel this might be a huge ask. I'd be happy to help develop this feature out, too, if that's an option!

[mikeozornin]

You can do it with Paddy now.

Here is how:

1. Create BG for buttons as a symbol. If you want to override border radius too, than create two symbols: BG only and masked BG.
2. Create symbol of button from: button BG symbol, text and icon symbol. Mark text with paddings and set correct symbol resize options for other elements.
3. Profit! Paddy autoresize will work fine.

I attached example file. All buttons on Page 1 are instances of the same symbol. Try to change text and look at resize. Preview:

Sketch-file: paddy-example.sketch.zip

Feel free to ask for help, if you need.

[fancymans]

Padding-right breaks when wrapping the Paddy elements with another set of padding.

Sketch file: paddy-border-radii-example.sketch.zip

[mikeozornin]

I fixed you solution: I moved padding settings to mask and add - to BG symbol. You symbols must calculate padding only from the text layer (set - to other layers). Paddy will resize whole symbol to a new size. If you set sketch resize properly you will get what you need:

If you what to have several buttons with different border radius you can try to use nested symbols:

paddy-examples.zip

[mikeozornin]

Maybe having multiple paddings will be good, but you don't need it in simple cases.

[DWilliames]

Thanks heaps @mikeozornin for helping out responding to this!! :)

Yeah; right now Paddy doesn't support 'multiple' layers being the 'Padding' layer within the same group. It could cause some conflicts with how it is currently set up.

I think @mikeozornin has proceeded a great example of how you can do it currently. So for now I will close this feature request; as I'm not sure if it is actually necessary. 👍

[fancymans]

Was able to test and it works like a charm. Thanks for the help @mikeozornin! ;)

[stphndxn]

Unfortunately, I'm still unable to get the desired effect. My symbol contains the following layers:

Text layer 1
Text layer 2
Text layer 3
Text layer 4
Text layer 5
Text layer 6
Background Color (Symbol)
Mask

To give more context, this button component setup allows me to create multiple styles of button from a single component. For example, I can use Text layer 2, switch up the background color with another color (all my colors are symbols, to allow switching like this). The reason for the mask is so that I can ensure each button have corner radii.

In terms of labelling, they're as follows:

Primary Action, White
Primary Action, White, Semibold
Secondary Action, Blue, Bold
Secondary Action, Blue, Semibold
Secondary Action, Gray
Secondary Action, Red
-Background Color
Mask [8 16]

I only use one text layer at a time and then set the others to a blank space to remove the placeholder text. Instances of this button symbol don't update to the spacing ([8 16]).

[mikeozornin]

As for me, you have a very strange symbol organization ;–)

I tried to create your button in Sketch:

And source file: paddy-6-text-styles-example.sketch.zip

If I'm wrong, please attach sketch source file, I'll try to help you.

[stphndxn]

Hey, @mikeozornin! Nope, you've got it spot on there! Even then, downloading your Sketch file, the resizing doesn't work for me. 🤔

[mikeozornin]

🤔 I just had the same on my work desktop. The same plugin, same sketch version, same file and resize didn't work.

I enter button symbol editing, select any layer (e.g. mask) and deselect it. Paddy showed symbol instances update.

After that resizing started again. Maybe the same magic trick will help to you too.