Indigo.Design - Installing the Sketch UI Kits

In order to get the Indigo.Design UI kits into Sketch, which include the components, which map to our Ignite UI for Angular UI components and controls, preset UI patterns, as well as styling, you need to log into Indigo.Design once you have registered for a trial or if you're already a customer. Once you're logged in, go down to the left-hand side, and you'll see the download resources button. There are four items that you have the option to download that are part of the Indigo.Design system. First off is the Indigo.Design system Sketch libraries, second is the Indigo.Design code generator, which you would use as a plug-in for Visual Studio Code, Ignite UI for Angular is our native Angular UI controls and components that you have as part of your subscription, as well as the Indigo.Design desktop tool. So, let's go ahead and download the Indigo.Design system Sketch UI libraries. So, I'll go ahead and click download, and that download triggers. And now, I want to get those added into Sketch as libraries. Let's go ahead and see what was downloaded. We've got our Indigo.Design Sketch UI kits, and we've got our components, our patterns, and our styles. So now, let's go ahead into Sketch and get these registered as libraries. I'll go into Sketch, preferences; I have library selected; I want to go ahead and add library, and I'm going to select these three Sketch libraries. I'll click open, and they will show up here in my list of libraries. So, I've got my patterns, my styling, and my components. So, we'll close this preferences dialog, and now I have a default art board already open. If I go to insert, you'll notice that we have Indigo components, Indigo patterns, and Indigo styling, all registered with Sketch now. So, every time you create a new Sketch project, these will show up by default for you. If we take a look at the components, you'll see all of the options that you have that you can add to your art boards, that are all preset. Keep in mind, what we've done here with the UI kits, is we've added custom overrides to each symbol, which gives you the opportunity to change all the properties for each symbol, or choose from our custom properties, which will automatically map to the properties in the Ignite UI for Angular UI components. So, you'll see here, that I've changed my type. We have a few options here, round, square, large initials, large picture, large picture with square. I can set different background colors, different styling, all of this is preset as part of the design system. If I go back to the insert button, you'll see we have some richer options. So, for example, if I want to insert a category chart. So, here's a nice chart that I might want to add to my design. I'll put this right over here. And you'll notice if I go to the type, we have a bunch of preset different chart types. So, all of this is preset for you, you don't have to worry about how you would actually represent an Ignite UI for Angular chart. In Sketch, we've added all of this as part of the design system. So, it's pretty exciting, and pretty cool on the capabilities that you have. One of the neater things that we've done, is shipped a bunch a preset patterns for you. If I take a look here, I've got some different card collections like assistant feeds, news streams, Pinterest streams, social timelines, different types of forms. For example, address forms, booking forms, login forms, payment forms, et cetera. Different types of lists, filter people playlist and a few others. So here for example, if I grab a people list, which ends up being something that you would probably use a lot in a typical mobile app design. We already have it preset for you. So, if I right click on this, and I detach it from it's symbol, which is a step you have to take for all of the libraries, you'll see that the components, and all of the widgets, are actually something that you can go ahead and style and design right inside of Sketch. The trick here, is that you will notice the IGX-list is what we're using to map to our UI controls and Ignite UI for Angular. So that's how easy it is to get the Indigo.Design Sketch UI kits registered as Sketch libraries, which will allow you to design applications that will generate pixel perfect Angular apps with Indigo.Design. Sign up today at http://indigo.design