• Jon GoldJon Gold, 14 days ago

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

    27 points
    • Colin KeanyColin Keany, 14 days ago

      Nice work Jon and team! Really excited to try this out!

      1 point
    • Marc EdwardsMarc Edwards, 14 days ago

      Ace work. Generated design docs are definitely part of the future.

      0 points
    • , 14 days ago

      This could be a moonshot but is it feasible in near future to integrate it with framerjs?

      0 points
      • Jon GoldJon Gold, 13 days ago

        I don't see why not - you could generate a doc with React components and then import it to Framer… there's a name prop on every component that you could try using.

        2 points
    • Grant HarrisGrant Harris, 4 days ago

      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 )

      5 points
      • Louis-André LabadieLouis-André Labadie, 3 days ago

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

        0 points
        • Grant HarrisGrant Harris, 3 days ago

          What happens when a non-coder designer edits the components in sketch? Appears we'll have two separate sources of truth :(

          2 points
    • Jon MooreJon Moore, 13 days ago

      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.

      5 points
      • Chris SlowikChris Slowik, 13 days ago

        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.

        3 points
        • Jon MooreJon Moore, 13 days ago

          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.

          0 points
        • Jon GoldJon Gold, 13 days ago

          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:

          0 points
  • Pablo StanleyPablo Stanley, 1 month ago

    “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!

    9 points
  • Ollie BarkerOllie Barker, 1 month ago

    This is insanely cool.. I'm just struggling to see how I'd use this day to day

    6 points
  • Jonathan ShariatJonathan Shariat, 1 month ago

    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!

    2 points
  • Rhys MerrittRhys Merritt, 1 month ago

    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...

    2 points
    • Vikalp Gupta, 1 month ago

      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.

      1 point
    • Chris SlowikChris Slowik, 1 month ago

      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.

      1 point
    • Jon GoldJon Gold, 29 days ago

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

      2 points
      • Rhys MerrittRhys Merritt, 29 days ago

        Very inspiring to actually receive this kind of feedback from you Jon (as well as Chris & Vikalp). It is much appreciated.

        My colleague and I have decided that we are going to help each other learn React, and see how things go. She already has a lot of html / css experience, and I've got a bit of javascript experience - so it will be ok :)

        We are also getting one of the developers to give us a hand at seeing what your project does later today. Thanks!

        0 points
  • Linton Ye, 1 month ago

    Great stuff! Looks like it's something that could be integrated into the React Native course for designers. :)

    2 points
  • Brijesh BittuBrijesh Bittu, 1 month ago

    If someone wants to get started, I have created a boilerplate project here -


    1 point
  • Tim Kjær LangeTim Kjær Lange, 30 days ago

    Tried it out this morning. Changing a .js file and watching your Sketch file update automatically automagically feels great.

    1 point
    • Chris SlowikChris Slowik, 29 days ago

      I don't have time to play with it yet, but curious if updates made in sketch to components also update in the js.

      1 point
      • Tim Kjær LangeTim Kjær Lange, 29 days ago

        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?

        1 point
        • Jon GoldJon Gold, 5 days ago

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

          0 points
  • Tim Kjær LangeTim Kjær Lange, 1 month ago

    Been playing around with react-sketchapp today. 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?

    1 point
  • Brian ZaikBrian Zaik, 27 days ago

    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.

    1 point
  • Guido Slotboom, 1 month ago

    Nifty piece of work!

    0 points
  • Markus BerghMarkus Bergh, 1 month ago

    This will be fun to try!

    0 points
  • Adam Nelson, 1 month ago

    This is everything I've been dreaming of for years. If only our team used React instead of Angular 2.

    0 points