Tips when designing

There are a few things that you should get used to using as you design your app. These shortcuts can help you save a lot of time when manipulating elements.

Working on complex pages with many elements

If your page has many elements, you may find 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, and you can start typing an 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. The Property Editor will be editing this element. 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 withe the CMD+click operation above.
  • Use the Element Tree to have a clear view of the structure of your page.
  • The Search Palette 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.

Element 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.

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 3 elements to be equal. You can also center an element relatively to its parent (this is also possible by using the Shortcut CTRL + E).

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 then to make you haven't introduced issues.

The context 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 a posteriori that a group of elements will be used in more than one place.

Color Swatches

It is important to always use always 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.

results matching ""

    No results matching ""