Naming with meaning in No-Code or UX

Hi
I’m a bit lost on how to name my groups/containers properly. From what I understand there is no strict rule, but I’m looking for common practices or naming conventions that could make this process easier for me.
Any suggestions that you use in no-code or UX would be greatly appreciated.
Thanks in advance!

Hey @alex75 , here is something that I follow and share with other devs who are working with me on projects:

General Rules

  1. Use descriptive names: Element names should clearly describe the purpose of the element. Keep it unique for quick reference.
  2. Consistency: Maintain a similar pattern throughout
  3. If an element is duplicated, make sure to rename the new element. Don’t leave it as copy.

Page Elements

Name the elements by their acronym followed by the name.

  1. Groups: G:{{group_name}}
  2. Repeating Groups: RG:{{repeating_group_name}}
  3. Focus Groups: FG:{{floating_group_name}}
  4. Popup P:{{popup_name}}
  5. Reusable Elements RE:{{reusable_element_name}}

Above will ensure you elements-tree looks clean and is easy to navigate.
For remaining elements, keep the default element name from the bubble.

Data Types

a) Name data types in singular form and in camel case. For example, ‘user’, ‘product’, ‘order’.
b) Name option sets as OS_{{optionset_name}}
c) For fields within data types, give descriptive names according to their data type and purpose.
d) Custom States: CS_states

Styles

  1. Buttons & Groups-> {{style_name}} e.g rejected, accepted, popup
  2. Fonts → {{font_name}}{{font_colour}}{{font_alignment}}{{font_size}}{{font_width}} e.g Arial_blue_left_18_500

Pages

When creating a clone, mention the current date against it. {{page_name}}{{current_date}}. This will help us find the relevance of the clone page, especially when there are multiple clones. Or the purpose of clone {{page_name}}{{purpose}} E.g main_clone_110823 or main_ai_test

Versions
Version name should clearly mention the purpose of that version.

2 Likes

Thank you for sharing this. It’s a great foundation for me to start with.
I’m curious, does this naming apply to wireframing and prototyping in Figma or other UX software as well?

1 Like

Alan, thanks for sharing. Saving this link to my clipboard for easy retrieval.

I would just point out that folders can be helpful for organizing pages, and now that Bubble lets you expand the element-tree, don’t hesitate to add context that will help you understand where a group fits in terms of the page.

@alan.thomas111997, do you happen to have guidelines for the actual names of groups or conventions for referencing parent group?

2 Likes

+1 for most of these conventions or slight variations. My main difference is re groups.

I use “G Col” and “G Row” to indicate columns and rows respectively. If you’re nesting many layers of simple column/row groups with basic padding/spacing (I already know what these values are without checking as I’m within a design system) it doesn’t help me having a name for each one. I find you end up with silly names that don’t actually help you navigate. E.g. “G Col Profile inner input container” if you’re not referencing it elsewhere, why not label it G Col? That may be all you need to really know visually.

I only tend to give these groups a name when I need to use them, such as in conditional formatting or workflows or when it helps to navigate layers visually. E.g. your top level groups.

You’ll find what works for you the more building you do and when you haven’t been in a project in a while and suddenly need to look at it again… you’ll find out whether your naming conventions work or not!

2 Likes

One I mentioned considers just Bubble, since most of these items are Bubble specific. But, I’m sure that there must be best naming convention practices for every tool.

Definitely! organising pages and workflows into folders is super beneficial. Regarding naming groups, as for me, I begin with G:Main as the top-level group, and for the rest, I choose names that make it clear to me what they are. Eager to hear about how others name their groups.

Loved the idea of indicating the layout of group while naming it :smiley:

This topic was automatically closed after 70 days. New replies are no longer allowed.