Text- & Layerstyles matching by values about merge-duplicate-symbols HOT 14 CLOSED

Hi @jansemka @nimbling @marxcie @michaelahokas ,

We just released v5.1.0, that includes the ability to Merge Similar Layer/Text styles including (or not, up to you) external library styles.

We're still on Beta, but if you try it out, let us know how it worked for you! 😉

from merge-duplicate-symbols.

Hi @jansemka,

Wow, that'd be super cool 🤩. What may be considered a "similar style", though?

For layer styles we have fills, borders, shadows, opacity, blurs, ... and for text styles we also have color, font, size, spacing, alignment, ... and many more. Are you thinking on processing all of those to set something like a "percentage of similitude"?

Or just compare one by one and if all of them are the same then suggest to merge both styles?

(As a workaround, if you know which styles are the same, you can merge them manually with the "Merge styles (from list)" option).

Thanks a lot for your feedback! Love the idea!

from merge-duplicate-symbols.

Sure!

We'll be tracking interest in this feature, and if we come up with a good way to build it I'll let you know.

Thanks a lot!

from merge-duplicate-symbols.

I will do it manually of course. Regarding the matching: I am not quite sure about how to match but in my case they are completely similar. I think the one by one comparsion is best, workes perfect for the symbols. The thing is, what i currently do is merging two librarys and works great with symbols. We need the same with the styles they are identical so also ready to merge. Another possibility would be to have so sort of filtering so you can check the imported values in a list (Checkboxes for values).

from merge-duplicate-symbols.

I too, am interested in this feature. It would automate the process greatly.
My use case would also be: 100% identical in appearance stack, but differing names.

But for other use cases, a "similarity percentage" sounds very sexy.

I'm in a big process of merging multiple documents to use one Library, and I'm repeating a lot of work in consolidating everything to point at a single source of truth.

While you're "in there", I'd love it if any "disabled" strokes & fills present in styles would be deleted, too.

from merge-duplicate-symbols.

Thanks for you +1 vote!

We're thinking on which could be a good approach to do so. As soon as we figure it out we'll let you know.

I would say cleaning styles is out of the scope of "Merge duplicates", but I'd recommend you to use Sketch Automate to do so. Just head to "Automate > Style > Remove All Disabled Styles" and... magic! Sketch Cleaner has a couple of cool tricks that may be handy for this scenarios, too.

Hope it helps!

from merge-duplicate-symbols.

Thanks a bunch :) I understand, and agree, that cleaning styles is out of the scope!

from merge-duplicate-symbols.

+1 for this. I already looked for a developer (didn't find one yet), and created some early mockups how I imagine the plugin. I'm working with sketch files using multiple libraries, or not using libraries at all, and my role is to clean up those files, use one library as the source of truth, and maintain the design system. Automate is a great help, but it doesn't cover these cases, when multiple files with multiple libraries has to be cleaned up, or when the styles stored in an another library file, or no style in use at all.

Just an example, we're using 9 type sizes, every type level has 2-8 color variations. We have 10+ feature files, each file has 3-10 pages, multiple artboards. So, what I can do is to go to a page, use Select Similar Layers plugin, select the type I'd like to change, look for the same type styles on all artboards, and then apply the style. It works for multiple artboards, but only for one page.

That's 9 (sizes) x 8 (color) x 10 (sketch file) x 10 (page) = 7200 times repeating the same thing, to solve a problem (I'm exaggerating a bit, but not that much).
And of course it's still not perfect, if for example the designer didn't use the right line height, and didn't use style, just typed the text, picked the color and the size, then the plugin can't find the similarity (because the line height defined in the style).

What I'm trying to say (and sorry for the long rant) I'd be happy to pay for a separated plugin doing this for me, if there'd be a plugin. I created this two concepts, not perfect, not final, just to transport the idea, hoping someone will just asking back how much I can afford for creating something like this, but I had no luck so far.

from merge-duplicate-symbols.

Hi @marxcie,

This is awesome! Thanks a lot for taking so much time and effort to build this.
May I ask you to arrange a list of the most common scenarios that you'd like this "automatic" process to recognise as duplicate styles? And for each one of them, what should it do about it (prompt you for decision, ...) ?

As an example:

• Some texts are using XXX font family, a YYY font weight, ZZZ font size, and a #HEX color. All of them match with one of the defined text styles, but these texts are not using that text style (the designer just set those manually). In this scenario I'd like to be prompted "Do you want us to apply automatically that text style to all these text blocks"?

Thanks!

from merge-duplicate-symbols.

Hi @oodesign

Sure, happy to help, because it's a pain for me at the moment, but I've seen this before as well. Even if one person working on a project longer time it can happen, and when a lot of people working on it, external teams, etc... it can escalate quickly.

• Designers are using the Design System and library, but looking for the right style sometimes too time consuming for them, so instead they're just using the font, color and size, but not the style defined. They know from hearth these parameters, but rarely line height and paragraph spacing. An automated process would help to change the text without style to the DS style. I'd like to see all the parameters applied to the text and style, because it can also happen they didn't use the style on purpose (like, the line height not fitting to that use case). So, in this case FONT, WEIGHT, SIZE, COLOR params are the same.
• almost same scenario, but even more complicated, when external designers, stakeholders trying to use the right styles, but they don't have time, or the resources (access to library or to the font), so in their designs they're using an almost similar font. In this case some of the parameters are the same, but could happen it looks somehow similar, but still not the same. They're using XXX font instead of YYY, the right font size, and maybe a similar, but not exactly identical color.
• and the third I've seen quite often, when they're using a different libraries, or the naming changed for the style, or the sketch file lost connection at some point to the library, and it's not auto-updating anymore. In this case two or more style exist with the same parameters. The matching is easier, but if it comes from an external library, it won't show up in the Text Styles window, but it does among the text styles. And it's not easy to remove outdated styles, and match the text with the right one, because no option for removing external styles, even when the library is not accessible anymore. (My process is to create texts with those styles, unlink from library, then I can remove it from local styles, but those are still not matched to the right DS style.)

Some examples:

Style mess:

Removal process at the moment:
Before:

Even finding styles with the same name, probably from different versions of the same library (?):


Creating texts with the styles:

Now I can remove it:

Styles removed:

The best for me would be a left side panel, when left side I can see all the different styles and texts used in the file (texts with similar parameters grouped of course), and on the right side next to every variation a dropdown to choose the appropriate text style, from a preselected library, this what I was trying to show in my concepts.

Does that makes sense?

from merge-duplicate-symbols.

Hi @marxcie!

Makes a lot of sense. Thank you for that thorough description!

We're now working on a way to merge similar styles (including or not library styles), and I guess that will help reduce some of those issues.

Proposing "similar" styles for unstyled texts and shapes would be the next thing, but there may be lots of text and shapes in there, and we'd need to find a good way to handle that in the plugin UI. If we figure it out and move on with it I'll make sure to let you know.

Thanks a lot for your feedback!

from merge-duplicate-symbols.

Hi @oodesign!

Your welcome, I hope it helped, and looking for to see an updated version of the Merged Duplicate Symbols plugin! I know the styles parts are still beta, but I know you're working on this, and that gives me hope. :) And yes, I can imagine with unstyled texts is a bit more complex problem, and the visualization is not easy, but you did a great job with the symbols!
Keep up the good work, and thanks for it, it was a life saver already don't know how many times!

from merge-duplicate-symbols.

+1 from me 👍

from merge-duplicate-symbols.

We're on it @michaelahokas! :)
Still in the works though. I'll make sure to let you know when it's released.

Thanks for your feedback!

from merge-duplicate-symbols.