Thank you Visily for reaching out to me for feedback and suggestions. Here’s what I think concerning these features:
Export theme into Tailwind format
Yes, this feature if it can be included would be greatly appreciated by many and plug Visily into the growing communities of Tailwind (and CSS Utility users in general) because a lot of developers are using or considering using CSS utilities/frameworks in their applications going forward, with one of the most popular of such being Tailwind CSS. Fewer experienced developers are writing plain CSS in projects where frameworks are involved, now. This would be a great addition to Visily’s export functionality - Tailwind theming and classes on demand.
Export theme into Bootstrap format
Mostly the same suggestion I have for Tailwind format export but this would cater to users maintaining older code bases or the communities that have built and been built around Bootstrap including component library makers.
If there are time and human power constraints for the Visily team and only one of the two (Tailwind and Bootstrap exports) can be implemented at a time in the nearest future, I suggest including Tailwind format export first, then Bootstrap’s later along the line.
Reflect variables in CSS values instead of only absolute values
This depends on the user - a UI/UX designer may prefer to have everything appear as absolute values whereas a Front-End engineer or component library builder may not and prefer CSS variables instead, and this may even be to varying degrees.
Personally, there are some values I would prefer to see as absolute values and others as CSS variables.
Most CSS attributes are fine if given absolute values but, values that are reused over and over again like colors, especially those hexadecimal values should be assigned to be variables because intelligibly-worded text are quickly read and understood than numbers - it also helps to see some level of harmony in the project theming at a glance. This could be the default behaviour or an optional second behaviour - a user can uncurl (e.g by doubling-clicking on) variables (in attribute-value pairs) to see their values. I would be fine with attributes like widths and margins given absolute values though, because those values tend to vary more often and also tend to be the ones that need more adjustments from my own experience.
In summary, this feature depends on what the user is trying to get out of Visily - design, prototyping, component creation, etc.
This is one feature I think the Visily team may need to tailor to fit the user and there are two (2) ways I can think of doing this:
- User-Editable CSS variables
- Toggle variable/absolute-value mode
User-Editable CSS variables: This means that at first, there may be no CSS variables in the project but users can double-click/right-click an absolute value (or an existing CSS variable in an attribute-value pair) and be given a small non-modal dialog to make a new CSS variable (or edit an existing one) and determine if other existing similar attribute-value pairs with the exact same values in the project should use this CSS variable henceforth or not.
Toggle variable/absolute-value mode: A toggle to switch between variable and absolute-value mood means that, Visily has already created CSS variables for every existing attribute-value pair in a project (if a template is being used) ahead of time and a toggle on the CSS inspection panel is provided to the user to switch between CSS variable and absolute-value modes. The selected mode (and resulting values or variables) would also be preserved during other operations like exporting.
If the former is too demanding a feature, this feature (Toggle variable/absolute-value mode) could be an adequate substitute, but if the reverse turns out to be the case, then this feature could supplement the former - up to the extent of toggling user-editable CSS variables but not to the extent of Visily creating CSS variables for every existing pair ahead of time. In either case, these would be tied into the existing Visily Project theme management feature (accessed on the widget on the right hand side of the application work area).
This isn’t a major feature per se, but it would make things a little nicer so the prioritization and timeline for including it is up to the Visily team’s discretion.
Inspect spacing (padding, margins, widths & heights) right on canvas
This would be tremendously useful for getting layout shapes including floats, grids, widths etc. at a glance with some highlighting of box elements (and spacing around them) on the canvas without having to always pull up a sidebar to cross-check, just like the inspect element (Ctrl + Shift + C) functionality on browsers - perfect for quick layout debugging by eye. This browser inspect element functionality does not work on elements on the canvas understandably because Visily draws on the canvas and not the browser, at least not directly.
The most important values here are the margins, paddings, and dimensions of the hovered/clicked element, but more may be added - just as long as it doesn’t bog down performance. These could be displayed on the already existing “properties” toolbar that appears when an element is selected. Also, perhaps clicking (as already in effect with properties toolbar) on the element first to select it, is preferable to hovering to invoke this “inspect spacing” functionality, just to avoid clutter and make the application more performant.
A small toggle could be included on the widget at the bottom of the canvas (or somewhere else intuitive) to turn this feature on or off - i.e, go into (and out of ) “inspect mode”.
Generate HTML of a component
This would be fantastic too and especially helpful for designers that need to translate their designs themselves (and perhaps vice-versa).
Top useful features to me are 1, 4 and 5.
There are no additional features for me that I think Visily should support in the near future other than supporting formats from other design software like Figma and Sketch.
Thank you for the opportunity to give feedback on features in the software. Visibly.AI is an awesome product I will be using a lot and recommended to other designers and developers.
Keep up the good work!
The tool is very helpful to me
