Developer mode
Opens components on the React tab by default.
Your bookmarks

Working with Figma

Learn how to work with Figma, structure your design files, and collaborate on deliverables.

Figma is where all of our design can happen collaboratively in one place. Instead of different tools in different domains, everyone can take advantage of a unified process to focus on creating the best experiences.

All of it is focused on the principle of designing first for native mobile implementations. From this seed, all of the other designs will grow.

We’ve broken the process down into various parts so you can focus on what you need to know. Get started by logging into Figma and finding your team.

If you run into any issues, the slack channel #plz-figma is your one-stop answer shop.

Logging in

To get going, log into Figma using Okta. The easiest way is to click the Figma logo from the Okta dashboard.

If you don’t see the logo, you can request access in #plz-access and tag @will.

You can also log in directly with Figma.

  1. Go to figma.com.
  2. Click Log in at the top of the page.
  3. Choose Log in with SAML SSO.
  4. Enter your Kiwi.com address and click Log in.
  5. Enter your Okta details as necessary.

Now you’re inside the Kiwi.com organization. Anyone with a Kiwi.com email address is automatically a member of the organization and can view all designs. Now you need to find the designs relevant to you.

Joining teams

If you’ve never logged into Figma before, you’ll find an overview of the teams available to you within the Kiwi.com organization.

Teams are the top-level organizational unit within Figma and are created based on domains, such as the Kiwi.com Mobile and Desktop teams. Anyone with a Kiwi.com email address can join any team they like and view and comment on all designs within it. So join the teams with designs you’re interested in.

Why are mobile and desktop split into two teams?

At first glance, it might seem confusing that we’ve split the Kiwi.com organization into separate teams for mobile and desktop designs. After all, one of the aims of collecting everything into a single-source of truth based on a single design system is to have a coherent experience. So why’d we do it?

  • To promote a native mobile-first approach
    All designs should start out working for small screens. The base viewport for all designs should be 360×640 (see the Mobile Experience Guidelines for more on why).

    Once everything works there, it can be adjusted to work for responsive needs and even scaled up to work also on the largest desktop screens. But the focus should always be on first optimizing the native mobile design.
  • To save time
    When we have separate teams, we can load only those libraries that are needed within the team. So for example, the mobile designs will load only mobile components and not get bloated down with unrelated desktop designs. This will ensure the files load quickly and you can get to work on the relevant designs.

Linking designs

To facilitate navigating between mobile and desktop designs, we’ve created a Link component in the Helpers library, which is automatically included in each team. That way, you can add a link to any other versions of the design to make them easy to compare.

With the component, you can insert links using comments. This is a temporary solution until Figma introduces links directly in designs.

In contrast, native mobile and responsive designs are joined into a single team as we aim for similar flows for these two touchpoints. Each file will contain the mobile designs with any specific changes for responsive designs noted.