Generate Angular code with Infragistics Indigo.Design
Tags: infragistics, indigodesign, sketch, angular
Published: 2019-11-13 15:32:24

The Indigo.Design System, provided by Infragistics, offers a unified platform for visual design, UX prototyping, code generation, and app development.

You've got your designers, and developers, both integrated into a single platform. This design system has a workflow that is depicted as follows:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/0jkhdr0ln6lwf944jfs6.png)

Designers create designs in Sketch using the Indigo.Design System. 
They share and test prototypes with peer developers, designers, and stakeholders via a common platform, the [Cloud Indigo Design](https://cloud.indigo.design/login).
Developers generate Angular components, and code, from the prototypes.

We are going to dissect the Infragistics Indigo Design System by exploring its major elements. We'll then create a new design for a Contact-Us page inside Sketch, upload the design into the Cloud Indigo Design platform, and create a Prototype. Finally, we will generate an Angular module and component for this Prototype.
##Indigo.Design Sketch UI Kit
The Indigo.Design Sketch UI Kit is a primary component of the Indigo.Design System. It provides all the tools needed by designers to build their designs inside Sketch. This UI Kit is composed of:
###Indigo-Components
Design library with 50+ components that have a one-to-one match with Ignite UI for Angular UI components.
###Indigo-Patterns
A collection of common UI patterns composed of Indigo-Components. Such as a ready-made **Booking Form** UI pattern, that you can place straight into your design.
###Indigo-Styling
With Indigo-Styling you can customize colors, typography, icons, and elevations to match your brand.

The Indigo.Design Sketch UI Kit offers the packages as Sketch libraries. You download, install and start using the Indigo.Design System in your designs.

The components are offered as Sketch Symbols. Each Symbol can be customized by tweaking around its properties. These Symbol properties, at the time of code generation, are then mapped to actual properties on the Ignite UI for Angular UI components.
###Download the Sketch UI Kit
To download the Sketch UI Kit, navigate to the [Cloud Indigo Design](https://cloud.indigo.design) website. If you haven't created an account yet, register for a free account over a trial period. 

Once you register, sign in to your account, click the `Download Indigo.Design Assets` button and a list of assets become available:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/qd8otsohl37vpxc05tkf.png)

Find the first item `Indigo.Design system`, and click the `Download` button. The file downloaded contains Sketch library files. 

Uncompress the file downloaded into a folder on your file system.
###Install the Sketch UI Kit libraries
Now that the IndigoDesign Sketch libraries are downloaded, it's time to add them to the Sketch app before you are able to use them in your designs.

- Open the Sketch app.
- Go to the `Sketch` menu.
- Click the `Preferences` menu item. The preferences window opens
- Click the `Libraries` tab.
- Click the `Add library...` button at the bottom of the window.

At this stage, select the three files you've downloaded  (Indigo-Components.sketch, Indigo-Patterns.sketch, and Indigo-Styling.sketch).
Make sure you select the three libraries' checkboxes.
The libraries are now installed.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ak8r2k973xkkzgw4g0y2.png)

To verify the libraries are installed, create a new Sketch document, and open the `Insert` menu:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/gwvsmm59cmvpbv79b0em.png)

As you can see, all the Indigo.Design symbols have been successfully installed.
###Install the Titillium Web Google font
The Indigo.Design Sketch UI Kit makes use of the `Titillium Web` font. Make sure you have it installed on your Macbook computer. 

