Swap local color styles to match external

Hi, I have created a design system library with a bunch of color styles (300+ of them). I have now decided that I want to separate the colors and components so that one library has only components and the other only colors. Is there any way (or a plugin) that matches the local color styles from the original library and matches them to new library with only colors? Then I can delete the styles from the components library.

If I had to do this manually it would be too hard and way too long.

This is how I Move styles. :relaxed:

1 Like

The thing is that all the components that had the associated style to them lose the attached style that way? As in they all go back to the hex value instead of the style.

1 Like

But what if the ‘source’ and ‘consumer’ file (as per that video) are the same file. One I cut the styles from that file all components with the a color style attached revert to a hex value

Sorry, but I can’t confirm this. After the styles are moved and published to the destination file, the source file references the styles in the destination file and a message appears in the file that updates are available.

For us, the main file (the color client file) still had some publishable updates (of icons) pending. Cut-paste to the new color host file did not trigger an update.

Only when the main file itself had nothing to push to updates, did the mechanism work. Also, the to be cut color first HAS to have been published from the main file before cutting it away. Bit hard to explain, but that was the case here.

A small issue was that when there is no style yet in the new library file, “Paste style” can not be done. On the canvas there is “Paste here”, but the user can’t right-click somewhere on the right-hand panel to “Paste style”. Only when any color is there, can the user right-click on that color area to let that option appear.

You could use either “Paste Here” or Cmd + V shortcut.