Merge Duplicates Tips & Tricks: Part I

Merge duplicates is a Sketch plugin to get rid of duplicate, inconsistent, and unnecessary symbols, styles, and variables in your design systems and your design files.

And all of that is pretty cool and helpful on its own (see this article for basic usage) , but there are many cool tricks that Merge Duplicates can play, and… can’t wait to share them with you! 😊

Trick 1: Explore different versions of a component (without breaking anything)

A/B-ing different explorations of a component in your designs is always a pain, because it typically means duplicating your components, duplicating the artboards, and have their instances replaced manually in the design (which is time-consuming — and extremely boring 😅 — ).

And we thought we could use Merge selected symbols to do the boring work for us :)

What’s the trick?

Use merge selected symbols to have your new component/exploration applied everywhere (instances and overrides). If you like it… cool! Otherwise, hit Undo (⌘+Z), and keep exploring.

Why is it useful?

This trick will allow you to run different explorations without affecting your current designs and handoff, and messing it up with your current symbols (and other designers using the file).

When is it useful?

• When you want to A/B several explorations
• To iterate a component in your design system library
• For design explorations

How to:

1. Duplicate your initial component (Symbol A >Symbol A’)
2. Tweak as you wish the second component (Symbol A’)
3. Select both, and run Merge selected symbols.
4. Choose to keep Symbol A’. This will “apply” Symbol A’ everywhere (and also remove Symbol A — we know — but keep reading)
5. Do you have further explorations to check? Hit Undo (⌘+Z), and repeat steps 2 to 4 with the other exploration.
6. If you’re happy with any of them, you’re done. Otherwise, Undo the merge, and keep iterating 😊.

Trick 2: Explore with design system colors

Say you’re planning to update your design system colors (new branding, new theme, or just a refresh?). Changing directly your color variables may be harmful, as it may affect all the components, design tokens, and rest of handoff (and mess around with other designers working on the file).

Duplicating the variables and have them applied elsewhere manually once may be a pain, but doing it for several explorations may take forever.

So we thought of using merge color variables to do the boring hard work for us.

What’s the trick?

Duplicate the color variables, A/B, and use merge color variables to have the new colors applied everywhere.

Why is it useful?

This trick will allow you to explore with color variables without breaking the design, and enable you to apply the new colors in a breeze when you’re done with the exploration.

When is it useful?

• When you want to A/B several color explorations.
• When iterating on your design system colors.

How to:

1. Duplicate your initial color variable (Color A >Color A’)
2. Tweak as you wish the second color variable (Color A’)
3. Run Merge color variables (with same name) if you kept the original name in your duplicate, or Merge color variables (from list) otherwise.
4. Choose to keep Color A’. This will “apply” Color A’ everywhere (and also remove Color A — we know — but keep reading).
5. Do you have further explorations to check? Hit Undo (⌘+Z), and repeat steps 2 to 4 with the other exploration.
6. If you’re happy with any of them, you’re done. Otherwise, Undo the merge, and keep iterating 😊.

Trick 3: How to update both library and child documents

As you may know, Merge Duplicates action scope is restricted to the current open document, and therefore all “child” documents (files using library symbols or styles you are merging in the library file) won’t get automatically updated.

Note: A while ago it wasn’t possible (due to Sketch restrictions) to get access to other documents to update them. Currently, Sketch enables plugins to update any “open document”, so we may have an open door on that side (something like “merge these symbols/styles, and also update my other open documents”, but it’d still need you to open the related documents). We’re currently analyzing it, and we’ll make sure to let you know if we’re able to support it in the near future.

As a workaround (for now), this is how to update both library and child documents:

1. Say you have styles A and B in the library, and just want to keep style A.
2. Open first the child document (not the library), and use “Merge layer styles (from list)”.
3. Select the styles that you’d like to merge (A and B). Choose the one you want to keep (A), and press Merge. This will update all the layers (and overrides) using the style you discarded (B), and apply style A to them.
4. At this point, all related layers (in this child document) will be using style A (and none will be using B).
5. Repeat steps 2 to 4 for all child documents (yup, this sucks).
6. Now, open the library, and merge styles A and B.
7. At this point style B won’t exist anymore in the library, and won’t be used in the child document. So, hopefully that would be it.

We know this is not ideal, and if you have a bunch of child documents, updating first all of them may take a lot of time. As mentioned, we’ll be happy to let you know if we’re able to support multiple documents update it in the near future.

This is it for now! But keep tuned for Part II. 😉

If you have any cool tricks you’d like to share with us (and see included in this series), just drop a comment below. We’d love to hear back from you!