Dynamic Buttons for Sketch Symbols

[dcarmona05]

This 3.5 dynmaic button plugin is amazing...

I was wondering if there would be any way to allow dynamic buttons as 'symbols'... (ideally that you can create the dynamic logic in the symbol layer, but give the flexibility to change the text and update on the 'active' canvas page).

[fuggfuggfugg]

Apologies for the late response. Can you elaborate a bit more? If I understand correctly, instead of creating grouped collection (text & BG), create it as a symbol instead? What purpose would it solve?

[hoathai]

Reusable dynamic buttons

Non Symbols Solution

Use a combination of the Dynamic Button 3.5 plugin, shared styles and if you want to abut objects, use the Butter plugin

1. Creating Dynamic Button
   1. Create text object and type in padding value using CSS notation but with colon divider (ex: 10:20 or 10:20:10:20)
   2. Select text object and choose Dynamic Button 3.5 plugin, or Command+J
   3. Look at the layer group and notice that it contains the text element and a shape oject
   4. Dynamic button demo
2. Edit / Update button
   1. Change text string size
      1. update text, keep selection on text and choose Dynamic Button 3.5 plugin (Command+J)
   2. Update padding settings
      1. Change the text object layer name
      2. Keep selection on text and choose Dynamic Button 3.5 plugin (Command+J)
3. Applying global styles
   1. Use shared styles for button shape object
   2. Use text styles for button text
4. Abutting buttons
   1. If you want to align buttons next to each other, for example, use button groups where navigation items abut one another
   2. Use the Butter plugin
5. Note: symbols won't work with this approach, but there's no need because you can manage button design globally using styles

Symbols Approach

1. Creating Dynamic Button
   1. Create text object (set width to auto) and shape object (button background)
   2. Select the text and shape object and group them
   3. Select group and choose Plugins > Modulizer > Apply padding
      1. This will set the padding around the text object
      2. Padding can be set manually, Modulizer is just a quick tool to set padding
   4. Select the button (it should be grouped with text and shape) and create a symbol
2. Edit button width
   1. Use button label overrides to update button label
   2. When label width changes, resize the button (left/right). When the button text wraps, it means you’ve gone below the orginal padding definition
   3. The right padding may not be exact (+1-2 px) but may be more efficient by using symbols
   4. To be more exact, zoom into the shape (Command+2) when resizing
3. The Butter plugin still works with this solution

[fuggfuggfugg]

@dcarmona05 @hoathai @chris-tcw

Created new branch for Symbol support. Download plugin from #19

Please test when you have a moment and give feedback.

[Mythrendel]

@fuggfuggfugg @dcarmona05 @hoathai

I see now there is some support for symbols in the official release of this plugin but as this issue is not marked as resolved I thought I'd at least mention the plugin I wrote to allow fairly robust button handling using symbols. It supports re-labeling, re-padding, and even re-positioning the button all via symbol layer overrides.

https://github.com/mwhite05/Button-Symbols

Let me know what you think and whether there is any interest in expanding the feature set in it. You can see my current thoughts in the Future section of the readme.

[fuggfuggfugg]

I don't have Sketch at work to test your plugin. I'll give it a shot tonight from home if possible. Do you have a gif I can look at in action?

Does your plugin work with nested symbols? I haven't been able to crack this shit yet. You can check this ticket and this one too. See gif in the 2nd ticket.

A lot of these requests are for nested symbol support. If you can crack that, it'll be a game changer.

[Mythrendel]

I can probably create a gif real quick with the right tool - what tool did you use to make the one in your readme?

fuggfuggfugg mailto:[email protected] August 29, 2017 at 1:36 PM

I don't have Sketch at work to test your plugin. I'll give it a shot tonight from home if possible. Do you have a gif I can look at in action?

Does your plugin work with nested symbols? I haven't been able to crack this shit yet. You can check this ticket http://sketchplugins.com/d/97-nested-overrides-get-value-at-key/8 and this one http://sketchplugins.com/d/108-2-text-values-for-the-same-symbol-override too. See gif in the 2nd ticket.

A lot of these request for symbol support is nested symbols. If you can crack that, it'll be a game changer.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/fuggfuggfugg/sketch-dynamic-button-3.5/issues/2#issuecomment-325738295, or mute the thread https://github.com/notifications/unsubscribe-auth/AKjlYx7A7H2mlaXpVafo_kD9q-f5G8AMks5sdEwHgaJpZM4IG2z-.

-- Sent from Postbox https://www.postbox-inc.com/?utm_source=email&utm_medium=siglink&utm_campaign=reach

[Mythrendel]

@fuggfuggfugg

