Generate sketch file from Storybook

[domyen]

Looking for contributors to help us explore this uncharted territory.

Goal
Generate Sketch (or other design files) from the production components and stories. This helps designers stay in sync with the bonafide UI instead of toying with UI facsimile.

TODOs

• Integrate a tool like HTML sketchapp or Sketch constructor (by Amazon)
• Explore the workflow for generating file on CI build
• Explore workflow of how a designer consumes the design system

[leerob]

I've spent a little bit of time looking into this. It's definitely possible, but I will say there's gonna be some hurdles. Specifically:

Explore workflow of how a designer consumes the design system

When getting my hands dirty making a Sketch component library, I learned about best practices for Sketch symbols and creating nested symbols. I'm wondering how we could auto-gen a Sketch symbol idiomatically.

Consider a <Checkbox /> component. In the Sketch symbol, you could have a layer style for checked/unchecked, with the ability to pass a label for the text to display beside it. If you're properly using nested symbols, you can change from unchecked -> checked without losing your label value. If the checked state is an entirely new symbol, then you lose that value.

Maybe the pros from auto-generating outweigh this con. It's also possible we could add attributes into the CSF to pass metadata to Sketch somehow.

[jsomsanith]

To share the generated sketch lib, would it be possible to push that to sketch cloud ?
The designers in my company share their sketch components lib through this service, I don’t know if they have a rest api for that

[leerob]

@jsomsanith That would be nice. Doing some quick searching, I don't see anything about a Cloud Rest API.

Some other things I've looked into:

• react-sketchapp, while awesome, appears to be more for React Native than web.
• story2sketch seems decent, but I couldn't get it to work. (Uses html-sketchapp under the hood).
• Could use this library for the actual creation of the Sketch file.

[leerob]

👀 https://github.com/react-figma/react-figma

[damcalder]

@jsomsanith maybe having the ability to update existing files is enough. That way, someone in your team can have the local files updated and then sync them manually with Sketch cloud. From what I remember, Sketch Cloud already works like that.

Sketch constructor seems to have the ability to manipulate an existing Sketch file, so it seems doable.

[jsomsanith]

Yeah, the ideal target would have been to automate that. But it doesn’t seem possible.
Manual sync is a good suggestion