To install the font, go to [Titillium Web](https://fonts.google.com/specimen/Titillium+Web?selection.family=Titillium+Web) Google font and download it locally on your computer. 

Open the `Font Book` app and select the font files you just downloaded.

That's all you've got to do to get the `Titillium Web` font.

Infragistics provides thorough and rich documentation for every Symbol that’s part of the Indigo Design System. I highly recommend you check out the [documentation](https://www.infragistics.com/products/indigo-design/help/getting-started.html) to learn more about the Symbols available.
##Indigo.Design Prototypes
Once the design is ready, it’s time to create a Prototype of it to share with your team for review and incorporate any comments inside the design.

To do so, navigate to the [Cloud Indigo.Design](https://cloud.indigo.design/home) website and sign in with your credentials.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/0wkj3kqv8m854mbyjj4r.png)

Click the `Create prototype` button to upload your images or Sketch designs.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ndain5of76wulso6i09k.png)

Once the images or Sketch design is uploaded, the Indigo.Design Cloud generates the Prototypes for you. You can even define interactivity among the screens to simulate the use of the screens.

Finally, you can publish your Prototypes online, and make them public. You can control access to them via a password. You then share the link for the published Prototypes with your team.

I will delve into more details on how to create Prototypes later in the demonstration below.
##Indigo.Design Code Generator
The Indigo.Design Code Generator is the last piece of the Indigo.Design System. Given a published Prototype, you can run a code generation process that will convert your Prototype to an actual Angular Component(s).

First you need to make sure the Indigo.Design Code Generator extension is installed locally on your computer. 
###Download the Code Generator
Browse and sign in to the [Cloud Indigo.Design](https://cloud.indigo.design/) website. Click the `Download Indigo.Design Assets` button. A list of assets is now displayed on the screen as follows:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/qd8otsohl37vpxc05tkf.png)

Locate the `Indigo.code generator` and click `Download`. The downloaded file contains a single file with an extension of `.vsix`. This is a Visual Studio Code plugin or extension file.

Decompress the downloaded file to a folder on your file system.
###Install the Code Generator
To install a Visual Studio Code extension from a local `VSIX` file, launch Visual Studio Code:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/g46ilr73v6kh031f65ld.png)

Navigate to the Extensions page:
- Click the `...` ellipsis.
- Click the `Install from VSIX…` menu item.
- Pick the `indigo-design-code-generator-x.x.x.vsix` file you downloaded.

The extension is now installed.

I will go into more detail on how to do code generation using the Indigo.Design Code Generator later in the demonstration.
##Demo - Contact Us Design
To uncover the real power of the Indigo.Design System, I will take you through this design system in more depth by designing a Contact Us page, creating a prototype for this design, and generating an Angular Component from the prototype.
###Design - Contact Us Screen
Let's open the Sketch app and start building our design. The Contact Us page is going to be simple and it will include the following fields:
- Name.
- Email.
- Notes.
- Send Message button.

Press the `a` character to create a new artboard inside Sketch. For this artboard, make sure to select the `Desktop` layout.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ambig47svxisyou5ptqm.png)

*Add Page Header*
To create the header of the page I will be using 2 symbols:
- A color symbol.
- An H2 symbol.

To insert the color symbol, follow the steps below:
- Go to the `Insert` menu.
- Click on the `Indigo-Styling` menu item.
- Click on the `Colors` sub-menu item.
- Select `primary.100` color symbol.
- Place the color symbol on the artboard.
- Make sure to resize the color symbol to `1024x150` and stick it to the top of the page.

To insert the H2 symbol, follow these steps:
- Go to the `Insert` menu.
- Click on the `Text Styles / Indigo-Styling` menu item.
- Select the `H2 Headline` sub-menu item.
- Select `Active Style`.
- Place the H2 symbol on top of the color symbol.
- Make sure to change the text inside the symbol to `Contact Us` and place it in the center of the color symbols.

You can view the result here:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/049t2vs93d7j8vpslomw.png)

*Add Form Fields*
The form will contain:
- Name input field.
- Email input field.
- Notes input field.

To add an input field:
- Go to the `Insert` menu.
- Click on the `Indigo-Components` menu item.
- Select the `Inputs` sub-menu item.
- Select the `Input` sub-menu item.
- Select the `Line` symbol.
- Place the symbol inside the artboard.
- Click the field and notice the Properties panel on the right side.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/iwfdyg15puo7ywjif34z.png)

Each Symbol will have its own set of properties. These properties are used by the Indigo.Design Code Generator to map each Symbol property to an Angular Component property.

The Symbol Properties are rich and have all the possible values that you could select on the real Angular Component properties. Give it a try and play around with the different values offered.

The `DataProperty` defines the data-binding field used inside the Angular Component. In this case, I've used `{name}`.

Finally, make sure to rename this field to `Name`. The name you assign to a symbol will be used during the code generation. Therefore, giving meaningful names to your fields is desirable.

Repeat the steps to add the Email and Notes fields.

