Recently, Mobify has begun working closely with external partners. Onboarding several new teams required us to create tools to pass along all the experience and knowledge we’ve acquired over years of building great mobile experiences. Part of that was introducing them to our component library.
Long before working with partners, Mobify has used a component-based approach, where the team collected the most common patterns and best practices. The original idea was that these tools would be a quick starting point that the team could use to begin new projects: the UI Kit was for the designers, and the SDK was for developers. But these tools weren’t closely related, and when partners were brought in, there was a realization that they needed to be refined for external use. And that job fell to me.
Turning to the design team, I first collected the issues they had with the kit. It was slow, and Sketch often crashed while using it; it was hard to find the component you were looking for as it was all collected in a massive list; and it wasn’t very easy to get started with, hard to customize and not very flexible.
In addition to all that, the UI Kit to be as agnostic as possible. We didn’t want our partners to go through heavy requirement flows, incur extra product costs, or to be left out in the rain when free plugins inevitably were abandoned. So I needed to rely on Sketch and it’s out-of-box features alone.
Making sure the components could be customized was important. The UI Kit was for partners to use to create their own designs, but it was not meant to be a prescriptive guide on how to do it. It was a tool, not a mold.
In that vein, I created “preset” pages where the designer could get a quick jump on making the design their own. These were chained to every Symbol in the file. Change one and that change is reflected everywhere.
I also standardized the fonts, colors, and layer styles to reflect the variables that the project would eventually be built with. In that, the designers would be building logical design systems and the presets could also serve as a style guide that the designer can pass onto their developers.
Having a library of Sketch symbols isn’t time saving if you spend forever hunting for the right symbol! And with the release of Sketch’s new features that allowed designers to switch symbols out, there was a real need to commit to a naming scheme.
Fortunately, that naming scheme already existed… in our SDK. Instead of coming up with names for the components myself, I cross-referenced the names used in the Developer SDK. By having the symbols and the components use the same name, the designs can become a true reference point for developers, showing them exactly which components to include in their build.
The rest was just categorization. Grouping similar symbols with similar uses and nesting their variants made it easy to find exactly what you’re looking for.
Mobile is not just a single screen size. Though Mobify designers usually focus on the smallest screen first—usually a iPhone SE—the symbols needed to be flexible enough for use on larger screens.
Tweaking and customizing each symbol, I made sure that the symbols stretched and shrunk while maintaining correct margins and padding.
The minute details of maintaining a Sketch file is not glamorous work. But the time and research invested is necessary to support your team, especially as it grows.
This Project is Live!
If you want to see Mobify UI Kit for yourself, the Sketch file is available for download on GitHub.