Using Indigo.Design with Sketch cloud libraries
Lately, our team was able to push a few highly anticipated improvements to Indigo.Design, namely matching UI Kits for Figma and Adobe XD. Having released the latest version of our UI Kit for Sketch (2.1.0) nearly half a year ago now is a good time to demonstrate our continuous commitment to extend and improve it as a rapid UI design tool. The Sketch UI Kit remains the cornerstone of our design-test-iterate and eventually builds and develops a story with Ignite UI for Angular. All in all the Sketch library files are the only enablers of the end-to-end code generation story for now.
In September the Sketch team introduced new and powerful functionalities in their cloud, among which came the support for cloud libraries. We tried them together with Indigo.Design and really liked how smooth the experience was, but now with the components panel in Sketch, things leaped on a whole new level. In the following lines, I want to guide you through the download of the UI Kits, the process of setting them up as cloud libraries for your team, and utilizing them through the new and improved interface of the Sketch app.
First and foremost, we need to download the Indigo.Design UI Kits for Sketch, which is possible upon signing up for a free account. Once the registration is complete, from the navigation panel on the left you need to click on the Download Indigo.Design Assets button and get the first resource at the top of the dialog that will appear.
Having downloaded and unzipped the archive, open the Indigo-Styling file first and click on the Upload to Sketch Cloud button in the top right of the Sketch app interface. Uploading may take a while due to the vast number of assets and resources in the file, but once it is finished follow the same process for the Indigo-Components and Indigo-Patterns libraries. Every time a library is uploaded successfully, a browser window will be open with the document settings for the just-uploaded file, where you must check the Use as Library box which will treat the document as a cloud library from now on.
And having followed these steps for all three files you should be able to see the three libraries upon selecting the Libraries tab in the Sketch cloud like it is shown below. Now it is time to get back to the Sketch app.
In a new project I will create a new artboard and change my left panel view form LAYERS to COMPONENTS. Since I want to create a very basic design I will choose the Indigo-Components in order to see only symbols from that library in the section below and using the search at the bottom find and add a Large Avatar and two Buttons of type Icon. Note that I can still use overrides from my other libraries, e.g. to change the icon symbols for my buttons.
Another really neat thing to improve readability for rich libraries like ours is how the symbol naming is converted into a tree hierarchy allowing you to narrow down the left panel and have more screen estate for your design. Besides symbols, I can also filter by type and look for a particular typography asset for example, through the horizontal button group with options for symbols, typographies, and colors. And if you use a combination of cloud and local libraries, they are grouped accordingly so you can really take advantage of all the new features in Sketch at scale.
I also have a small personal celebration with the latest update that I would like to share. Creating libraries that are rich in components, states, and assets is not an easy task, and making them usable and easy to navigate becomes an impossible dream at one point. For a year now I had on my to-dos an item for coming up with a way to make the search of the Indigo.Design assets more easy and the latest update of Sketch made it obsolete as it is now built-in the design surface. With that, I would like to wrap things up and give my Kudos to the team behind this awesome design tool. If you find my article useful, feel free to try to Indigo.Design as a system and let us know what you think.
