sketch-dynamic-button-3.5
sketch-dynamic-button-3.5 copied to clipboard
fuggfuggfugg
Support for symbols
Is possible to add dynamic padding to all instances of symbols after content overrides?
I'm using a single button as symbol throughout my design. When I cmd+J on the symbol it updates, but then the size of all instances is set to the padding of the original content. For example if I use a symbol with the text "button" then change the text to "Start Now!". I've tried it with all the resizing options set for the text and the BG.
This is something I'm not sure about. Let me put a note through to the dev group.
Also, couple months ago I was told Sketch was working on a new button feature hence I am simply maintaining the original plugin to work with new releases.
I know there is a plugin that supported this. In fact I thought it was Dynamic Button. There is a plugin that lets you specify the L and R padding much like DB3.5. IconLayer R:20 and the Label/Text layer gets your typical padding e.g. 10:10:10:30 and IRCC the icon is 20px from the right and the label is 30px from the right, leaving a 10px space between the left side of the icon and the right side of the label.
Also……
https://sketchtalk.io/discussion/2155/dynamic-button-3-5-and-symbols
@mikeprecious @montemartin @JWhiteUX
I think I got the symbols working fingers crossed. I've pushed it in a branch for now. Can I request you to Beta test this branch out please?
@fuggfuggfugg Mind blown! Hoping for this feature for a while. Button making euphoria here. Thanks. I'd suggest pushing this pony, live.
@mikeprecious Glad to hear that. I'll wait to see for any other issues that might crop up and merge it into the master.
One suggestion that came up was to make it work if button is inside a nested symbol. Will give it a shot.
Thanks again for the feedback.
+1 on the plugin functioning within nested symbols. Thanks for your work on this.
Chiming in to simply express my appreciation for those involved integrating this feature. Makes this plugin considerably more dynamic. Great work and thanks!
Amen @ckeelers ! Super helpful plugin! Saves me so much time! Many thanks @fuggfuggfugg
Hi Fugg, where are you on this? and nested symbols? this would be a huge time saver
@swizenfeld Sorry mate, been really busy past couple weekends working full time. I'll see what I can do this Sunday.
@mikeprecious I would appreciate your input in this.
I spent some time looking into nested symbol and got something working but I don't think this is how it is supposed to behave. I don't use sketch in my professional job at all maybe you can elaborate more. This seems to be a bit more complex to handle nested dynamic buttons.
Have a look at what I've currently happening:
Its more about having nested symbols instead the button than a symbol with the button being inside of it. so what would be great is that if the background and the text has nested symbols so we can change the color in case there are multiple color buttons in a website or app lets say one with a blue background and another that is a ghost blue button so you need one with blue text and blue border and another with white text and blue background.
On Sun, Mar 5, 2017 7:09 PM, fuggfuggfugg [email protected] wrote: @mikeprecious I would appreciate your input in this.
I spent some time looking into nested symbol and got something working but I don't think this is how it is supposed to behave. I don't use sketch in my professional job at all maybe you can elaborate more. This seems to be a bit more complex to handle nested dynamic buttons.
Have a look at what I've currently happening:
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.
The ideal outcome would be when I’ve created a series of button instances, each with their own unique text, off one one Symbol instance of the button, and I commit a Dynamic Button action, either all instances would update accordingly, OR, just that one instance in front of me on screen updates.
The core state, existing on the Symbols page, should never change. Because if it does, there’s the risk it may adversely affect the instances through the other Page(s).
In summary, the creation and modification of the button padding et al should happen in the Symbol. And all instances should follow that Symbol.
Maybe this means baking in two executable actions for Dynamic Button:
For modifying / committing the core Symbol state. For committing / applying the Symbol state on a single instance and/or all instances. I’d like to see controls for both - single, selected instance, and another option to apply to instances across the entire Sketch doc.
Let me know if you’re able to make sense out of these raw ideas.
Thanks Mike
On Mar 5, 2017, at 10:09 PM, fuggfuggfugg [email protected] wrote:
@mikeprecious https://github.com/mikeprecious I would appreciate your input in this.
I spent some time looking into nested symbol and got something working but I don't think this is how it is supposed to behave. I don't use sketch in my professional job at all maybe you can elaborate more. This seems to be a bit more complex to handle nested dynamic buttons.
Have a look at what I've currently happening:
https://cloud.githubusercontent.com/assets/5616123/23595473/1b45abdc-01f0-11e7-96a2-877a39f3e71e.gif — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/fuggfuggfugg/sketch-dynamic-button-3.5/issues/19#issuecomment-284292447, or mute the thread https://github.com/notifications/unsubscribe-auth/ABuyfdt3tV9AaWQ_FLteUJnKxjEkhZ68ks5ri3jtgaJpZM4LDbnV.
@mikeprecious @swizenfeld Thanks for the inputs, I'll look into this coming weekend.
In the meantime, another feature I may be able to add is default values in the manifest. I've had a couple of request for setting color, or buttons with only outline and not fill. Extra border-radius etc. Is this something of value to you?
Well I feel those are all things that you could do with child symbols for the background and text.
Would like to see a screenshot otherwise not sure how you would do this otherwise
On Mon, Mar 6, 2017 at 9:17 AM fuggfuggfugg [email protected] wrote:
@mikeprecious https://github.com/mikeprecious @swizenfeld https://github.com/swizenfeld Thanks for the inputs, I'll look into this coming weekend.
In the meantime, another feature I may be able to add is default values in the manifest. I've had a couple of request for setting color, or buttons with only outline and not fill. Extra border-radius etc. Is this something of value to you?
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/fuggfuggfugg/sketch-dynamic-button-3.5/issues/19#issuecomment-284465619, or mute the thread https://github.com/notifications/unsubscribe-auth/AGbjWNv6FBVILKadf06mT2HS7Z0eKbmsks5rjD-YgaJpZM4LDbnV .
@swizenfeld Sorry, I should have been clear. This is not related to the symbols at all. I currently default padding to 20, border radius to 5 and bg to gray when you run the dynamic button for the first time. I've had a lot of requests asking for default padding to 5, and no bg with outline. I have to then ask them to open plugin and update manually.
Also, Can you elaborate more on the first point. I'm not sure I understand.
Its more about having nested symbols instead the button than a symbol with the button being inside of it. so what would be great is that if the background and the text has nested symbols so we can change the color in case there are multiple color buttons in a website or app lets say one with a blue background and another that is a ghost blue button so you need one with blue text and blue border and another with white text and blue background.
Mind sending me a private email? I will send you a test sketch file of how the set up would be and see if you can get the dynamic button to work work it.
On Mon, Mar 6, 2017 at 9:28 AM fuggfuggfugg [email protected] wrote:
@swizenfeld https://github.com/swizenfeld Sorry, I should have been clear. This is not related to the symbols at all. I currently default padding to 20, border radius to 5 and bg to gray when you run the dynamic button for the first time. I've had a lot of requests asking for default padding to 5, and no bg with outline. I have to then ask them to open plugin and update manually.
Also, Can you elaborate more on the first point. I'm not sure I understand.
Its more about having nested symbols instead the button than a symbol with the button being inside of it. so what would be great is that if the background and the text has nested symbols so we can change the color in case there are multiple color buttons in a website or app lets say one with a blue background and another that is a ghost blue button so you need one with blue text and blue border and another with white text and blue background.
—
You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/fuggfuggfugg/sketch-dynamic-button-3.5/issues/19#issuecomment-284468968, or mute the thread https://github.com/notifications/unsubscribe-auth/AGbjWIpEvcTG1nG6sriKTuqbm0tJ8c_tks5rjEJDgaJpZM4LDbnV .
@mikeprecious Something like this? Although this is not nested so I'm not sure if I understood correctly.
@fuggfuggfugg You have the logic correct.
Take it one step further: If I went back to the Symbol and modify the padding, it would be great to have a command in Dynamic Button plugin where I can tell all Page by Page instances of that button to update to the new padding. That way, I don't need to go back into the potentially dozens or even hundreds of instances, to update the new padding. Perhaps the tie is created and maintained by the Symbol's title.
Thats great! Any advances on child symbols? 😬
On Wed, Mar 8, 2017 at 10:56 PM fuggfuggfugg [email protected] wrote:
@mikeprecious https://github.com/mikeprecious Something like this?
[image: symbols] https://cloud.githubusercontent.com/assets/5616123/23739273/a25e5f9c-046b-11e7-8b78-2003a972b8a0.gif
—
You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/fuggfuggfugg/sketch-dynamic-button-3.5/issues/19#issuecomment-285271062, or mute the thread https://github.com/notifications/unsubscribe-auth/AGbjWA3n2wY4gCOEit3Ai5mNR_k4bTjUks5rj6KrgaJpZM4LDbnV .
Working on it. Lol. I can only work on this after hours when I get back home.
@fuggfuggfugg in response to your screencast demo - yes! Though, for user experience cognition, if you introduced a child command to the effect of, "Apply to all instances".
Otherwise, this functionality works quite well.
From what I understand, the next challenge is nested Symbols.
@mikeprecious Instead of adding another child command I made it work with cmd+j. The master will resize to fit and then run calculations for all children instances in the same command.
I've committed this in a completely separate branch. This may not work on existing symbols, the implementation has changed quite a bit. I would warn you before installing this. However if you do and want to revert then download the older version here
As for nested symbol, I've had some progress. I have it partially working on one of the sketchfile @swizenfeld gave me. But there are still some cases it doesn't work as intended. I'm having trouble connecting to the correct padded file when there are multiple nested files. Getting there.
@mikeprecious - If you have a sketchfile with the buttons and overrides like in the gif, Can you send it over. I can take a look at that as well and make sure all cases are covered.
Here is a sneak peek
That is awesome!! That's exactly what I need can't wait for the working version.
Let me know if you need me to test it out
On Sun, Mar 12, 2017 at 9:46 PM fuggfuggfugg [email protected] wrote:
@mikeprecious https://github.com/mikeprecious Instead of adding another child command I made it work with cmd+j. The master will resize to fit and then run calculations for all children instances in the same command.
I've updated the branch https://github.com/fuggfuggfugg/sketch-dynamic-button-3.5/tree/sketch-symbols-fuck-yeah
[image: symbols] https://cloud.githubusercontent.com/assets/5616123/23841660/36c90436-0785-11e7-90e0-a2254e5340b6.gif
As for nested symbol, I've had some progress. I have it partially working on one of the sketchfile @swizenfeld https://github.com/swizenfeld gave me. But there are still some cases it doesn't work as intended. I'm having trouble connecting to the correct padded file when there are multiple nested files. Getting there.
@mikeprecious https://github.com/mikeprecious - If you have a sketchfile with the buttons and overrides like in the gif, Can you send it over. I can take a look at that as well and make sure all cases are covered.
Here is a sneak peek [image: symbols] https://cloud.githubusercontent.com/assets/5616123/23841809/49d21634-0786-11e7-9a48-1ec77727e73f.gif
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/fuggfuggfugg/sketch-dynamic-button-3.5/issues/19#issuecomment-286014724, or mute the thread https://github.com/notifications/unsubscribe-auth/AGbjWFpvd__jhzZBLF-pfPAbTjA744Euks5rlMoWgaJpZM4LDbnV .
Hey there! any more advancement into the child symbol?
On Sun, Mar 12, 2017 9:56 PM, sergio wizenfeld [email protected] wrote: That is awesome!! That's exactly what I need can't wait for the working version. Let me know if you need me to test it out
On Sun, Mar 12, 2017 at 9:46 PM fuggfuggfugg [email protected] wrote: @mikeprecious Instead of adding another child command I made it work with cmd+j. The master will resize to fit and then run calculations for all children instances in the same command.
I've updated the branch
As for nested symbol, I've had some progress. I have it partially working on one of the sketchfile @swizenfeld gave me. But there are still some cases it doesn't work as intended. I'm having trouble connecting to the correct padded file when there are multiple nested files. Getting there.
@mikeprecious - If you have a sketchfile with the buttons and overrides like in the gif, Can you send it over. I can take a look at that as well and make sure all cases are covered.
Here is a sneak peek
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.
Hi @swizenfeld
I haven't had any luck so far, My current issue is when you have overrides for text symbols meaning:
- You select override txt-blue - add "text 1"
- Then select override txt-white - add "text 2"
When I run the plugin it gives me both values and I have no way to determine which one is the current selected value.
There is a whole new ticket over here -> http://sketchplugins.com/d/108-2-text-values-for-the-same-symbol-override/8
If you see the last reply, unfortunately I'll have to dig deeper. I'm working today (Sat) so I'll try once I get home.
I compiled a Sketch file with some instructions, and all the building blocks. Not sure if this what @swizenfeld is asking for, or if you @fuggfuggfugg are working on.
I'll repost here — > http://sketchplugins.com/d/108-2-text-values-for-the-same-symbol-override/8
File DB3.5-Nested-Symbols-Proposal.zip
@cypmal sorry, I was away on holiday and never got a chance to work on it at all.
I will try and revisit with a fresh mind and hope to find a solution.