React-sketchapp: Sketch Libraries & react-sketchapp

[mathieudutour]

_I was talking with @michaeldick about a workflow that could emerge around react-sketchapp and Sketch Libraries and I thought I might as well share and discuss it with all of you._

Sketch Libraries are perfect for creating style guides and using the components defined in one file in another file. That's a bit how I see the react files using react-sketchapp: a set of components (usually the one defined in your style guide, potentially used in production) that you would then use to design new parts of your app/website.

Wouldn't it be amazing that a react-sketchapp plugin would actually create a Sketch Library? You would run the plugin and boom 💥, all your components are available as symbols to use in your design. Re-running it would just update the Library.

Maybe it makes sense that there are 2 differents commands: 1 to create the sketch page as now, and 1 to create the Library.

Maybe it would make sense in that configuration that most of what you define is a symbol. Not sure what would or wouldn't be one tho.

It shouldn't be too hard to fork if that's not something we want in the core, just wondering if you all already tried/thought about it?

[kristof]

This would be great! The injectSymbols method could be used to generate the symbols on the symbols page which is enough to have a Sketch library. Updating a library would be done in code and regular designers could still use the Sketch UI to build interfaces from generated react-sketchapp libraries. One thing that must be fixed in order to create this wonderful workflow is issue #150, else we won't be able to stretch and resize symbols from within the Sketch UI.

[jongold]

Haven't tried it / haven't played with Libraries yet, but this seems awesome — would love to see it if anyone has time to work on it :)

[kristof]

@jongold I'll do a little research when I find some spare time.

[kristof]

I'm able to create a library from a generated Sketch document. However when I make changes to some symbols and save the library the implementation doesn't receive a notification that the symbols have changed. When I manually poke the symbol in the library (move it a pixel back and forth) and save it, the changes are broadcasted.

I made a diff of the symbol before and after poking it and noticed that the only change in the JSON is that the generated symbol has a changeIdentifier of 0 and the poked version has a changeIdentifier with an integer other than 0. My guess is that Sketch checks these values in order to scan changes but I have no clue to what value we need to set this.

Any ideas?

[mathieudutour]

Could we manually change the changeIdentifier? It's probably a field on the symbol, maybe we can try to set it to a random value.

[kristof]

@mathieudutour I've added a field on the symbol that sets the changeIdentifier to 1 but no progress so far. So I'm guessing it indeed needs to be a unique value, I'll keep you guys updated when I stumble upon something :)

[larsonjj]

@kristof & @mathieudutour,

This PR (https://github.com/darknoon/sketchapp-json-plugin/pull/3) will allow for Libraries to work and correctly receive symbol changes in separate files. Haven't had a response from @darknoon in a while on whether it will get merged yet though 😢 .

[larsonjj]

Added new PR (#183) to basically remove the need to wait on sketchapp-json-plugin and give more control over Sketch -> React-sketchapp and React-sketchapp -> Sketch functionality within this repo.

It will also allow for the merging of #180 and #170, which should help push this idea forward.

[mathieudutour]

I played a bit with it and it's just amazing! Here is the (very crude) result: https://github.com/mathieudutour/react-sketchapp-library

It's a sketch plugin with 2 commands:

• Render Library: same as classic react-sketchapp, render the library in the current document
• Generate Library: it's creating a new sketch document, rendering the library, saving it and adding the file to the user libraries.

It's creating with react-primitives so you can use the same components in your app and in your design!

Thanks @larsonjj for your work, wouldn't be possible without it!