Code Generation in Visual Studio Code

In this video, we're going to use the Indigo Design code generator plug in for Visual Studio Code to generate pixel-perfect code using the Budget starter app. The first thing that we'll do is we'll take a look at what the starter app actually looks like in Sketch. This is the Sketch file that you can download from Indigo Design app gallery. You'll see that we have a couple screens here. There are several variations of the Budget app. We have this very simplistic two screen option. We've got something that is a phone budget app, and then there's actually a tablet budget app. Any one of those you can work on generating code with.

For this example, we're going to go ahead and generate this login screen and the welcome screen. You can see here that we have all of the different inputs, usernames, passwords, password signup button, we have the paragraph text, all of this we designed in previous videos. If you look at the video creating your first art board in Sketch, and then understanding the layout rules for the code generator, you'll get an idea of how to actually create this yourself. It's also in the help documentation, a step by step on how to actually create this page.
https://www.infragistics.com/products/indigo-design/help/codegen/vscode-plugin.html

Sign up today at http://indigo.design