o‎ > ‎c‎ > ‎

x

Developer
  • Programming as craft

    Programming as craft

  • Veil is private browsing for the ultra-paranoid

    Veil is private browsing for the ultra-paranoid

  • Google’s Cloud IoT Core is now generally available

    Google’s Cloud IoT Core is now generally available

  • Browse more...

Airbnb
  • Roku’s reckoning, Snap’s huge CEO payout, Airbnb goes upscale and a big NYC acquisition

    Roku’s reckoning, Snap’s huge CEO payout, Airbnb goes upscale and a big NYC acquisition

  • Airbnb is rolling out a new tier aimed at higher-end travelers

    Airbnb is rolling out a new tier aimed at higher-end travelers

  • WeTravel builds a payment platform for small travel businesses

    WeTravel builds a payment platform for small travel businesses

  • Browse more...

react
  • Mixpanel analytics accidentally slurped up passwords

    Mixpanel analytics accidentally slurped up passwords

  • WordPress to ditch React library over Facebook patent clause risk

    WordPress to ditch React library over Facebook patent clause risk

  • Udacity’s latest Nanodegree will teach React

    Udacity’s latest Nanodegree will teach React

  • Browse more...

design
  • As ad dollars erode, tech investments point the way forward for networks

    As ad dollars erode, tech investments point the way forward for networks

  • Furniture maker Floyd raises $5.6m to expand product line, move into new Detroit HQ

    Furniture maker Floyd raises $5.6m to expand product line, move into new Detroit HQ

  • ‘Substitute Phone’ artfully satisfies your compulsion to swipe and scroll

    ‘Substitute Phone’ artfully satisfies your compulsion to swipe and scroll

  • Browse more...

computing
  • Nokia acquires Unium, a mesh WiFi startup that works with Google Fiber, as part of big home WiFi push

    Nokia acquires Unium, a mesh WiFi startup that works with Google Fiber, as part of big home WiFi push

  • Samsung’s Galaxy S9 wants to turn the camera into a new home screen

    Samsung’s Galaxy S9 wants to turn the camera into a new home screen

  • HMD/Nokia’s smartphones join Google’s Android One program ‘leading the charge’

    HMD/Nokia’s smartphones join Google’s Android One program ‘leading the charge’

  • Browse more...

Airbnb’s new open source library lets you design with React and render to Sketch

Posted Apr 25, 2017 by John Mannes (@JohnMannes)
  • 0

    SHARES
Next Story

A chat with Imzy co-founder Jessica Moreno on building a kinder online community

Today, Airbnb’s design team open sourced its internal library for writing React components that easily render directly to Sketch. Instead 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.

Everyday engineers and designers have the luxury of operating without design 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 Sketch templates, holding up development.

If you’re not familiar with design systems, they’re 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 and it would be obvious that two teams didn’t communicate when building the app experience.

  1. Screen Shot 2017-04-25 at 4.21.59 PM

  2. Screen Shot 2017-04-25 at 4.21.37 PM

 View Slideshow Previous Next Exit

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

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

The library is available over on GitHub. Though it was intentioned as a tool for reducing overall design and development time at Airbnb, a lot more is possible when engineers can interact with designs the same way they typically interact with code.

Featured Image: pressureUA/Getty Images
  • 0

    SHARES
Advertisement Advertisement

Crunchbase

  • Airbnb

    • Founded 2008
    • Overview Airbnb is a community marketplace for people to list, discover and book unique spaces around the world through mobile phones or the internet. Whether an apartment for a night, a castle for a week, or a villa for a month, Airbnb connects people to unique travel experiences at any price point, with [over 2M listings in 34K cities and 192 countries](https://www.airbnb.com/about/about-us). With a growing …
    • Location San Francisco, California
    • Categories Marketplace, Travel, Travel Accommodations, Sharing Economy, Hospitality
    • Website http://airbnb.com
    • Full profile for Airbnb
  • React

    • Description React is a JavaScript library for creating user interfaces by Facebook and Instagram.
    • Website https://code.facebook.com/projects/176988925806765/react/
    • Full profile for React

Newsletter Subscriptions

Latest Crunch Report

  • The Last Episode Of | Crunch Report

    The Last Episode Of | Crunch Report

Watch More Episodes
  • react
  • design
  • computing
  • Airbnb
  • Developer
  • Popular Posts

    #auto

    Subpages (1): n
    Comments