Live data from Hacker News

Painting with Code: Introducing our new open source library React Sketch.app

airbnb.design

41–50 of 100 posts

Re: Painting with Code: Introducing our new open source library React Sketch.app

#41
post #31

Would it be possible to use this on the server to create complicated PDF files for download (react -> sketch -> pdf), without using something like this current process (react dom -> html, css -> phantomjs -> pdf)?

Yeah sure - the caveat is that you have to run it on OSX rather than Linux. We have a bunch of Mac Pros & Mac Minis laying around the office doing CI funtimes.

I also hear whisperings of a react-pdf renderer but I haven't seen it

Re: Painting with Code: Introducing our new open source library React Sketch.app

#43
post #39

Do I understand the use-case correctly ? : 1) Create designs in sketch (mainly core components) 2) Code those designs in React that will generate the React translated version of the sketch 3) Use the react generated sketch to build non-core component designs in sketch . . 4) When the core design changes, update the react component to match the new designs 5) All the other components in the sketch will automatically s…

This is how I understood it as well

Re: Painting with Code: Introducing our new open source library React Sketch.app

#46

Earlier quoted context omitted.

To help clarify why this is a big deal, I'd like to share why I've been so excited about this project... [tl;dr] - This is the first tool I'm aware of that actually allows you to generate both API docs and design tools from the same source. Static documentation is a lie waiting to happen. Once docs are even slightly out of date, people lose trust and eventually abandon them. On the engineering side of the dev/design…

That seems like it has some value for super large teams. I guess the thing I'm having a hard time wrapping my head around is the workflow for a tool like this. My current understanding is that you'd need: 1.) Design your thing in Sketch 2.) Code your thing in a text editor 3.) Port your code over to this new tool to see it rendered in Sketch? Like I said. There's some value there (accounting for the changes between 1…

Yeah this confused me as well, but some other comments here clarify the situation: there's one sketch file that is the "design system" (containing the "components"), then a bunch of other sketch files for the actual pages of the site or screens of the app... it's only this "components" file that is generated from code. Sketch is used for the design of the pages/screens/etc, but they are pulling the components from the "design system" file.

As with most misunderstandings/disagreements/arguments in the programming world, this confusion arises from people in different contexts using a tool for one purpose, but not realizing that other people are in different situations trying to achieve different goals with those same tools.

(Specifically, if you are an agency or freelance designer/developer, and you are building a bunch of different sites, then this tool does not serve any useful purpose... but if you have an underlying "design system" and a large company with lots of different products all sharing the same basic design, and a large team to go with it,then this starts to make a lot more sense.)

Re: Painting with Code: Introducing our new open source library React Sketch.app

#47
post #39

Do I understand the use-case correctly ? : 1) Create designs in sketch (mainly core components) 2) Code those designs in React that will generate the React translated version of the sketch 3) Use the react generated sketch to build non-core component designs in sketch . . 4) When the core design changes, update the react component to match the new designs 5) All the other components in the sketch will automatically s…

This is how I'm starting to understand it as well but it took a lot of reading comments here and in Designer News to get there.

Re: Painting with Code: Introducing our new open source library React Sketch.app

#50

What is a "Sketch document"? I didn't see a link or explanation in that page.

Sketch is vector based design tool for designing UI and Sketch document is the format that it uses to save those designs. https://www.sketchapp.com/
Post reply on HN