The Inspect Design feature in Visily lets users easily review visual properties, measurements, and CSS details of any element, bridging the gap between design and implementation for smoother collaboration and handoff.
Inspect Mode
You can open Inspect Mode from the top bar by clicking the Inspect icon. This mode is available to anyone with access to the board.
In Inspect Mode, click any element to view its detailed properties in the CSS Inspection Panel. It supports inspecting nearly all element types, except Sections, Sticky Notes, and diagram or brainstorming shapes.
CSS Inspection panel
You can find the CSS inspection panel on the right sidebar in Inspect mode, or press “Cmd (for Macs) + I/ Ctrl (for Windows) + I” to quickly access it when selecting an element.
On this panel, you can:
View and copy the CSS properties
When you select an element, the CSS Inspection Panel displays its relevant CSS properties based on the element type.
These include:
- Element name and type
- Positioning: X/Y coordinates, width, height, and alignment
- All key CSS properties (if applicable) needed to rebuild the element in code, such as:
- Typography: Font family, size, weight, line height, and color
- Color: Fill, border, shadow, and opacity (in HEX or RGB)
- Spacing: Margin, padding, and gaps between elements
- Border & Radius: Border width, style, and corner radius
Click the copy icon to copy all CSS properties at once.
Download assets
If the selected element/component contains icons or images, an Assets section will appear in the CSS Inspection Panel.
From here, you can:
- Download images in their original dimensions and file type (PNG, JPG, or SVG), without any cropping.
- Download icons in SVG format at the dimensions used in your design. Please note that you cannot download the Nucleo icon directly from Visily as an SVG.
- Download all assets at once as a compressed ZIP file by selecting “Download all” button.
This makes it easy to export the exact visual assets you need for development or documentation.
Setting
The Settings button opens a dropdown where you can customize how CSS properties are displayed in the CSS Inspection Panel.
From here, you can:
- Select your preferred color format (HEX or RGBA) for generated CSS values.
- Select the option to show Tailwind variables, allowing you to view Tailwind token names alongside CSS properties.
- Download the Tailwind configuration file directly by clicking the Download button next to the Show Tailwind Variables option.
These settings let you tailor Inspect Mode to match your preferred development workflow and styling system.
Inspect space between elements on canvas
To inspect the spacing between the elements in pixels, select element A and then hover on element B.
Alternatively, you can inspect the margin of an element to its parent container by selecting the element and hovering on the parent.
