Prototype Button states after the new update

[hone_w (Hone)]

Hi everyone,

I seem to be struggling to do something that I could do quite easily earlier. Its prototyping button states by toggling visibility or using Show/Hide layer depending on the application.

I would do the following to create a button-

1. Have two states of the button
2. Drag the Active state under the Inactive state of the button
3. Go to Prototype in the Inspector
4. Change Visibility from Default to Custom
5. Click Show Layer or Hide Layer or Toggle depending on the application
6. Click Play and I had a working button that I could click and it would change states.

I could then use the same button as a symbol and use it across my document where I could easily rename the button text on both states, as applicable. It worked like a charm!

With the new update the Active state of the button doesn’t go under the Inactive state, it just sits around it somehow, I suspect that’s a Stacks thing. When I end up clicking command to ignore the stack layout, it does sit under the Inactive layer, but when I try to reuse it across my file, I still see the Active state button protruding from the edges. Turns out it doesn’t resize along with a change in text like I used to use it before.

Anyone with ideas would be appreciated!

Thanks

[dfmedrano (Jorge)]

Hello @hone_w ,

Indeed, this is related to stacks. The way to create rollovers or toggle buttons is to use symbol instances:

• Create one symbol for each state: default and hover
• Insert one instance for each state
• Stack them and set the hover instance to ignore the stack
• Create a new stack and then turn it into a symbol

When you insert an instance of the new symbol you’ll have to override text once for each state, here’s a demo:

hover - press buttons.sketch (121.5 KB)

If you need more than one state, for example, a pressed state, group the hover and pressed states to keep resizing consistent.

I hope this helps.

[hone_w (Hone)]

Hi and thanks a lot for that @dfmedrano !

That helped massively.

I played around with it a little bit and figured out that after step 2 in your suggestion, I don’t have to ask the lower layer to ignore Stacks, if I just create a group, and use the drop down in the inspector to convert that into a Frame.

So far it’s working well for about three instances I’ve used this method for.

Is there any particular reason you see why I should check ignore stack layout?

Thanks a lot

[dfmedrano (Jorge)]

Hi @hone_w

Ohh, that’s a really nice tip, thank you! I didn’t know you could also use a frame to “wrap” the lower layer and then you don’t need to use the Ignore stack option.

However, In this setup the symbol instance will have the wrong dimensions, but it looks good and interactivity works.

We’ll look into this, thanks again!

[dfmedrano (Jorge)]

Ahh nevermind, you just need to make the nested frame a Stack and dimensions will be good