Updating shared text styles reflecting the sketch layers/symbols directly

Aleksandyr

Hello,

Is there an easy way of updating the shared text styles of a sketch library through a plugin with the latest changes sketch introduces?

Basically, the plugin operates with a custom sketch library that the user imports.
The plugin represents a theme that needs to be applied over that library after changing user's preferences like colors, font family/weight, etc.

I've managed to apply all of the colorings with the new color variables but wasn't able to do the same with the text styles view.

Basically what I'm trying to do is to get all of the shared text styles, then assign all of the new values(font family/weight, etc.) from the theme(plugin) and send it back to sketch.
The problem is that some of the layers/symbols get updated automatically but others don't. Some of the layers/symbols that point to all those text stylings note the change without updating it directly so the user needs to go and apply them by themselves by refreshing the layer/symbol manually.

kevgski

Hi Aleksandyr do you have some sample/abstracted code that isn't working as expecting?

Aleksandyr

kevgski
Yep, let's say that I want to change the font family of all my h1 headlines.

const sharedTextStyle = libs.library.document.sharedTextStyles[0];
const sharedStyleName = sharedTextStyle.name.toLowerCase();
if (sharedStyleName.includes('h1 headline')) {
    sharedTextStyle.style.fontFamily = fonts.getFontDetails(themeData.h1).family;
}
libs.library.save();
// the location of the library that the user imports into his sketch project.
this.url  = existingLibrary.locationOnDisk(); 
// This is what the save method represents.
save: function() {
  this.documentNative.writeToURL_ofType_forSaveOperation_originalContentsURL_error(this.url, 
  'com.bohemiancoding.sketch.drawing', NSSaveOperation, nil, nil);
 }

kevgski

That's helpful. My sense is that you can do what you want with mostly the sketch JS API…

Last question I have for now.. do you notice any pattern about what types of objects aren't changing automatically? or do you have a document you could share that isn't behaving as expected?

Aleksandyr

kevgski The downside is that not all of the API is described in the documentation.

I've made some screenshots showing the library we've built and the reflection of the plugin when trying to apply the changed font.
updated comopnents
components that are not updated
refreshing the group

What is the thing that triggers sketch to accept and apply all of the new changes?

Also, how I'm applying/changing the font-weight(bold, italic)? Does it happen by directly passing the font family with the wight annotation, e.g TitilliumWeb-Bold?

Aleksandyr

kevgski Do you have any updates?

kevgski

I do! So I did some more digging and first tried something like this:

let sketch = require('sketch')
let document = sketch.getSelectedDocument()
let textStyles = document.sharedTextStyles
let textStyle = textStyles[0]
let textStyleName = textStyle.name
let library = textStyle.getLibrary()
let libraryDoc = library.getDocument()
let externalTextStyles = libraryDoc.sharedTextStyles
let matchedTextStyle = externalTextStyles.find(textStyle => textStyle.name == textStyleName)
let instances = matchedTextStyle.getAllInstancesLayers()
instances[0].style.fontFamily = "Georgia"

I kept on running into the issue with trying to modify the library document so I reached out to the sketch folks for more clarity and this is what they shared.

Library elements, i.e. shared styles, symbols, colours, etc. cannot be modified from outside – from documents using these libraries.
These changes have to made by opening the library itself.

Moreover, I think the fact that you've been able to change the color variables is more of a bug than intended behavior.

In summary, I think you'll need to change your overall approach for this plugin. I don't really understand what you are trying to accomplish but one thing that you could do is to have multiple files with different themes in each of them. Your plugin could then swap the styles and their references to the different documents.

Aleksandyr

kevgski Do you know at what point that modification was forbidden?
Because the plugin we are talking about was working before and now with the newly exposed API, color vars, etc. it is not.

We are not able to have predefined themes, because it is all about font styling and color grading. The user has plenty of choices, especially with the colors. The only option here is to make it work as it was working before.

kevgski

Do you know at what point that modification was forbidden?

No, I don't think there was a specific time that it was forbidden. I think whatever behavior you were using before was more of a bug.

We are not able to have predefined themes, because it is all about font styling and color grading. The user has plenty of choices, especially with the colors. The only option here is to make it work as it was working before.

Sorry I don't know of a way to manipulate a sketch file the way that you are wanting without first opening that file. As far as Sketch plugins go this is what I'm told:

You can’t modify another file (library) from a document that isn’t that exact file. Changes can only be made to the currently open file.

You might be able to manipulate the underlying JSON structure to do what you want but that's outside the scope of my knowledge.

Feel free to ask more questions here or reach out to the Sketch team!

sonburn

"Basically what I'm trying to do is to get all of the shared text styles, then assign all of the new values(font family/weight, etc.) from the theme(plugin) and send it back to sketch.
The problem is that some of the layers/symbols get updated automatically but others don't. Some of the layers/symbols that point to all those text stylings note the change without updating it directly so the user needs to go and apply them by themselves by refreshing the layer/symbol manually."

This to me is the meat of what you are trying to accomplish, and it is totally achievable. I think the talk about the "sketch library" is what is confusing the matter, because at the end of the day, you said "a custom sketch library that the user imports" which is no different than taking operations on an opened sketch file.

All that said, what you are experiencing is correct and what I have experienced as well. It sounds like you have successfully modified the shared style, whether it be in a shared library, or the same file, but are noticing that layers in which that style is applied are showing as being "out of date" requiring the user to refresh. This is because you also need to apply the same modifications you made to the shared style, to the object in which the style is applied. So if you change the font of the shared style, you need to change the font of the style of any text layer for which that style is applied, so they remain "in sync". This means you need to iterate through all objects that have the shared style applied, and make the same style modification. This can be done via plugin or externally directly on the file contents.

Aleksandyr

sonburn
This is exactly what I'm trying to achieve!
Do you know how I can get all of the text styles that all those shared styles are referencing?
Do you have any examples I can check?

sonburn

Aleksandyr Been super busy but I have this request on my to-do list to try and help you out...

Aleksandyr

sonburn That has been resolved. I have successfully modified all shared text styles by taking all references per every sharedTextStyle that is being used in the document external to the current project.