I’m Kate, a product manager at Bubble focused on modernizing our editor interface. Our editor is getting a new look and new features, one tab at a time! Today, we’re rolling out a new element styles tab to improve your experience in viewing, adding, editing, and managing your element styles. With this new experience, you’ll see a cleaner UI, a larger preview window, and new functionality — all to make viewing and QAing your styles easier.
Folders by element type and quick adds
Instead of a long list of element styles, styles are now grouped by element type. This folder system makes it easier to find exactly what you’re looking for without wasting time scrolling or searching for the exact style name. We’ve also added a plus button to the right of every element style folder (visible on hover) for quick adds.
Quick edits to style names
We know how important it is to set properties and customize details like the name of the style so that you can confidently reference the exact style you need in other areas of the editor. Now, you can double-click on the name of the style to quickly edit it.
Updated style default
New styles on Bubble come with a lot of defaults, and we’ve heard your feedback on changes that would reduce friction. With this update, any style presets on new apps that you create and any new styles you add will have Center the text vertically marked True by default. Look out for more improvements to defaults throughout the year as we work to minimize repetitive tasks and make building on Bubble a more seamless experience!
Up next on our editor modernization roadmap is a refresh of the elements tree, so stay tuned for more editor UI improvements coming soon. In the meantime, we’d love to hear your thoughts on the new element styles tab in the comments below. Thanks so much!
Thanks @kate.mcnally, the attention to UX is greatly appreciated!
Hopefully, the quasi-selection issue will be addressed with those changes. That is, clicking an item in the elements tree appears to select it on the canvas, but the menu options - e.g. cut, copy, paste, etc. - have no effect. Looking forward to that update!
Would be nice if you made the colors and pixels be entered dynamically. That would be a super easy way to do dark mode or keep consistent spacing or padding across all element.
it would be useful to be able to change the background color of the preview, and ideally bubble should remember it on a per style basis so that we don’t need to change it every time. At the moment if your style does not have a good contrast with the background having a larger preview area doesn’t matter because you can’t really use that preview anyway.
Nice addition of the map and video elements styles.
For the next iteration,
Can you fill the comment bubble in when there is a comment?
Have an expand-all button to expand all the sections? With there not being a size variable, we still have to make changes to the style elements. (Thank you for having the style variable auto-tied to the element. That does decrease the amount of clicking we have to do, but the collapsed element sections now add to the clicking. )
Change Roundness to Radius so that it is more in line with industry terms.
@kate.mcnally Hi! Would it be possible to remove the artificial limit on the number of color variables as well while the team is on the Styles tab? I regularly use Untitled UI on my projects and I can’t recreate even a fraction of the color sets as variables under the existing system.
Great update, btw I don’t know if it’s related to this update but for a few days the style variables that I defined are no longer loaded each time and randomly and I have the default values instead. … I have to reload the page multiple times or close and reopen my browser for the correct variables to be loaded.
Thanks, @kate.mcnally! We should be able to find all elements WITHOUT a style on the tab so that to apply unified styles to them, as stated here in the ideaboard.
Also, the double-click is unintuitive without a “pencil” mentioning icon as a backup.
Please also think of making the implementation of dark mode more easier. Like a one click. For reference I found that FlutterFlow in that area is more advanced. Please look at making dark mode way more easier.
