Sep 26, 2017

Why we use Framer at Kiwi.com

Have you ever designed a map? If the answer’s yes, then you know how painful the process is. I found this out when we decided to integrate a map with our search engine on the Kiwi.com landing page. The data indicated that a map would have massive potential, however, its implementation was a big challenge.

This challenge was one of the main reasons why I decided to adopt Framer for designing and prototyping. It’s a great tool that helps you create an interactive design and immediately transform it into code.

Framer’s Get started page is a great way to begin. You can also watch a workshop led by Jonas Treub which we organised at Kiwi.com. Today though, I want to share with you the reasons why we started using Framer at Kiwi.com.

#1 Designing a map

For a designer, working with a map is difficult because it changes all the time. One moment, you can see the whole world, then you zoom in to the desert in the United States, hover over some islands in the South Pacific and finally switch to a city in Spain. It all looks very different and for a designer, it’s important to keep the design looking good — Framer is very helpful with this.

#2 Working with input elements

Another reason we started using Framer was to prototype the input elements on our landing page. On the main Kiwi.com page, there were four input bars when we started working on the map a year ago. Framer was the only design tool that allowed me to prototype that.

# 3 One prototype, many devices

I use the iPhone SE, our CEO Oliver uses the iPhone 7 Plus while others use the iPhone 7 and Android. Working with Framer allows me to design one responsive prototype and share it with anyone in the company because it will adapt to any device.

# 4 Acceleration of the design process

Framer can speed up the design process by weeks or even months. I can easily verify if any prototype is functional in day or week cycles. This is crucial in a company where everything develops and changes so fast.

# 5 Helping our engineers

Using Framer is engineer-friendly, especially for those who hate iteration. It’s especially helpful to us here at Kiwi.com.

# 6 Working with data

You can work with live data in Framer. You just connect to the API, replace mockups with real data, press refresh a few times and you know how it will look when it’s live. That’s super important at Kiwi.com — believe it or not, we’re primarily a data-driven business. Flight data affects our designs a lot.

# 7 Major players use it

It’s always good to get inspiration from the “giants”. Google designers use Framer in a massive way, while Facebook designers use Framer combined with Origami and real coding. For me, this is a seal of quality.

# Bonus: Framer Community

The Framer community is great — in fact it adds a personal reason to start using the tool. Once you become a member, you’ll get incredible support from all around the world. You can find help on Twitter or join the general Framer group on Facebook. I’d also advise you to get in touch with your local Framer community.

From time to time, we organise Framer workshops. Make sure you subscribe to our mailing list so you don’t miss the next one.

What’s your experience with Framer? Let me know in the comments.

Search
Share
Featured articles
Generating SwiftUI snapshot tests with Swift macros
Don’t Fix Bad Data, Do This Instead