How we integrate Tunggal Design System into our apps

You might be wondering, what is a Design System?

Design language or design systems is more than just ui styles guides is also the way the team works and what are the team values & principles.

Photo by Balázs Kétyi on Unsplash

From typography, layouts and grids, colors, icons, components and coding conventions, to voice and tone, style-guide, documentation, a design system is bringing all of these together in a way that allows your entire team to learn, build, and grow together.

Without a design system, we have to spend more time creating a different and complex component for our application, more debates about which one have a better idea about UI/UX (developer and UI/UX designer always do this). Of course it will consume more timeline for our project and make user be unhappy.

Photo by John Schnobrich on Unsplash

So we decided to implement a Design System with codename Tunggal, into our application. In this article I will not discuss how to make a design system, rather I will show how to implement Tunggal into our apps.

We use Cocoapods to implement 3rd party libraries so it can help us faster in development. And nowadays I don’t know any technology which doesn’t support Cocoapods, so basically, Cocoapods are used by a larger community to distribute their libraries. You can also create your own pod with a simple step. I will demonstrate how we create our Tunggal into a private pod library.

Private pod usually are used in the internal organization where they want to keep this library only for their internal use. It can simplify code sharing inside the organization. For the official tutorial, you can check in the Cocoapods guide Create Pod Library and Make a Private Pods.

Here is the overview of our steps in building a private pod library :

1. Create your project for pod library on Github
2. Generate the Pod Project
3. Edit the Podspec file
4. Add your design system code
5. Create a Private Spec Repo
6. Add your Private Spec Repo to your CocoaPods installation
7. Add your Podspec to your repo
8. Share it!

I will make it short and easy to understand, so stay with me, will ya.

Create your project for pod library in Github

First, you have to create a new private project on your Github. We name it Tunggal. This repository basically holds a bunch of utilities and components that are used in different projects across the organization.

Generate the Pod Project

We will use command from Cocoapods to bootstrap the process, because they provide with a nice utility to set up your project. Open your terminal and navigate to your project folder and run this :

pod lib create [pod name]

This command will set up your project. Follow the guideline from this command and your project will be ready to use. [pod name] is your project name, in our case it’s Tunggal. Our project should look like this after finished

Edit the Podspec file

Next, we have to configure podspec file inside our library.

A Podspec, or Spec, describes a version of a Pod library. One Pod, over the course of time, will have many Specs. It includes details about where the source should be fetched from, what files to use, the build settings to apply, and other general metadata such as its name, version, and description.

Cocoapods will generate a template in our podspec file and we only have to replace the value using our configuration. For more configuration about podspec file, you can go to the official website.

After you configure the file, run this command to validate your configuration. Use pod name that you define in the previous step.

pod lib lint [pod_name].podspec

You will see word passed validation like this output if your podspec passed the validation.

Add your design system code

After you set up your pod configuration, it’s time to add some code to create our design system. We use swift to create our design system.

Place your class inside the folder Development Pods -> Tunggal . You can create another folder inside to group your class based on its feature/function.

Create a Private Spec Repo

To list your private pod library, you have to create private spec repo. Go to your Github and create another repository to host our podspec file.

Add your Private Spec Repo to your CocoaPods installation

After you create a spec repository, you have to add it to Cocoapods installation. Run this command in your terminal

pod repo add [repo_name] [source_url]

Define your [repo_name] for your internal use only, you will use this to reference the private pod spec repo. Get [source_url] from the private spec repository that you create in the previous step. After everything is done and worked correctly, you should be able to link your spec repository by running the following commands.

cd ~/.cocoapods/repos/[repo_name]
pod repo lint .

Add your Podspec to your repo

And then for your pod to be listed in your private pod spec and used in different projects across the organization you have to publish it. There is 2 steps that you must take, first is to create a tag in your pod repo (Tunggal repo) and then publish your tag. Second is you have to push your podspec file inside your project to private spec repo using this command

pod repo push [repo_name] [pod_name].podspec

If there are no errors, your pod are ready to use in the different project whenever you or your team need it.

Share it!

And finally, the last step is to share this repo with your team inside the organization. Add this source to your podfile so your project can utilize your private lib.

Congratulations you have successfully created and published your first private pod. If you want to create another private pod library, just repeat again this step except for Create a Private Spec Repo and Add your Private Spec Repo to your CocoaPods installation.