how-we-handle-kiwi.com’s-design-system-with-figma

The mobile design team at Kiwi.com is tiny, there are only two of us. But there are around twenty people contributing to our designs in some way. Whether they’re commenting on our latest iterations, fixing copy, or designing cross platform features. Currently, our front end is designed in Sketch, as is Orbit, our design system. But since the mobile part of Orbit is visually different, we decided to try designing it in Figma and see how it works for us.

  • Why we built our mobile design system in Figma
  • How the latest update changed the way we work
  • How we’ve designed our design system (with examples)

A Sketch-oriented workflow relies on tools like Zeplin to handle handoffs, Abstract to cover version control, and Marvel to design static prototypes. But, from time to time, things get out of sync. Prototypes get stuck on the latest tested iterations, people forget to push commits to Abstract, maybe Zeplin hasn’t been updated with the latest approved visuals, or the PNGs embedded in Dropbox Paper are 3 weeks old. These tools are, by design, bound to get out of sync ?

Before I joined Kiwi.com, I was playing with the idea of trying Figma, but it was hard for me to get to it. I didn’t see much much value in using it, and the need to keep all the tools in sync just wasn’t there.

I was also put off by the browser/cloud approach to it. I liked that I could fire up Sketch whenever I wanted, and it’s a native mac app. And then it hit me, there’s no way around it—you either have everything in the cloud and it’s in sync 100% of the time, or you have things offline in desynchronized workflows. So, I tried working with Figma, just a little bit at first, and I liked it a lot.

Then I joined Kiwi.com last November. Vojta was the only one working there on mobile at the time. He was covering all the platforms and all the devices by himself ?. While he was doing a great job, his work lacked a consistent system behind it.

We wanted to try it, but betting on Figma without the whole team, and designing Orbit in it, seemed like a bad call. It wasn’t very clear what direction the Figma team would be heading in, and what they would focus on. Additionally, some of the features just weren’t quite ready. And yet, we decided to try it anyways, but with mobile only. Our front end and Orbit are still designed and maintained in Sketch.

Until recently, managing components was a pain. It lacked the features to make the design system scalable. If you wanted to work with a DS efficiently, you were limited to a single file.

Fortunately Figma introduced a huge 3.0 update. I won’t go into much detail here (just follow the link), but basically the update:

  • Made enabling, disabling, and managing updates easy
  • Enabled users to share components with overrides across files
  • Enabled users to share different styles for layers (which makes it more atomic than Sketch, as it enables you to combine text styles with colors and effects).
    Our Design Library Component Principles

Whenever we design a new library component, or any other addition to the design system, we try to follow a couple of UX principles. Which should ensure the library remains consistent, efficient, and easy to work with.

Working with components and nesting them seems pretty powerful at first. Buwt as you know, with great power comes great responsibility. It’s very easy to go overboard and over engineer your design system. I’ve found that going about 2 levels deep provides the best balance of usability and possibility.

The term hit box comes from FPS games, it is an area which you need to hit, in order to do damage to your opponents. In our case, it is an area you need to double click, in order to edit or select the layer. Sometimes ordering the layers is enough, other times you might need to make things bigger. Either way you need to make it easy to work with 🙂

Component override suggestions are based on the size of the components. So, when you want to replace a component with something else, and you want to select it from the suggestions window, it needs to be the same size.

It really helps to define a separate file, which contains all the small things which we use to structure the design files. We’ve created a file called Helpers. It helps to distinguish components visually and gives your canvas a sense of structure. We do this because we share these files with everyone in the company, even with non-designers, and they often need some visual helpers to navigate the documents.

We wrap all of our components in groups. This way they don’t clutter the sidebar in the file components library. This makes working with page with lots of components far easier. This is something I miss in Sketch quite a lot.

When working with photos or any other bitmaps in our designs, we work with them as we would if they would be web assets.

  • We optimise the images: with tools like ImageOptim, Optimage, tinyPNG and such. I’m not sure, if Figma does any optimisation, but we do it anyways.
  • We optimise the file format: PNGs for simple illustrations and JPEGs for photos.
  • We resize the assets: We generally don’t need a billboard sized photos in our mockups.

Following this practice improves the download time of our files and library components. It also makes reopening files less of a hassle.

I’ve recreated the following examples so you can easily use them yourself. Just copy them, and feel free to adapt them to your workflow.

