Tips When Designing (Legacy)

There are a few things that you should get used to using or doing as you design your app.

Finding elements

If your page has many elements, you may find it difficult to find elements to edit them. Here are a few ways you can find them easily.

• Use the Element Picker in the Top Bar. All the page elements are listed alphabetically; you can start typing a name and you'll see the different elements. When you hover an entry in the dropdown you will see a thumbnail to confirm this is the right element, and clicking on it will show it and select it. To make the best use of this, you should take the habit of naming your elements carefully.

• When two elements overlap, clicking on them by pressing CMD will select each element one-by-one, even if one is completely under another. Using this, you can select the element under all the others, without modifying your page layout.

• Clicking on the 'X-Ray' icon will make elements semi-transparent, which is handy combined with the CMD+click operation above.

• Use the Element Tree to have a clear view of the structure of your page.

• The App Search Tool is useful to find elements in the current page by type, or that contain a specific text, etc.

• If you find yourself moving some elements that should never be moved, you can add some protection in the Editor by checking the box 'Lock this element (not draggable in editor)'. This is purely for editing purposes, and can be handy when working on complex pages.

Using the Inspector

When you start building a complex page, an element can be used in many different places, such as events, actions, or even in other elements. To help you have a centralized view of how an element is used in the interface, Bubble has an Element Inspector that will show these connections. In particular, it will show:

• The custom states the current element has, and lets you modify them, delete them, or add a new state

• The different events that are using the current element

• The different actions that are using the current element

• The other page elements that refer to the current element

To reveal the Element Inspector, click on the information icon in the Title Bar of the Property Editor.

Choosing alignments

Having elements aligned is key in having a good, clean design. Bubble has a few tools to help you with this.

1. Snap to edges when dragging and resizing element. By default, Bubble will try to snap elements to an existing line on the page. If you want to change this behavior and snap to a grid, you can control this in the Grid menu in the Top Bar.

2. You can show a grid, control the step (in pixels) and the color of the lines.

3. The Arrange menu offers some useful distribution features, for instance if you want the space between three elements to be equal. You can also center an element relatively to its parent (this is also possible by using the Shortcut CTRL + E).

Using the Contextual Menu

Right-clicking on an element will reveal a Contextual Menu. You will find some clipboard options that can save you a lot of time, in particular copy formatting and copy conditional formatting. Using this feature will copy all the conditions and the modified properties in each of the conditions.

You can also replace an element by another type. For instance, if you realized that you want to use the Ionic Toggle instead of a Checkbox element, you can replace the element without having to delete it and rebuild it. Keep in mind that this can have some consequences on your app, as the type of data the element returns can be different. For instance, if you replace a checkbox by a date input. The Issue Checker will be useful to make sure you haven't introduced issues.

The Contextual Menu also offers a grouping feature, that will move all the selected elements into a new group. Lastly, you can decide to convert an element, or a group of element into a Reusable Element. This is particularly useful if you realize that a group of elements will be used in more than one place.

Customizing color swatches

It is important to always use the same color (HEX code) across your pages, for design consistency. To ease this process, you can define some preset colors in the Settings tab, General & Design section, and then you'll be able to pick these colors wherever you access the color picker.

Building responsive pages

Building responsive pages can be a little unnatural at first. However, once you master the different parameters, you will be able to have very customizable behavior. As everything in Bubble, you have immediate feedback when you change a parameter, so tweaking is a good way to start. Here are a few techniques we've seen to be useful when designing a responsive page.

1. Grouping elements is very useful when you want them to move together on the page. Select a few elements and right click on them to group them. You can also use the keyboard shortcut CTRL/CMD + G. Once this is done, you can define a max width, a min width, an alignment, etc. at the group level.

2. If elements overlap, their behavior will be similar. So if you want to show a group when the width is higher than 500px, and show another one when the width is lower than 500px, it’s important to have these elements side by side, and to make sure they don’t overlap.

3. If you need to have a screen-wide stripe, you can use a group (or a floating group to make it float at the top) and make it as wide as the page area in the builder view. If you don't set a maximum width, it will automatically extend to the edges of the screen.

4. If you want the distance between two elements to get smaller as the page is resized (instead of the elements' widths being squeezed), using a transparent shape can be very helpful. Remember that the algorithm keeps the margins constant, and not the widths. So if an invisible shape is between two elements, it will get squeezed and the visual distance between the two elements will effectively get smaller as the page gets narrower.

5. You can change fonts based on the screen width. The Current Page Width datasource is available in the conditional tab of each element, so you can have a smaller font based on the width. A good practice is to put this at the style level, so that all elements follow the same rule.

6. There is a difference between a 'hiding rule' and using a conditional state that hides an element based on the current page width. The hiding rule is more powerful because when it gets applied (and hides an element), it frees some space for the other elements on the same line. Setting a condition doesn’t do this.

7. If you want to have a radically different design for mobile, you can build a different page entirely. Just design another page and make this page the 'mobile version'.