Hey DN, excited to share this with y'all!
Lmk if you have feedback / suggestions / don't get it / want to be mean to me :)
Nice work Jon and team! Really excited to try this out!
Ace work. Generated design docs are definitely part of the future.
This could be a moonshot but is it feasible in near future to integrate it with framerjs?
I don't see why not - you could generate a doc with React components and then import it to Framer… there's a
nameprop on every component that you could try using.
My only question is, why use sketch at this point? If you're designing with code anyways why not just use something like storybook? (I apologize if I missed something :D )
With this method, your code can "hand off" a Sketch file to you!
Not all designers will be coders as well, so it's a big enabler for freeform iteration :)
What happens when a non-coder designer edits the components in sketch? Appears we'll have two separate sources of truth :(
Really inspiring work, Jon! Design-code parity has been a long time coming, and it's awesome that Airbnb's team of Design Technologists has decided to tackle it.
One big question: At this point, who owns [initial] design? Seems to me there are two potential workflows:
- Sketch (initial design)→React (component-ize)→Sketch (production design)
- React (initial design)→Sketch (production design)
There are, of course, lots of talented developers who have a penchant for design. I think they could do great work just designing in code.
But a lot of developers don't. I get that creeping fear that we're going to come full circle where developers are driving design like they were in the late 90s and early 2000s.
Don't let this detract from what you've created! It's truly brilliant. Just curious how you see the design process now.
When I saw this, the first thing I thought of was large orgs like Uber etc, who have established design systems. They certainly have extensive need for production work, generating elements within that ruleset.
On the other hand, there needs to be flexibility for the designer to decide how to interpret the rules for new scenarios or new features.
I would say your first workflow is the most realistic.
That's my thinking too, Chris. It's a really amazing tool they've created. I pretty sure Facebook and Twitter have developed internal tools for Sketch↔︎Code synchronization. With Sketch 43, I imagine we'll be seeing a bunch of new tools come out.
Indeed - this came from our internal workflow + conversations with friends at other orgs of our scale.
workflow 1) sounds most accurate, for now :thinking_face:
“Should designers code?” I think this answers that question.
Thanks for sharing this, guys. Super excited to see how we can use it on our product!
Thanks for bringing that up :p
This is insanely cool.. I'm just struggling to see how I'd use this day to day
We need more of this. Its often I feel like design work is recreating systems that should be defined in the tool and be equal with some exported code.
I hope this continues to develop!
I'll be honest - reading this post left me feeling pretty hopeless. The extent of my coding abilities is using FramerJS. I don't know React, and when I look at it, it seems intimidating.
I often read comments from other designers who seem to just 'get it' when this stuff comes up. I feel lost - and it worries me. Even if I knew React, I still don't fully understand what this new tool does...
The blog doesn't seem self-explanatory to be honest, though you can go through Hacker News Thread where others have explained it beautifully.
I'm waiting for the time when there would be such discussions in these threads.
I tried, I'm not good at writing :(
I wouldn't put too much time into worrying about it, really. React is not a core design skill. It's just one tool, and not necessary for being a successful designer.
please don't let this dissuade you - coding is one tool out of many, and selection bias will not help you in this situation (of course other designers who sway towards the technical side of things will be more vocal in threads like these!).
if you do enjoy coding but don't get this thing in particular - that's fine too. some of us have been doing this for a while (and are immersed by it every day at work), I hope it's more inspiring than dissuading (recently there was a time when no designers used React :))
Very inspiring to actually receive this kind of feedback from you Jon (as well as Chris & Vikalp). It is much appreciated.
We are also getting one of the developers to give us a hand at seeing what your project does later today. Thanks!
Great stuff! Looks like it's something that could be integrated into the React Native course for designers. :)
If someone wants to get started, I have created a boilerplate project here -
Tried it out this morning. Changing a .js file and watching your Sketch file update
automaticallyautomagically feels great.
I don't have time to play with it yet, but curious if updates made in sketch to components also update in the js.
From the FAQ:
Is there two-way binding? Can I generate React components from Sketch? Nope.
I see some issues with Sketch to React sync. What if you're mass generating e.g. buttons and you're only editing one instance of the button, what would happen in your script?
exactly. we might be able to figure it out eventually but that seems like a whole new level — we're focused rn on things we can get working reliably in production rather than a demo :)
Been playing around with
react-sketchapptoday. It's really cool.
One question: does the API support the notion of a Symbol in Sketch? Can I wrap the Views I render in Symbols?
Thanks Jon and team for sharing this with the world. I think this could be a huge step forward for designers and engineers alike. Very exciting.
Nifty piece of work!
This will be fun to try!
This is everything I've been dreaming of for years. If only our team used React instead of Angular 2.