One file per project or flow. We have files like place picker, date picker, search and similar. But this also has its own problems, since you cannot connect two files and create a prototype from them. But still, this is the best solution management wise.

We use pages as different versions of the project with a standard X.Y naming convention. X represents huge version updates, while Y smaller iterations. With the latest iteration on top. And components page, hosting component candidates which we consider moving to the main UI library.

It might seem like a little thing, but navigating through Figma can be a pain when you have lots of files and projects. File titles work, but it is hard to scan them fast. That is why we use cover images.

Only the mobile team is using Figma at the moment, but that might change in the future. So we had to set up the files in a way which supports both mobile and front end libraries.

Helpers source file

I mentioned this a bit earlier. It only has a couple components which are used to help our team structure and navigate files. We use Page, category, and section to distinguish between different components, comments are there for anyone not using Figma directly, and the color sample is for our token library.

This file is rarely touched. It contains the most atomic components of the entire design system. The file has three pages: colors, typography, and shadows. Basically everything you can define in Figma Libraries, except for components.

Tokens source file

This file is very rarely touched. We’ve already defined the colors we use.

Typography source file

Typography is the same as colors. We’ve already defined everything we need in our design system (it is missing some FE font style definitions), and thus is rarely touched. The typography defined above seems rather simple, but when combined with other shared styles, it’s everything we need on mobile.

Shadows source file

Shadows are something we’re still experimenting with, but so far we’ve defined 4 elevation levels, and this seems to work well for us.

Shadows source file

Icons have their own page, they are all split into different sections, and are placed in 24×24 frames. Almost all the icons are standard Material Design Icons.

Illustrations are very similar to icons. It’s just a huge canvas full of our product illustrations. They all share the same size. But due to some import limitations of SVG to Figma, we have to work with bitmaps for now.

Orbit for Mobile source file

Initially we had two different mobile libraries for iOS and Android. But since they overlap a lot, we’ve decided to combine them. It’s easier for us to maintain it this way. But differences in the presentation of some of the UI elements still remain, for example switches and such. This is still a work in progress, and we need to catch up with Android a little bit ?

While Figma lacked in features before the 3.0 release, most of my must-haves have been added, and it became a serious competitor to other tools. Building a design system with it proved to be relatively easy. Actually I feel like managing it in Figma is far easier than in other tools. It is by no means perfect, but it fits my taste the most.

The way we structure our files and split the design system logic is constantly evolving with every update, but the things mentioned in this post have stuck with us the longest and proven really effective.

In the upcoming post I would like to cover how to actually build a design system in Figma, some of the gotchas behind working with nested components, and some other tips. If this is something right up your alley, the safest way to know about it once it’s out is to smash the sub button below ?

