So I decided to take a couple of hours today and begin to work through the Component Inspector UI/UX. I used the Paragraph component as it’s one of the more complex ones and I wanted to see if I could get something that feels more ‘Elements like’.
I stole liberally from Pages, including the segmented control - style, layout, and more.
With some parameters I imagine the UI changing for when different settings are used. For instance the Color property. If Gradient is selected you’ll have two (or more colours to choose from) as well as what position each colour is placed in the gradient. I also imagined a style picker much like in Pages where you have predefined styles (body, header, etc) in the them that can quickly be selected from a drop down at the top. The font family, weight, etc would all be populated based on the theme style. If you decide to override these you would also have the option to update the theme style directly from the property inspector. All of the settings here would apply to the paragraph as a whole, not necessarily to individual sections of text.
The layout section is quite complicated, especially in terms of setting margins and padding. I was thinking that it would be nice to allow folks to select preset margin and padding settings contained with their theme - much like how the spacing section of the theme lists all sorts of different space values, the margins and padding values would contain preset collections of spacing values to indicate top, right, bottom and left values.
I also added a specific background section in layout which includes the ability to set more than one background. For instance a colour or a gradient, as well as an image (which is possible in CSS and Tailwind).
More only contains notes for now, but I could image other values being set here. Style and layout will largely be the main sections for the core components. It would be nice as a developer to be able to group similar properties under a section heading (ie: style , layout, etc), as well as being able to define your own when necessary (ie: behaviour, external, etc)
Anyway, I’ve included the (very messy) Sketch file below if anybody is interested.
Putting it in the Elements UI would look something like this. I’ve also added blue dots to items within the node/structure view to indicate which elements/components have overrides. It would be nice to be able to filter/search the node view for just those nodes/elements that have overrides.
https://files.bryanrieger.com/elements.zip
Note: I’ve updated the screenshot with a few cosmetic fixes, as well as the elements.zip download.