Layers & Components Panel Elements

The Layers & Components Panel can be found at the left side of the screen. The Layers menu displays the hierarchy of different layers in the selected artboard, starting from the parent layer to all its child layers. It also shows singular as well as layers that are grouped together. You select the layers that you want by clicking on them in this menu as well as set their visibility and lock them.

The Component Library menu displays all reusable components in the project under the Project tab and all available design components in BuilderX under the Library tab.

BuilderX offers two types of Design components:

• Cupertino Designs for iOS.
• Material Designs for Android.

To use these components, just drag and drop them into your artboard.

Layers

A Layer in BuilderX is an elementary block that is used to create an app. Everything that you create on your Artboard counts as a layer. You can see every layer that can be added on the Artboard by clicking on the + icon on the Toolbar. Layers are arranged in the Layer List in the same order as they are added to the Artboard. Each layer's style gets changed on mouse hover in Artboard and when selected.

Layers include:

• Artboard: This option lets you add Artboards to your Project.
• Shape: This option lets you draw shapes (Rectangle & Ellipse) on your Artboard.
• Text: This option allows you to create a text box and add text to your screen.
• Icon: This option lets you choose between many Icons available in BuilderX and add them on the screen.
• Image: This option lets you import images into your screen.
• TextInput: This option lets you add TextInput type text on your screen.
• TouchableOpacity: This option creates a clickable shape on the screen.
• ScrollView: This option creates a scrollable view for your screen on the Artboard.
• Switch: This option creates a switch on the artboard.
• ActivityIndicator: This option adds a spinner indicator on your screen.
• Slider: This option lets you add a slider on the screen.
• Map: This option lets you add a Map layer on the screen. It uses Google Maps by default.

Reusable Components

Reusable Components are a group of layers that are intended to be re-used throughout your design. They can appear in the Layer List as instances of a master Component. Reusable Components are listed in the Layer List with Folder icon on the left to be differentiated. These are flattened layers which can be double-clicked in the Artboard to edit their contents.

Groups

Groups are arranged in the Layer List just as a normal layer but with the chevron icon on the left. You can select and re-order the entire group or the content of the group as separate actions.

Video Series

You can also check the video series covering different Layers in BuilderX.