44 comments

  1. Attractive section of content. I just stumbled upon your weblog and in accession capital to say that I
    get in fact loved account your blog posts. Anyway I’ll be subscribing on your augment
    or even I success you get entry to constantly quickly.

  2. I do not know if it’s just me or if perhaps everybody else experiencing issues with your site.
    It appears as if some of the text in your posts are running
    off the screen. Can someone else please provide feedback and let me know if this
    is happening to them too? This might be a issue with my internet browser because I’ve had this happen previously.
    Many thanks

  3. Thank you for sharing your thoughts. I really appreciate your efforts and I am waiting for your next write ups thank you once again.

  4. Howdy! I could have sworn I’ve been to this website before but after reading
    through some of the post I realized it’s new to me. Anyhow, I’m definitely delighted I found
    it and I’ll be bookmarking and checking back often!

  5. You really make it seem so easy with your presentation but I find
    this topic to be really something which I think I would never understand.
    It seems too complicated and extremely broad for me.
    I am looking forward for your next post, I’ll try to get the hang of
    it!

  6. I blog often and I really appreciate your content.
    This great article has really peaked my interest.
    I’m going to take a note of your blog and keep checking for
    new information about once per week. I subscribed to your Feed too.

  7. After checking out a number of the blog articles on your blog,
    I truly like your way of writing a blog. I saved it to
    my bookmark webpage list and will be checking back soon. Take a look at my
    web site too and let me know your opinion.

  8. I pay a visit day-to-day some websites and information sites to read articles or reviews, however this webpage presents quality based content.

  9. This site really has all the information and facts I wanted concerning this subject and
    didn’t know who to ask.

  10. Hi there, I found your web site by way of Google at the same time as searching for a comparable subject,
    your web site got here up, it appears to be like great. I
    have bookmarked it in my google bookmarks.
    Hi there, just changed into aware of your blog via Google, and found that it is truly informative.
    I’m gonna be careful for brussels. I’ll appreciate if
    you proceed this {in future}. Many other folks will probably be benefited out of
    your writing. Cheers!

  11. This design is wicked! You certainly know how to keep a reader amused.
    Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Fantastic job.
    I really loved what you had to say, and more than that, how
    you presented it. Too cool!

  12. It’s really very complex in this busy life to listen news on TV, thus I only use internet for that
    reason, and obtain the most recent news.

  13. These are in fact fantastic ideas in about blogging. You have touched
    some pleasant factors here. Any way keep up wrinting.

  14. Hmm is anyone else experiencing problems with the images on this blog loading?
    I’m trying to figure out if its a problem on my end or if it’s the blog.
    Any suggestions would be greatly appreciated.

  15. What i don’t realize is in truth how you are no longer really much more well-favored than you may be right now.
    You’re so intelligent. You already know thus considerably in relation to this subject, produced me for my part consider it from so
    many varied angles. Its like men and women are not interested unless it is something to accomplish with Girl gaga!
    Your personal stuffs outstanding. At all times take care of it
    up!

  16. Yoou are so awesome! І don’t think I’vе read thrlugh anything like that
    before. So great to ɗіscove someone with original thoughts on this topіc.
    Really.. many thanks ffor ѕtarting this up. This site is
    something that’ѕ neeɗed on the web, someone with a little originality!

    my blog post :: Infonya disini

  17. Нello i am kavin, its my first time to commentiing anypⅼace, when i reаd this
    аrticle i thought i ⅽould also make comment ddue
    tto this gοod post.

    Feel free to surf to my webpage: gemarbet

  18. It is appropriate time to make some plans for the long run and it is time to be happy.
    I’ve learn this put up and if I could I wish to suggest you few attention-grabbing issues or tips.
    Maybe you can write next articles referring to this article.
    I wish to read more issues approximately it!

  19. I’ve been surfing on-line more than 3 hours lately, yet I never found
    any fascinating article like yours. It’s pretty worth sufficient
    for me. Personally, if all web owners and bloggers made excellent content material as you did, the web will probably
    be a lot more helpful than ever before.

  20. Doеs your blog hаve a contact paցe? I’m having a tough time lоcating it but,
    I’d like to send you ann email. I’ve got some recommendations for your Ƅlog you might be interested
    in heaгing. Either way, great blog and I look forward
    to seеing it improve over time.

    Feel free to visit my bloց post :: top1 toto

  21. natսrally ⅼike your web-site but you need to take a ⅼook at the sⲣelling on seᴠeeral of your
    ⲣosts. Many of them are rife with spelling problems and
    I find it very botһersome to inform thee truth on the other hand I wіll surely
    сome again again.

  22. Hello there, I found your website bandar poker deposit via pulsa Google while searching for a similar topic, your website
    got here up, it appears great. I have bookmarked it in my google bookmarks.

    Hi there, just turned into alert to your weblog via Google, and
    located that it is truly informative. I am going to
    watch out for brussels. I’ll appreciate when you continue this in future.

    A lot of other folks might be benefited out of your writing.
    Cheers!

  23. Maү I simply saʏy ᴡһat a comfort to uncоver ѕomeƅody who reɑlly undеrѕtands what they’re disсussіng on the net.
    You definitely understand hoᴡ to bring an іssue
    to light and make iit important. Moree people really need to check this out and undeгstand this siɗe ⲟff your story.
    I can’t believe үou aren’t mre рopular beϲauѕe you most certainly possess the gift. https://itsmyhost.info/user/profile/388297

  24. Gгeetings from Florida! I’m bored to death at ᴡork so I decіded to
    browse your site on my іphone during lunch break.
    I love thе knowledge you provide hesre andd can’t wait to take a look when I
    get home. I’m shocked at how fast yoᥙr blog loɑded on myy cell phone ..

    I’m not even ᥙsing WIFI, justt 3G .. Anyhow, awesome ѕite! https://camiworld.info/user/profile/216348

  25. I blog often and I really thank you for your content.
    This article has really peaked my interest. I am going to bookmark your site and keep
    checking for new information about once a week. I subscribed to your RSS feed as well.

Leave a Reply

Your email address will not be published.