My plugin doesn't try to work for nested symbols yet. To be honest I haven't quite found a need for it with my setup. That said; I looked at the issue gif you posted and I am inclined to say let's you and I and maybe @herrkris pester the Sketch dev team until this is made possible. Before we contact them let's have a very specific suggestion of the recommended data structure we want. Maybe with the backing of two or three plugin developers (or more if you know of any) we can get some fast action on this issue.

(Also - please see above request for the tool you use to make the gifs. I forgot to @ mention you in that one.)

[herrkris]

Nested symbols -- at least the time I checked -- were quite hard to implement because there wasn't a reliable way to find the text layer for the measurement stuff. But perhaps things have changed by now?

[Mythrendel]

@herrkris - Right; from what I can see there really isn't a proper way to do that yet. I was just thinking the three of us could collaborate on a data structure that would work better and all of us work together to propose the change to the Sketch dev team.

[fuggfuggfugg]

Apologies for the delay, still at work.

what tool did you use to make the one in your readme?

@mwhite05 I use LiceCap.

Nested symbols -- at least the time I checked -- were quite hard to implement because there wasn't a reliable way to find the text layer for the measurement stuff. But perhaps things have changed by now?

@herrkris You are correct. The issue is getting most recent overridden text. To elaborate, the issue occurs when there are 2 overrides for a symbol. The overrides() output data does not save the order of the text override entered.

gif in action - http://sketchplugins.com/assets/files/2017-03-18/02:51:150-symbols1gif.gif

{
    "3729E339-296E-46BA-A3B8-2D542DC43186" =     {
        "0ABC7BE9-0CC5-4358-9676-9E4D4C8A3ADB" = "Text2";
        "2DBA840F-9ED0-4AD3-B4B9-FFED1F1387F6" = "Text1";
        symbolID = "33727981-0F04-4D77-A142-EFA3028F2B4F"
    };
}

I need to know the text which gives the text-width, I use this width & padding to then calculate the dimensions of the button. If I can't figure out the most recent text, then I cannot calculate the width of the button correctly. Unfortunately, This was the most recent reply by Ale at sketchplugins

@ale#1408 I read this recently about NSDictionary: A dictionary is not an ordered representation of data. So it looks like maybe we're out of luck with the current implementation.

I am not proficient in Objective C, so I'm not sure if there is an easy alternative to NSDictionary. Also if the Sketch developer team would consider to update to the alternative.

One solution I was about to try over this weekend was to present a dialog for the user to select the most recent text and then calculate accordingly. This might work.

I was also made aware sometime in 2016 in this post about Sketch were working on their own native button functionality. Looks like it ain't happening anytime soon. I'm still hoping for this. I only maintain this plugin to be up to date with the with latest Sketch version since the original plugin was abandoned. I don't get much time to work on this.

[herrkris]

But how does the Sketch Team knows which text to display? They have to keep track of that somehow too, I would say. The only solution right now would be to store the current text, compare it with the override entries and choose the text entry which differs from the one which was stored.

But that means that we would have to track every symbol and store it in memory. Hm. What I don't get is, why store the old and new override? Why not just the one that's being used?

Any chance of getting in touch with the Sketch developers directly?

[Mythrendel]

@fuggfuggfugg

I've added a demo gif to the readme page of my plugin: https://github.com/mwhite05/Button-Symbols

[Mythrendel]

@fuggfuggfugg @herrkris

If I understand correctly, the entire reason people are asking for nested symbols is so they can make the button look different.

If my understanding is accurate, you and others may find my plugin solves the underlying problem (though in a different way entirely).

I've just added a second demo gif that demonstrates using top-level symbol swapping vs swapping a symbol nested inside.

https://github.com/mwhite05/Button-Symbols#user-content-use-symbol-swapping-to-avoid-nested-button-symbols

[fuggfuggfugg]

pinging @mikeprecious @cypmal @swizenfeld - They'd be definitely interested in the your plugin & this discussion

[mikeprecious]

Thanks @fuggfuggfugg for looping us in! Checked out the plugin! Looks promising. Would love to see a trigger-able action in the plugin architecture, to convert an existing element into a Button-Symbols plugin compatible element. Bit of extra legwork to carry around a Sketch file with a spec'd instance. Otherwise, really great beginnings of a viable button management concept.

Ref: https://github.com/mwhite05/Button-Symbols#user-content-use-symbol-swapping-to-avoid-nested-button-symbols

[Mythrendel]

@fuggfuggfugg @cypmal @swizenfeld

I took a stab at adding an insert button symbol command last night so you don't have to have a separate Sketch file with that primary button symbol in it. You can read more about it here: https://github.com/mwhite05/Button-Symbols/issues/1

[fuggfuggfugg]

fyi - https://www.youtube.com/watch?v=suP1sOU4J3E

This is huge

[Mythrendel]

wow..... mind blown

Libraries in Sketch.... amazing.

takes a little time to think over how to leverage these both for design at work and in my plugin