My concern with any tools Craft, React-sketchapp, etc. is the obsolete point. And being the apex of an entire design system it's important that it functions, and is maintainable.
if they have a synced library of Sketch symbols we can use this project to generate those symbols when things change in our codebase
but the whole idea is reducing the gap between design & engineering - we won't be happy until we're designing with react components :P
Oh hmmm... I just went with the plugin build instructions and that worked. The
render script doesn't seem to render anything to my blank Sketch doc
@johnpeele what version of sketch?
are there any errors in console?
@briannhinton sorry, lost track of this tab :D
uploaded a zip because I haven't had time to check the code
you need a google translate API key (because I don't know if it's a huge deal if I share mine) - put it in src/translate.js
this is after
npm run render
Usage: sketchtool <command> [<args>]
[--formats=<string> | -f <string>]
[--use-id-for-name{=YES|NO} | --no-use-id-for-name | -n {<YES|NO>}]
[--max-size=<float> | -m <float>]
[--item=<string> | -i <string>]
[--items=<string> | -a <string>]
[--background=<string> | -g <string>]
[--compression=<float> | -c <float>]
[--reveal{=YES|NO} | --no-reveal | -r {<YES|NO>}]
[--outputJSON=<path> | -J <path>]
[--include-symbols{=YES|NO} | --no-include-symbols | - {<YES|NO>}]
[--bounds=<rectangle> | -b <rectangle>]
[--version | -v] [--filename=<string> | -F <string>]
[--scales=<path> | -s <path>]
[--compact{=YES|NO} | --no-compact | -k {<YES|NO>}]
[--overwriting{=YES|NO} | --no-overwriting | -V {<YES|NO>}]
[--trimmed{=YES|NO} | --no-trimmed | -t {<YES|NO>}]
[--group-contents-only{=YES|NO} | --no-group-contents-only | -G {<YES|NO>}]
[--help | -h]
[--include-namespaces{=YES|NO} | --no-include-namespaces | -N {<YES|NO>}]
[--progressive{=YES|NO} | --no-progressive | -p {<YES|NO>}]
[--save-for-web{=YES|NO} | --no-save-for-web | -w {<YES|NO>}]
[--output=<path> | -o <path>]npm ERR! Tell the author that this fails on your system:
npm ERR! skpm build --watch --run
I have similar problem as @johnpeele.
Followed instructions here http://airbnb.io/react-sketchapp/ and nothing render to my sketch. When I close sketch (43.2) and hit render (npm run render), sketch opens at introduction page or with dialog message to open file.
Tried different example (foursquare-maps), same problem. Render to web (npm run web) works great.
Get error about deprecated loadingUtils.parseQuery().
🖨 Copied src/manifest.json in 12ms
(node:54160) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
Executing post-build scripts
🔨 Built ./main.js in 3329ms
(null)node v6.10.2, npm 3.10.10, mac OS v10.12.4
what path is Sketch located at?
I need more info to try to help :(
@jongold Tried also styleguide example, same problem. After hit render, it shows me copied manifesto and build ./main.js. And (null) (as code above). And than only post-build script. No error.
I restarted sketch, also closed it completely. When its closed and hit render, sketch opens only to dialog message. When I open new blank file, window with sketch still gets focused (i guess thanks to post-build script which keep repeating).
Sketch is in Application folder and repo with react-sketch.app is on iCloud drive. I cant access to computer now to post full path (I'm sorry, battery ran out and I forgot charger - have to wait to tomorrow).
also, can you try dragging react-sketchapp to your desktop and running from there?
there was a bug that was doing weird things if it was inside a folder with spaces in the name
(weird huh?)
sorry for the hiccups, appreciate you patience
@jongold Hi Jon. I’m giving a talk and demo of your library tonight at a React + Sketch meetup. I spent some time this weekend trying to wrap my head around it (I naively thought it was something simpler). I’m still trying to understand it, like how it works in production, tooling stacks needed and all that jazz. But the biggest thing for me was react primitives. While I continue down that path, I wanted to ask: Is it fair/accurate to say that react-sketchapp is part of a fork of react primitives, to make a sort of 'react-sketch primitives’ (a common language across react/rn/sketch)?
possible workflows:
- render stickersheets for designers to use with our design system components
- use react-sketchapp to build tooling on top of sketch with our components - https://twitter.com/jongold/status/866854672421634049
@esthor hey! I have no idea what timezone you're in, sorry if this is too late :(
it's not a fork of primitives — indeed it's integrated in primitives
react -primitives is a common set of components shared across platforms that then delegates to the corresponding platform when you render
so rather than
import { View } from 'react-native' you'd import { View } from 'react-primitives' and then your build tool would decide whether it wanted react-native or react-native-web or react-sketchapp components
there are other ways to achieve it without using react-primitives at all, but react-primitives is a coworker's project so I'm kinda biased
@jongold Whoa. Can I just come and shadow you guys for a week? :smile: This is a really fascinating philosophy/workflow. I am curious about the tooling on the build side, the efficiency of using such a system (like, at what level of total component and view library complexity it makes sense), what portion of cross-platform production would primitives (or other 'rn-everywhere’) probably encompass, and what the design-side workflow would be like. Do you have any advice or recommendations on where to start looking for answers? (We use React for web and React-native for mobile, so I am already sold on the idea at least of a unified library of primitives/rn-web/rn-everywhere.) P.S. I saw your response, and that sweet tweet just moments after the talk. Is that component library tooling shown in the video going to be published? I was asked to give a follow-up talk :wink: Also, do you guys plan to develop and grow this openly long-term (both react-sketchapp and react-primitives)? Sorry if it’s too many questions.