How ChibiStudio helps anime fans express their creativity

You might know developer Guilherme Rambo for his work as a vigilante, cracking down on Apple’s secrets and helping them fix security vulnerabilities in macOS, iOS, and other operating systems through their bug bounty program.

But back in 2016, Guilherme was unemployed and searching for a project he could take on with illustrator Ewerton Lima. They knew they had the right mix of skillsets to make something great, they just weren’t sure what. But this time, Apple came to Guilherme’s rescue with the announcement of the App Store for iMessage at the WWDC that same year.

“One of the demos they showed was an iMessage app where users could assemble an ice cream cone together by combining different toppings. That’s when I had the idea to do something similar, but with chibis instead of ice cream,” Guilherme explains.

And Ewerton was immediately on board. “I’ve always enjoyed drawing, so the idea of creating assets that other people would be able to combine in different ways to make creations of their own was enticing.”

That’s how ChibiStudio came to be, a character creation app geared toward fans of anime and chibi art. You can express your creativity by making different avatars from a large variety of items such as shoes and hairstyles — all without needing to be good at drawing!

If you know your Apple history, you probably know the iMessage App Store flopped, but it didn’t take ChibiStudio down with it. Thankfully, the iOS version of the app found its niche, and we’re here to tell its story.

The making of ChibiStudio

For Ewerton, ideas start right in Sketch. “[I’ll start] using mostly just the vector tool, with some primitive shapes here and there. This is possible because the drawings are all from a flat front-facing angle, so drawing them directly within Sketch can be done very efficiently,” he explains.

But what makes his ChibiStudio workflow different from other projects is the emphasis he needs to put in structuring and organizing documents. Because he’s working with customizable avatars, he needs to pay close attention to how he sorts the different items users will try out.

To keep things organized, he’ll create a new Sketch project for each item pack. He’ll then use layer groups to contain individual items and use naming conventions like hair-1, hair-2, shoes-1, shoes-2. He’ll also organize the items by fill color since they’ll later become color slots that users can customize in the app.

Like Ewerton, Guilherme had also been using Sketch for a long time to design user interfaces and websites. He knew it had great support for SVG, which is the backbone of ChibiStudio. “We wanted to give users as much freedom as possible when creating in the app, and we also wanted to future-proof our assets for higher-resolution screens and media, so the idea since the beginning was to ship vector-based assets with the app.”

To accomplish this, he created a plugin that exports all of the layer groups in a document to individual SVG files and names them according to the group. He also uses an internal Mac app tool to assemble item packs and edit some of the metadata to include which color slots the user can edit in the app.

For optimal performance and cost-effectiveness, they use the internal tool to convert the SVGs into Core Animation layers, a technology native to Apple’s platforms. Once the pack has been created, this tool compiles the pack into an asset catalog that’s shipped with the app.

“This workflow allows us to preserve all vector data, starting with Sketch, going through SVG, all the way to the app running on an iPhone where they become Core Animation layers. That way the app runs very efficiently, but we keep all the benefits of using vector assets, including the ability for users to customize the colors of individual parts of items,” explains Guilherme.

Doing right by the user

Of course, nailing the dream workflow wasn’t done overnight. The ChibiStudio duo first had to work through a number of challenges. “For me at least, it’s considering how each individual item will integrate with the other items. We have a dozen item packs and thousands of items in total, but it all must fit together like a puzzle. There can’t be any weird clipping or overlapping,” says Ewerton.

One of his goals is making sure he’s carefully assigning the position for each item in a layer. This way, when a user adds an item to their character, it’ll show up exactly where the user expects it to go in relation to other items. While users can customize the position in the app, the default has to make sense.

They also struggled with making user interface decisions for the app’s canvas. “We have lots of features and ideas, but we don’t want to make the app too complicated for those who just want to pick a few items and have a nice avatar done in a couple of minutes.”

But they found another challenge on the flip side of simplicity: feature discoverability. For example, users were always able to tap items on their chibi to select and customize them, but many didn’t realize that they could. ”As a compromise, we ended up introducing a toolbar that gives access to many of the features that were previously hidden behind gestures or menus.”

Idea, meet Development

In an effort to offer the best experience possible, the ChibiStudio team is centered on creating smooth interactions, cool features, and plenty of avatar items to choose from. But what about performance?

“As a developer, wrangling the amount of data that the app has to deal with has always been a challenge. I didn’t want to make users wait for assets to download after they purchase a new pack in the app, so since version 1.0 and to this day we ship all inventory with the app that the user downloads from the App Store,” explains Guilherme.

Guilherme relies on a combination of traditional techniques like data compression and tricks such as not encoding certain pieces of metadata that can be inferred in some other way at runtime. You can also read about how they created an App Clip that allows users to try out the app’s main experience of creating a character without having to download and install the full app in Guilherme’s blog.

Reaping the rewards

While economic success is often what app creators are after, there can be a lot more to gain than just financial freedom.

“I’ve always been very self-conscious about my work, so I’m always looking for external validation. So when we get feedback from users on how ChibiStudio has helped them develop their characters and exercise their imagination, it’s when I feel proud of the work we’ve been doing,” says Ewerton.

“As the Sketch team probably knows, there’s something quite special about working with a creation tool. We create the artwork and develop the features with certain ideas and use cases in mind, but our users always surprise us with what they come up with,” explains Guilherme. “One of my favorite things is how we learned about some teachers in the US who were using ChibiStudio in class, having their students create depictions of historical characters as chibis to use in their presentations.”

Guilherme and Ewerton have come a long way since 2016 with ChibiStudio, and we’re proud of the work they’ve created with Sketch. If you’re looking to start your own project soon, Guilherme’s advice is always to keep it simple. “That’s so you can maintain the workflow for the foreseeable future, or at least while it’s working out for you. Trying to be fancy usually ends up resulting in an unmanageable workflow that you start to diverge from.”

ChibiStudio is available for iOS. You can also follow them on Twitter and Instagram to stay up to date with all the kawaii cuteness they’ll have in store.