Rules and Tips for a Proper Build

After building hundreds of Flows we came up with a list of ground rules to keep in mind. Some of them are for The Builder's best performance, and some are just good practice. If you follow them, you will enjoy a smoother path... We recommend reading this before starting your Flow and after building a couple of pages, once you have acquired more experience.

Ground Rules

On Keys and Tags:

  • Always use snake_case for keys and tags on the builder.
  • Use unique keys for everything:
    • For static components, add the page name at the start. For example:
      • page_name_img
      • page_name_title
    • Use clear and clean names for data components, they need to be specific enough to not get confused. For example:
      • email
      • first_name
      • last_name
  • Plain text for titles and subtitles with:
    • page_name_title and page_name_subtitle keys
    • title and subtitle tags

On Global Components Keys:

  • Global header container for logo or progress bar with keys:
    • global_header_container
    • global_logo
    • global_progress_bar
  • Global footer container for prev and next buttons (normal buttons with actions) with keys:
    • global_footer_container
    • global_prev
    • global_next

On Styles:

  • Apply styles always on the tag (if you want to apply styles on a single page, use "All Components with this tag and on this page").
  • Try to make the flow responsive from scratch (using % instead of px is helpful), avoid having different styles for mobile when possible.

For Neat Flows:

  • Put all the content of the page inside a container (layouts come like this by default).
  • Add "no value" on conditions and use "not false" instead of true, to show the longest possible route on the progress bar.

Useful Tips

To Keep in Mind:

  • When changing a style on a tag, it doesn't only affect the component on that page, but all other components with that tag. It might look funny on other pages.
  • Components with position absolute can overlap in different screen sizes(use % for positioning). Also, try using position relative on the component's parent container.
  • When editing keys, don’t include "-" or other special characters. They need to be snake_case, not kebab-case.
  • Checkbox needs to be InputBox type checkbox not OptionSelector

Don't forget to:

  • Set the --primary-color variable on the Entire Flow so that the progress circle color changes.
  • Always remove padding when the button doesn't have background-color or border.
  • Change the color of the gray borders on the buttons for hover/selected states (If the background-color changes)

Also, Remember to:

  • Change the key of the cloned components when cloning a page
  • Set the input type(e.g. email)
  • Preload images one or two pages before.
  • Use selected state designs.

Pro Tips

  • Put the font on the entire flow, not just certain components.
  • Make the title smaller on mobile
  • Add validation on required input fields