BuilderX has a clean and easy to understand interface.
You can consider the workspace to be divided into 5 major sections:
The canvas is the first screen that you will see when you launch a new project in BuilderX. It is a
minimally designed space that will hold all the
artboards designed by you.
The canvas is scrollable and can be zoomed in or zoomed out to enable you to see all your
artboards at once or focus on the little details in a single
pinching on the touchpad or using the keyboard shortcut
command - plus(+)
ctrl - plus(+) on Windows)
It also contains different screens based on the current context you are working in, such as the Main Scene where Artboards are shown, Component Scene or ScrollView Scene which triggers when you double click on a Component/Layer, which is explained further in the documentation.
An Artboard is your creative space. They are empty screens on which you can draw, write, make shapes, add color and styles to create screens for your apps.
You can create multiple artboards on the same canvas by clicking the
+ button on the
top-left corner and clicking on
Artboard from the drop down menu. Alternatively, you can
click the big
+ button next to the Artboard on the screen to create a new one.
Artboards can be resized by single clicking the name of the artboard on the top left corner of the artboard and then dragging one of the corners. It shows the device that you have selected from the Right Panel.
Duplicating artboards is simple. Simply select the artboard, right click on the artboard anywhere and finally click on 'Duplicate Artboard'. This will create a replica of your existing artboard on the canvas.
Unwanted artboards can also be deleted by simply selecting the artboard to be deleted, right clicking on the artboard and clicking on 'Delete Artboard'.
You can choose any device from the latest flagships with Android or iOS. BuilderX's Artboard will adopt the same design from the device specifications.
An Artboard in BuilderX corresponds to a Component, which is a particular screen or page of your application.
According to BuilderX defaults,
.js files corresponding to Artboards are saved
The Design Panel holds all the tools you need to stylize or
design your screen on the
Artboard. The Design panel can be viewed on the right side of the screen by clicking on the
Design button on the top right corner of the screen.
Design options will appear automatically for a layer once the layer is selected. The Design Panel is explained in detail under Design Panel Elements.
The Layer & Components Panel
The Layer & Components Panel can be found on the left side of the screen. This bar contains a list of
all components applied or used in your project, as well as a list of all pre-made components that can be
dragged and dropped into your
The different parts of The Component Panel are explained under Layers & Components Panel Elements.
The Toolbar panel contains generic and basic components that will help you navigate and draw on your artboards. This panel can be found on the top side of the screen and contains the name of your project in the center.
The different parts of the Toolbar Panel are explained under Toolbar Panel Elements.
This is where the real magic is. This is where all your designs are converted into React & React Native code. Code Viewer is useful for developers as it lets you to check the generated code directly.
The Code Viewer can be toggled by clicking on the
CODE button on the top-right corner. You
can select artboards and see as well as use the code or select individual components and view, as well as,
download them as code.
The small gear next to the Download Code button presents a checkbox list which features Smart Flex. The Smart Flex algorithm of BuilderX automatically modifies your code to present all layers and components in minimal & most optimised fashion, thus generating beautiful code.