Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Generate sketch file from Storybook #60

Open
domyen opened this issue Aug 6, 2019 · 6 comments
Open

Generate sketch file from Storybook #60

domyen opened this issue Aug 6, 2019 · 6 comments
Labels
help wanted Extra attention is needed

Comments

@domyen
Copy link
Member

domyen commented Aug 6, 2019

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
@domyen domyen added the help wanted Extra attention is needed label Aug 6, 2019
@leerob
Copy link
Contributor

leerob commented Aug 8, 2019

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
Copy link
Contributor

jsomsanith commented Aug 8, 2019

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
Copy link
Contributor

leerob commented Aug 8, 2019

@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:

@leerob
Copy link
Contributor

leerob commented Sep 16, 2019

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

@damcalder
Copy link

@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
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

4 participants