{"id":339305,"date":"2017-04-26T07:57:11","date_gmt":"2017-04-25T23:57:11","guid":{"rendered":"http:\/\/techcrunch.com\/?p=1481434"},"modified":"2017-04-26T07:57:11","modified_gmt":"2017-04-25T23:57:11","slug":"airbnbs-new-open-source-library-lets-you-design-with-react-and-render-to-sketch","status":"publish","type":"post","link":"https:\/\/people.utm.my\/asmawisham\/airbnbs-new-open-source-library-lets-you-design-with-react-and-render-to-sketch\/","title":{"rendered":"Airbnb\u2019s new open source library lets you design with React and render to Sketch"},"content":{"rendered":"

<\/p>\n

Today, Airbnb\u2019s design team open sourced its internal library<\/a> for writing React components that easily render directly to Sketch.\u00a0Instead of trying to get Sketch to export to code, the Airbnb team spent its time on the opposite \u2014 putting the paintbrush in the hands of the engineer.<\/p>\n

Everyday engineers and designers have the luxury of operating without\u00a0design systems, but large companies ignore them at their own peril. Airbnb, for one, has dumped a lot of resources into developing design components that can be applied across the company. But despite the requisite planning, Airbnb was still struggling to keep its iterative design system in sync with\u00a0Sketch templates, holding up development.<\/p>\n

If you\u2019re not familiar with design systems, they\u2019re the design DNA of any company that has multiple teams designing products. Imagine if the Airbnb team working on the listing page had no communication with the team working on the reviews feature. The result would be design amateur hour\u00a0and it would be obvious that two teams didn\u2019t communicate when building the app experience.<\/p>\n

\n
    \n
  1. \n
    \"\"<\/div>\n

    Screen Shot 2017-04-25 at 4.21.59 PM<\/h3>\n<\/li>\n
  2. \n
    \"\"<\/div>\n

    Screen Shot 2017-04-25 at 4.21.37 PM<\/h3>\n<\/li>\n<\/ol><\/div>\n

    For any product, whether it be Airbnb or Facebook, it\u2019s easy to see how a single new design rule could change the appearance of more things than you\u2019d be able to reasonably keep track of. If Sketch renderings could be updated instantly with only modifications to code, that bottleneck\u00a0can be lessened. This is where the React-Sketchapp library comes in.<\/p>\n

    \"\"<\/p>\n

    In the GIF above, Airbnb is implementing\u00a0its React-Sketchapp library to render variations of text in different languages, with the same design, using the\u00a0Google Translate API. The benefit of rooting all this work in React is that its a paradigm that most engineers are already familiar with.<\/p>\n

    The library is available over on GitHub<\/a>. Though it was intentioned as a tool for reducing overall\u00a0design and development time at Airbnb, a lot more is possible when engineers can interact with designs\u00a0the same way they typically interact with code.<\/p>\n

    Featured Image: pressureUA\/Getty Images<\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

    \"\" Today, Airbnb’s design team open sourced its internal library for writing React components that easily render directly to Sketch.\u00a0Instead of trying to get Sketch to export to code, the Airbnb team spent its time on the opposite — putting the paintbrush in the hands of the engineer.
    \nEveryday engineers and designers have the luxury of operating without\u00a0design systems, but large…     Read More<\/a><\/p>\n

    \n<\/img><\/a> <\/img><\/a> <\/img><\/a> <\/img><\/a> <\/img><\/a> <\/img><\/a>\n<\/div>\n

    \"\"\/ <\/p>\n","protected":false},"author":5817,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[25],"tags":[59,66,26],"class_list":["post-339305","post","type-post","status-publish","format-standard","hentry","category-technology","tag-media","tag-techcrunch","tag-technology"],"_links":{"self":[{"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/posts\/339305","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/users\/5817"}],"replies":[{"embeddable":true,"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/comments?post=339305"}],"version-history":[{"count":0,"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/posts\/339305\/revisions"}],"wp:attachment":[{"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/media?parent=339305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/categories?post=339305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/tags?post=339305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}