How I’ve Been Using Visily So Far

Visily is a powerful application for turning UI mockups into prototypes. I began using it recently and have fallen in love with it.

While there are many ways in which a designer or developer may use Visibly, I will be sharing how I’ve been using Visily so far which is for CSS inspection.

I am a full stack developer, so while I may not struggle with CSS and UI interpretation, sometimes I need some form of prototyping tool to help me whip up ideas quickly and unify my designs or even cross-check others, especially when working on a small team.

I use Visily for inspecting elements pre-built and custom elements to pick up their CSS and help me speed up my element styling.

To do this:

  1. Open up an existing mockup or create one from the new projects page: New Project

  2. Ensure you are in select mode by clicking the pointer arrowhead at the bottom area of the screen.

  3. Click on an element that you want to inspect, then click the </> button on the widget at the top-right side of Visily’s working area. This will expand the widget into a side bar titled CSS Inspection if it isn’t already expanded. Alternatively, you can press Alt + I to pull up this side bar.

  4. Expand the CSS section on this sidebar to see the CSS ruleset. You can copy this CSS to your local project. You can even see the image used in the element from the Assets section of the side bar and download it.

Don’t forget, you can edit the CSS of an element by changing font-family, font-style, font-weight, size, etc. from the quick panel that appears when the it is selected in the case of a text element or border-style, opacity, drop-shadow, background-image etc. in the case of a non-text element like a <div>.

Regardless of how you choose to use Visily (and I’m sure there are so many features and lots of functionality to talk about and explore), Visily will prove to be useful in some way if not indispensable to your workflow.

How do you use Visily?

Lastly, Happy Prototyping with Visily! :tada:

3 Likes

Hi @chizaram.igolo,

I’m Thea from Visily. I must say that was a great and instructional post about CSS Inspection feature.
How do you think we can improve the way we display the properties, class in or improve the CSS as a whole?

As a full stack developer yourself, I would love to have your input on some features we are planning to support:

  • Export theme into Tailwind format
  • Export theme into Bootstrap format
  • Reflect variables in CSS values instead of only absolute value.
  • Inspect spacing (padding, space between elements) right on canvas.
  • Generate HTML of a component

Which do you think would prove most useful to you and what are other features you wish we can support?

Regards.

4 Likes

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:

  1. User-Editable CSS variables
  2. 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!

7 Likes

Hi @chizaram.igolo,

Sorry for getting back to you late. Your reply is very resourceful (from that we can derive a lot of action items for our product development plan). I will closely follow up with each item in your post and ask for your further input when we build the features. The priority for them should be according to their usefulness too.

It would be fantastic if I could establish a group chat (Slack, Skype, Telegram,…) with you and Visily team so we can have space for deep discussion, feature requests, etc.

Let me know if you are interested.
Thea

1 Like

Love it! :smile: The tool is very helpful to me

2 Likes

That would be great @Thea.Nguyen . Sorry for replying late.

Great to hear @chizaram.igolo

Do you use Slack, Skype, or Telegram? And also let me know your account so I can create a group chat.

If you are concerned about sharing it publicly, you can send an email to me via product@visily.ai.

Yes, I’m on Slack @Thea.Nguyen. My username is chizaram.igolo .