Component Library Theming via a Plugin

Hey guys,

I wanted to ask you if you have considered supporting component theming through a plugin?


We are providing an XD UI kit and we want to enable the users to theme the components (i.e. change the predefined colors that are used by the components) using a plugin.
We’d be happy with any sort of suggestions.

Long explanation:

The problem:
We’re trying to programmatically edit an asset color and change it across all components that are using it.

The approach:
We use assets.colors.get() to find all the currently defined colors; edit the color of interest and watch it being modified in all components that are using it.
Now that editing a color is not possible through the API, we were forced to delete the color of interest and replace it with a new one. This approach however won’t update the color throughout the artboard (it possibly unlinks the components’ colors from the asset color, since the color gets deleted), so we should also take care of the update of the color wherever used. We hit some bottlenecks here too. Possibly because of the edit context, the desired component should be manually selected via the UI. That’s doable when we are talking in terms of 1-2 components, but it would be a hard task when the artboard has dozens of components and all their colors should be changed. Therefore, we tried to manually update the selection. We iterated through all symbols in the artboard and upon getting to a symbol, we updated the selection.items collection. This however also didn’t do the trick, because probably the selection.items-setter is limited to the currently visible selection from the UI.
Furthermore, if trying to edit anything out of the edit context, XD reverts all changes, which is again described in the docs.

It could be said that we’re stuck. Can you please suggest an approach for that current scenario?

Thank you!

Best regards,
Petko Bozhinov

There is no easy way to do what you’re trying to accomplish, unfortunately, due to the limitations around the edit context – as you discovered, you can’t easily change the selection away from the user’s initial selection.

I can’t think of any great workaround atm, but adding @tatemasi for further visibility.

1 Like