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)?
Painting with Code: Introducing our new open source library React Sketch.app
31–40 of 100 posts
Re: Painting with Code: Introducing our new open source library React Sketch.app
#32Earlier quoted context omitted.
Interesting. But, the monthly Adobe-esque subscription fee is a turn off.
That is of course something that can change. What kind of pricing would you prefer?
Any kind of one-time pricing would be great.
Ideally, with a perpetual license with 1-year of free upgrades.
Re: Painting with Code: Introducing our new open source library React Sketch.app
#33Earlier quoted context omitted.
Sounds intriguing, but I'm also a little confused about the flow of "code that generates sketch files"... what is the purpose of Sketch in all this? I would think programs like Sketch are useful in general because they give designers a nice way to design things without adding the extra layers of abstraction that code brings (i.e. they can just draw things with a mouse instead of writing instructions that tell the com…
To go the other way -- generating React code from Sketch -- you can use React Studio: https://reactstudio.com It has a Sketch plugin that does a rather competent job of converting Sketch layers/groups into components. (For example, you can prefix a Sketch group with "c:", and React Studio will interpret it as a component.) Here is a live video demonstrating the Sketch -> React Studio -> React code workflow: https://w…
It seems like the logical conclusion is to create a two-way data binding in a live-coding environment.
Re: Painting with Code: Introducing our new open source library React Sketch.app
#34Hi HN! Super excited to open source this — I'm trying my best to bring design & engineering closer together at Airbnb (and in the world), this has been a super useful project. I'll be hanging out in this thread all day if you have any questions / want to flame me :)
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 process, this is easy to work around. We generate documentation from code and structured comments, which allows us to trust our docs as an up-to-date point of truth.
If you're building a design system that both engineers and designers will work with, there's no real solution to keeping sketch symbols and React components in sync. You're essentially stuck maintaining "static documentation" for designers in the form of a sketch file.
More often than not, things get busy, or someone forgets to commit a change to the sketch file, and the sketch symbols fall behind the code used in production.
Developers start to receive mocks that don't match the "standard" components they're using. Designers start to wonder why fidelity is lost by the time features make it to production. The design system falls apart.
`sketch-reactapp` will help us deal with the static documentation problem the same way we deal with it on the engineering side of things: generate from source.
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.
Congratulations on the launch!
Re: Painting with Code: Introducing our new open source library React Sketch.app
#35Earlier quoted context omitted.
Ah, this makes sense (assuming this is what they're saying). So there would be one sketch file for the basic components that is generated from the React code, but the designers who design specific pages of the site (for example) would still design in sketch, but pull from the components of the one "read-only" (react-generated) sketch files. Very cool!
Exactly (and thanks to Andreas for explaining it better than me). We have a design systems team that creates & maintains the system (in collaboration with our product designers), resulting in read-only Sketch templates. when _designing with_ canonical components our product designers are using that template, so it's kind of the same workflow - we're just creating the read-only templates from code rather than by hand.
So your design systems team has to be able to code React components, or any change or new component has to be coded by a developer before being made available to your product designers?
If so, does is not lengthen and complicate a lot your design process?
Re: Painting with Code: Introducing our new open source library React Sketch.app
#36Earlier quoted context omitted.
How was React Sketch.app influenced by your blog post from June 2016: Declarative Design Tools ( http://www.jon.gold/2016/06/declarative-design-tools/ )?
So for context that was written whilst I was funemployed before joining Airbnb. - René etc is more conceptual - it’s obviously not a practical day-to-day tool - React Sketch.app solves the problems in our org that I can do something about, but also lets you do combinatorial/permutational exploration (see the GIFs in the intro!) because _it’s just javascript_. Both embrace the paradigm of UI-as-a-function-of-data, and…
Thanks for the link
Re: Painting with Code: Introducing our new open source library React Sketch.app
#37Sketch.app name similarity with SketchUp can be a source of some confusion.
Re: Painting with Code: Introducing our new open source library React Sketch.app
#38Earlier quoted context omitted.
That is of course something that can change. What kind of pricing would you prefer?
Any kind of one-time pricing would be great. Ideally, with a perpetual license with 1-year of free upgrades.
That seems definitely possible. I think what the team was worried about is sticker shock -- $19/month might translate to something in the region of $200-250 for the scheme you propose. Does that sound bearable?
Re: Painting with Code: Introducing our new open source library React Sketch.app
#39Do 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 start using the new updated sketch component
Re: Painting with Code: Introducing our new open source library React Sketch.app
#40Hi HN! Super excited to open source this — I'm trying my best to bring design & engineering closer together at Airbnb (and in the world), this has been a super useful project. I'll be hanging out in this thread all day if you have any questions / want to flame me :)
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 & 2), but the workflow feels weird. Maybe someone from AirBnB design can jump in and enlighten me.