Indigo Designs

This video is an overview of the Indigo Design System, a unified platform for visual design, UX prototyping, code generation, and app development. Indigo Design includes three key parts. First, the visual designer creates designs in Sketch using the Indigo Design System, which includes components, patterns, and course style, which map to our UI components for Angular. UX designers can share and test prototypes with users via cloud. indigo. design. In the cloud, they can create prototypes, create usability studies with video replays, and share and collaborate their designs with others. Finally, developers can use the Visual Studio Code extension to generate pixel-perfect Angular code from their prototypes. To start, I have a sample app that I've already created. It's a simple budgeting login and welcome screen. This was created with our UI kit. You'll see that some of the value that we've added is the override section in Sketch, which allows you to modify in a structured way everything about the component that you want to generate. So things All of this is available to me as overrides for each one of the elements, and each type of component might have different overrides based on what its capabilities are. So you'll see here the data property we've populated as username. This will pass all the way through to the code generator. If I go to the insert, you'll see the indigo components list. It's a very robust list of pretty much every type of UI component that you'd need to create any type of application. From the patterns, we're shipping various types of patterns, and these lists will continue to grow over time. And then the styling is where you can do your own custom branding by changing typography, colors, etc. And it's all inherited by these designs. So in the normal process, a visual designer may create something very nice here in Sketch, and they want to share it with the UX designer to do some further usability studies, user testing, etc. So what we're going to do at this point is upload it to the indigo cloud and use its image-based prototyping tool. So in the indigo cloud, I would go ahead and log into indigo design, which is cloud. indigo. design. I'll click create prototype, and I'm going to grab the sketch file that I was just working on. Grab sketch. I'll drag this in, and this is going up to our cloud service to parse the artboards in the sketch file. And now I can do some prototyping here in the cloud. One of the nice features we've added is the ability to highlight UI elements coming in from Sketch. So for example, if I want a button sign up to tap over to this budgeting screen, you'll notice when I clicked it, it automatically went to budgeting. That's because we inherited this navigation directly from Sketch. The other thing that you can do is change how this interaction actually occurs, or of course you can go back or open up a new URL. If I want to run this to see how the interaction might occur, all I have to do is set my home screen. So I'll go ahead and set this as my home screen, run the app, and you'll see when I click sign up, it says welcome to budgeting. So let me go back and edit this screen. I'm going to publish this to my workspace indigo Cloud. Indigo Cloud includes public workspaces, private workspaces for your teams to collaborate on. So we'll call this budget login screen, and I'm going to click publish. Now what happens when I publish it is it also generates a URL. This URL I'm going to use in the Indigo Design Code Generator, which is a Visual Studio plugin. So if I go over to Visual Studio Code, I already have a starter app here. You'll notice in the app there's really nothing happening here under budgeting. I don't have anything. This is just a starter app with some Chrome. I'm going to go ahead and launch the Indigo Design Code Generator. I'm going to paste in the URL that I just grabbed from the prototype that I uploaded, and it's going to prompt me with a screen, which is offering up all of the screens and the components within those screens. So I want to actually generate this login screen. I can change the component name. If I had data, I could change the model object name, and here's the module name. I'm getting started. I want to generate the welcome component. I'm going to go ahead and generate the code assets. We get a couple of notifications here on the bottom. It says, please wait while your project is updated. You'll notice here on the left-hand folder, it's adding all of the HTML, CSS, and Angular code that I need. So for example, if I look at the login screen that it just created, I have all of the HTML. Let me format this doc It brought in all of the CSS, as you'd expect. We do everything to make it look exactly One of the things we don't do is automatically add routing into the code. We will get there eventually, but it's just not there yet. But I did add this event in my sketch file, and it came all the way through. So let's go ahead, and I'm going to tell this to navigate, and I want this guy to go to the welcome screen. And that's it. So now that's done, I'll go ahead and save this file, and we'll do an NPM start. So this starts up, and it launches right directly to the budgeting screen, and you'll notice if I go back to my prototype here, it looks exactly If I click sign up, it'll navigate to welcome to budgeting, which is exactly what you expected here. So if I run this prototype, we have a pixel perfect view of how these should look. Now, the difference is, of course, if I put these side by side, that indigo, it's actually running in the app Chrome. Here, we're not running in the app Chrome. The Chrome is a full-screen browser, but you get the idea. You actually have everything, the same exact font, exactly what you would expect from this application that you created in Sketch, uploaded to the cloud, and are running now inside of the browser, and they look exactly a So our goal here with the Indigo design system is that you start in Sketch in your design process, use the Indigo cloud for collaboration with stakeholders in your team, and then ultimately work with developers to generate pixel perfect code in Angular based on your design. .