Alignment & Sizing Artboards for Code Generation

You are familiar with this screen from the getting started video and, if you haven't defined any further groups, its structure should look like this. In this video, you'll learn how to define the layout and resizing rules that will generate a responsive Angular app. In order to successfully generate code, it's really important that you as a designer understand the best practices for layouts. So, I recommend that you read the “Best Practices for Layout” help topic in the online docs before you start to design your own screens and apps in Sketch with the Indigo Design System. The first thing we'll do is to modify the nav bar which is usually universal for the whole application. Therefore, let's put it in its own group called “Navigation Chrome”. This is something that appears on every screen, but we need to generate the code only once and we'll reuse it from then on. The properties we need to set for the nav bar are fixing its height and pinning it left, right, and to the top. This way, in a responsive app, the nav bar will behave as expected. For the rest of the video, let's create a group for the screen below and focus on it. We would like the sign-up group to be centered on the screen and to achieve that, let's fix its height and width, making sure that this group is in the center of the screen both vertically and horizontally. Among the layers inside, we find the white background and other elements that constitute the form content. These we'll place in a common group and name it “Content”. For the background that's not out of the content group, none of its resizing properties will be set in order for it to resize together with its parent group called “Sign-up”. In the content group, however, we have to define rules and, as a whole, we would like to preserve the margins on all sides, left, top, right, and bottom by pinning it to all four sides. For each of the elements inside, we have to set different layout rules. The title has to be pinned to the top but also have a fixed height because it's determined by the font size and pin it to the left and right to make sure it stretches horizontally if the parent container changes its width. For the first name, we would like to pin it left and give it a fixed height. But since it has a data property, we'll also define its data property by typing in first name in brackets. The last name, we'll pin right and give it a fixed height, setting its data property to last name in brackets. We'll use these two since they'll be placed in a flex row. You may be aware that Ignite UI for Angular uses the flex box layout and what we define as a layout and resizing rule here maps to those flex layout rules. On the name group, we'll pin to the left, right, and top border. Top pinning keeps the margin to the element above but also fix the height like on the inputs inside. This configuration makes sure that both first and last name stretch accordingly, taking up approximately half of the row with each. Next, let's set rules for the username. Pinning it to the left and right, this time, because it takes up the full width of the parent, fixing its height and pinning it to the top as well, and it's data property will be username. The same configuration is valid for the password field with a binding value password and the sign-up button which has an event binding where we need to type in "on sign-up clicked". Input buttons, texts and some other components have a height determined by the component itself, therefore, we consider it to be pre-defined and are fixing the height in Sketch. We have one last element in the bottom paragraph. A paragraph content varies usually but, in this case, the text is more or less predefined. And we'll fix the height like the rest of the components so far. We'll also pin it to the left and further right to stretch horizontally and to the top as well. With that, our layout rules for code generation are in place and we can now play with the artboard​ to see how the screen we have designed will work under a responsive environment with the dialogue preserving its size and always being centered horizontally. If we were to change content dimensions, the elements inside will respect the behaviors we have defined, preserving margins if we try to break them. These rules come in very handy and useful but, moreover, they will allow us to generate 100% predictable code layouts.