How Uses Framer X To Design with DataHow Uses Framer X

In this video case study, the design team shares how they use the Team Store to design with data and work with development.


Ashanya Indralingam

July 25, 2019 is entering a transformational phase. The data-driven travel platform is exploring new products and features at an accelerated pace, and they’re discovering it’s impossible to leave A/B testing to the last stage. With over 29 million listings covering 227 countries, data is at the center of everything. And as the 17,500-person company expands into experience-based and transportation products, leadership is looking to invest in a scalable design solution.


As design leaders at have found, data and content need to be considered during the design phase, ideally well before any development costs have been incurred. But for this, they needed a robust design tool that would enable product teams to easily design with data, while still ensuring parity with development, and consistency across their global organization.


Design standardization

With Framer X, any designer, across teams and timezones, can download, drag and drop in the same brand components from’s own design system. Hosted as packages in the Framer X Team Store, the ease of accessing prebuilt components helps ensure standardized design output across all products.

Having one place to access pre-approved components, which are also connected to your production components, provides designers with a solid foundation. So you’re not spending time redoing UI elements or wondering if you’re using the latest version, but actually designing with data or expressing your most creative ideas.

Duncan Crozier, Senior UX Designer

Use real data

Framer X also makes it easy for designers to easily utilize real data in their designs by connecting components directly to the Booking API. Whether its designing with maps, pulling in local hotel listings during user testing or validating UX copy on the fly, every product person at, (regardless of technical ability) is empowered to use data in their everyday work.

Before Framer X, I would have to use plugins to fill my designs with data, but it wasn’t dynamic and not really close to real life. With Framer X, I can easily connect to our API and use components with native interactions baked in.

Miranda Slayter, Senior UX Designer

Bridge between design and development

By utilizing Framer Bridge, developers can also import production components into Framer X and automate updating, ensuring everyone is always working off a single source of truth.

By using Framer X and using React components to lay out our designs, collaboration between designers and developers has been closer than ever. Simply because designers start to think more about APIs, constraints and states when designing. It really helps speaking the same language.

Eduardo Shiota, Senior Engineer


Founded in 1996 in Amsterdam, has grown from a small Dutch startup to one of the world’s leading digital travel companies. With a mission to empower people to experience the world, seamlessly connects millions of travelers with memorable experiences, convenient transportation options, and incredible places to stay—from homes to hotels and so much more. The company is made up of a diverse community of employees, all connected by a love of travel and a passion for innovation.

  • Servicing 43 languages
  • Offering 29 million listings across 227 countries
  • Over 1.5 million room nights booked daily
  • 17,000 employees across 200+ global offices

Featured Team

  • Erin Weigel (Principal Designer)
  • Duncan Crozier (Senior Designer)
  • Miranda Slayter (Senior UX Designer)
  • Melody David (Senior UX Copywriter)
  • Eduardo Shiota (Senior Front End Developer)
  • Michel Elings (Principal Product Manager)
Try Framer

Collaborate as a team.

Get started today

Like this article? Spread the word.

Sign up for our newsletter

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.