From Sketch to Xcode and Android Studio

Spread the colors ❤️

Managing color schemes has always been difficult for me, even an overly organized guy. Everything has a dedicated place at home, my desk is always clean, my desktop is always empty (the Stack feature on MacOS is really useless for me)… But somehow, organizing colors on a Design System has always been difficult.

Being on the product side, I had no other choice but organizing this part properly. My co-workers and I are taking care of 3 main products, for iOS, Android and the web. So being properly organized has never been so important.

Colors always mean something for your users and being consistent is really important.

Apple and Google are now officially introducing dark mode, so as designer you need to get ready for it. If your colors are not properly organized or named or if you don’t really know when to use them, you’re losing consistency and it’s going to be a nightmare for your developers.

Naming your colors

I’m still a noob in iOS development and I’m reading a lot everyday for me to find my own way. Yesterday, I’ve read this excellent article from NS Hipster about getting ready for the iOS 13 dark mode.

Something really hooked me up about naming your colors in a semantic way and I never really thought about this until today. By the way, I found it pretty funny to find this on a developer blog and not on a designer one…

So what are Semantic Colors? Apple organized iOS colors in such a way that it helps developers to know immediately what color to use. So you have:

  • Label Colors
    • label
    • secondaryLabel
    • tertiaryLabel
  • Text Colors
    • placeholderText
  • etc…

But what about Android?

Good for you, there is no real pattern or naming convention on Android (maybe I’m wrong, please let me know on Twitter, but I didn’t find anything) and you can do whatever you want.

Organizing Sketch

I’m not going to tell you how to create styles or library for color usage in Sketch, it’s not the purpose of this post, and you can find thousand of articles about this. Instead, I want to show how I work:

Because I’m an organized psychopath, my Sketch files are most of the time split up in dedicated pages (yes I’m even using them to create sections):

Before, when I started my dark mode colors iterations, I used to do it in this way:

But when I discovered the Apple iOS sketch library file, I just adopted their way to do it (I think it looks better):

From Sketch to Xcode…

Some people know already, I’m currently working on my own app, designed and developed by myself and I want it to be dark-mode ready. Because I hate wasting my time (I’ve the kind of Whiterose’s mindset to be honest) and I knew both Sketch and Xcode are working with XML files, I thought maybe someone has created something for that. And yes, someone did! It’s called xPal, and it’s a really amazing tool for iOS design and development.

Please watch this small video to know how to use it:

…and Android Studio

There is no Assets catalog on Android Studio (WTF Google??), so now way for you to automized this process. But, something can help you to stay consistent: yes it’s Zeplin.

Zeplin has introduced a new feature called Styleguides, allowing you to have colors scheme ready to use for development. This feature is a couple of months old and appeared after Apple and Google introduced dark mode. I still don’t understand why they haven't anticipated this… and I told them. Meanwhile, you have to use suffix into your color names.

If you’re not using yet the XML Extension on Zeplin, please install it, and you’ll see the magic happening on your Zeplin sidebar:

And voilà!

Now you “just” need to stay consistent, keep the team you’re working with updated, and spread the love for colors!

If you have any remark about this article, feel free to reach me on Twitter. ☺️

credit picture