This topic describes the systematic instruction to Add Grid option.

This feature allows the designers to ensure the correct grid structure will be implemented to the designed components when the screens are exported into the UI toolkit.

For example:

If designers want to ensure the grid specification of the below design is translated identically,

Figure 9-1 Grid Specification

Description of "Figure 9-1 Grid Specification "

they should:

1. Run the plugin and choose the Modify Component option.

   Figure 9-2 Modify Component

   
   

   
   Description of "Figure 9-2 Modify Component"

   
   
2. Select the frame on which the grid specifications need to be added.

   Figure 9-3 Frame

   
   

   
   Description of "Figure 9-3 Frame"

   
   
3. After selecting the frame, select the Add Grid option and then click on the Add New Grid button located at the bottom of the window.

   Figure 9-4 Add New Grid

   
   

   
   Description of "Figure 9-4 Add New Grid"

   
   

   On the Add New Grid page, the plugin will automatically detect and list the child components of selected frame.

4. Specify the grid size, its alignment and click Save to save the specifications.

   Figure 9-5 Adding Grid Specifications

   
   

   
   Description of "Figure 9-5 Adding Grid Specifications"

   
   

   The new grid gets created.