Now let's add the Button.
- Go to the `Insert` menu.
- Click on the `Indigo-Components` menu item.
- Select the `Buttons` sub-menu item.
- Select the `Raised` symbol.
- Change the Button symbol properties to look as follows:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/x8wgxpkpyb7j29ue55ey.png)

You can change the properties’ values as you see fit.

Notice the `Event` property. You need to enter the name of the function that will handle the click of this button inside the Angular Component.

So far, we have the following page layout:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/x8wgxpkpyb7j29ue55ey.png)

One important aspect to remember when building the design with Sketch and before uploading your design to the Cloud Indigo Design; is fixing the alignment and sizing of the symbols. This will help in making your design responsive, and adaptable, to screen size changes.

In fact, Infragistics offers the [Best practices for designing layout](https://www.infragistics.com/products/indigo-design/help/best-layout-practices.html) guide that you can read online.
###Prototype - Contact Us Prototype
Now that the design is ready, let’s look to the Cloud Indigo Design, and create a Prototype for it. With your new-found knowledge, upload your design to the Cloud Indigo Design website:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/yfnsp5yiooccvyxmsy6o.png)

Edit the name of the Prototype to something like `Contact Us Screen`. Also make sure to right-click the single page shown, and click `Set as home`. This is more useful when your design contains multiple pages or screens.

Click the `Run` button to view the Prototype in the browser:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/aldck6ihnwk1tzvavl0r.png)

Awesomeness!

Click the `Publish` button to publish your Prototype. When publishing a Prototype, you can give it a new name, a brief description, assign a password, or allow/not allow comments by reviewers. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/nl21kcen3zs11v83zzjj.png)

Once you're done editing the Prototype Publish window, locate and click the `Publish` button.

A message is shown saying that the Prototype has been published. Also, the Prototype URL is displayed. Make sure to copy this URL to the clipboard as we will be using it very soon to generate Angular code.

In general, your design contains multiple pages or screens. You can define interactivity between the pages inside the Cloud Indigo Design or through Sketch. The Cloud Indigo Design handles Prototypes created inside the Sketch design.
###Generate - Contact Us Angular Component
Now that the Prototype is published, let's use the Prototype URL to generate some Angular code.

Create a new Angular application using the [Angular CLI](https://cli.angular.io/) by running the following command:

`ng new indigo-design`

The command scaffolds a new Angular app for you.

Once done, open the app with Visual Studio Code editor. Open the `Command Palette` and click the `Launch Indigo.Design Code Generator` command.

If it's the first time you click the command, you will probably have to wait a few seconds until the extension is set up for first time use.

Once the extension is successfully setup on your computer, you are requested to sign in to your Cloud Indigo Design account:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/lr13h7h8plt5sz2fx6dg.png)

Once you are signed in, paste the Prototype URL you saved earlier and hit Enter.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/taykfs8sunlteihx846g.png)

You can see the Angular Component generated with all the elements and fields. You can pick and choose the elements to generate. In addition, you can change the Component name, Module name and other settings too.

Once done configuring the screen, click the `Generate Code Assets` button.

At this stage, the extension requests your permission to install the Infragistics NPM packages that are used by the Angular Component to be generated. Click `Yes` to proceed. In addition, you will be asked for permission to override some of the files in the application. This step is required by the extension in order to import the module and component generated into the main app module.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/0jjs3ktw7htlftg9tshk.png)

A new `contact-us` module has been generated and imported inside the `app.module.ts` file.

In order to test the component generated, locate the `app.component.html` and replace its content with the following:

`<app-contact-us></app-contact-us>`

Let's run the app by issuing the following command:

`npm run start`

The application gets compiled and is ready to be served inside a browser. Open your browser, and navigate to `http://localhost:4200/`:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/fme1hkarcj38fuj1klri.png)

The Angular Component looks exactly as it was designed inside Sketch! The extension generated the Angular module, the HTML markup that builds up the page and added all the CSS styles required by the Component.
## Conclusion
This is just the tip of the iceberg for what you can achieve when using the Indigo.Design.

Imagine the following scenario: You build the entire design of your application inside Sketch, you upload the design to the Cloud Indigo Design, create the Prototypes with all the interactions between the pages, and finally generate Angular code for the entire application with a few clicks! 

Indigo.Design is a lifesaver.