BuilderX: Things To Care About When A Design Tool Codes
The Right Way To Generate Beautiful Code.
This article recommends the best practices for Designers using BuilderX so that they can ship beautiful code for their Developer counterpart.
BuilderX is a design tool that writes code for the developers which is ultimately shipped as an app.
When it comes to code, developers like it clean, organized and beautiful. As an app, one of its basic requirements is its ability to run on different platforms and screen sizes.
Other than the core design features, here are a few things that add to the goodness and should be considered by Designers when using BuilderX.
1. Don’t forget that all your work is reflected in code.
Yes, every element that you draw on screen is reflected in code. Be it a Rectangle, an Ellipse, an Image or a Button. To make sure BuilderX generates beautiful code for Developers, following are some recommendations to take note of —
1.1. Name the Layers well.
The names of Layers & Groups convert to class names and tokens in code. It’s always better to give beautiful & appropriate names to the layers for your developers.
1.2. Create Components and Don’t-Repeat-Yourself.
If you repeat a piece of design like a ‘button’, then it’s better to create a button component and then use an instance of the same from the Projects panel. It helps in reducing the code and maintaining one single source of truth.
1.3. Grouping Layers Means Better Abstraction.
Groups hint BuilderX to generate nested & structured code. It helps developers make sense of a block of code, collapse them and also re-use them later.
2. Your Design Is An App.
With BuilderX, your designs aren’t just designs. They are apps and they need to act like an app. To make that happen, BuilderX provides the following features:
2.1. Responsive Design
Being responsive means that your app needs to adapt to:
• Different orientations
• Different platforms
• Multiple screen-sizes
• Devices with Notch and no notch
Your app should adapt to these changes wonderfully and the responsive design controls in BuilderX help you do just that.
Some of the controls that help you achieve responsiveness are:
Pin to an edge
Helps blocks stick to a corner of the screen or span across the screen by pinning them to the edges of the screen of the device.
Infinite Width & Height
A handy tool that fills the block on the screen with 100% width or 100% height.
Layers Distribution
Automatically places array of elements and spaces them equally and lets you ‘Distribute layers horizontally and vertically’. It can be used also while pinning such an array of elements to the edge of the screen, that increases and reduces the space between the elements according to the screen size.
Stack ’em up.
Quite useful in cases where content needs to flow from top to bottom and left to right, according to requirements.
For a detailed explanation on how Responsive design works in BuilderX, follow the documentation here.
If you’re more of a video person, there’s a video here and its second part here for you!
2.2. Define Clickable Area
Just like ScrollArea, there are two ways to make clickable areas:
Method 1: Create one from the main menu.
Method 2: Group elements and make them clickable from the right panel.
2.3. Editable Input Text for users
There are text areas which need to be editable by end-users, such as Username and Password fields in Login forms. We call them TextInput.
There are two ways to add TextInput in your Designs / Apps:
Method 1: Create a TextInput from the main menu.
Method 2: Convert an existing Text to TextInput from the right panel.
2.4. Add Navigation
Once you make an area clickable, you can and you should also link it to the desired screen.
2.5. Status bar
You might want to enable or disable StatusBar for specific screens in your app. You can achieve it from the right panel.
2.6. Define Scroll Area & Lists (coming soon)
Method 1: Create one and then move the layers inside them from the layer panel.
Method 2: Group layers and mark them as Scrollable.
2.7. Notch & Safe Area (coming soon)
We have added some samples of devices to demonstrate how the app would look on different devices. We are working hard to find a way to make your designs adapt to different types of Notches automatically. We call it a ‘Safe Area’.
It is not supported in BuilderX at the moment but this is something which you should communicate to your developers.
2.8. UI States (coming soon)
There are times when you need to tweak a design for different states. For example, you design a Login screen and color the borders of the Input boxes red to demonstrate an error condition. In the code and in real apps, they are designed in the same file with Conditional States. We are going to enable designers to specify states and make design changes for each state seamlessly.
Keeping these points in mind when you design your app in BuilderX will give you beautiful and production-ready code instantly. Let your ideas run wild and keep following this blog for more tips and tricks.
