How to inspect design details

How to inspect design details

Inspect Mode lets you review design properties, measurements, CSS details, and assets from your Visily board. This is useful when preparing designs for developer handoff.

What you can inspect

You can inspect design and CSS properties in Visily, with available details varying based on the type of element you select. These may include:
  1. Element name and type
  2. Position, including X/Y coordinates, width, height, and alignment
  3. All key CSS properties (if applicable) needed to rebuild the element in code, such as:
    1. Typography, such as font family, size, weight, line height, and color
    2. Color, including fill, border, shadow, and opacity in HEX or RGB
    3. Spacing, including margin, padding, and gaps
    4. Border and radius details, such as border width, style, and corner radius
You can inspect most design elements, but some objects may not support detailed inspection, such as Sections, Sticky Notes, diagram shapes, and brainstorming shapes.

How to inspect

  1. Open the board you want to inspect.
  2. Switch the board to Inspect mode by clicking the Inspect tab in the top bar or or pressing 3 on your keyboard.


  3. Select an element on the canvas. The element’s details will appear in the Inspection panel on the right sidebar.

  4. If needed, click the Settings icon in the panel to customize the CSS display style for your development workflow.

    From Settings, you can:
    1. Choose your preferred color format, such as HEX or RGBA
    2. Show Tailwind variables alongside CSS properties
    3. Download the Tailwind configuration file


  5. After setup, click the Copy icon to copy all CSS properties at once.

Download assets from the Inspection panel

If the selected element or component contains images or icons, an Assets section will appear in the CSS Inspection Panel.


From there, you can:
  1. Download images in their original dimensions and file type, such as PNG, JPG, or SVG
  2. Download icons in SVG format at the dimensions used in your design
  3. Click Download all to download all available assets as a ZIP file

Alert
Nucleo icons cannot be downloaded directly from Visily as SVG files.

Inspect spacing between elements

You can inspect spacing between elements directly on the canvas.
1. Select the first element.
2. Hover over another element. Visily will show the spacing between the two elements in pixels.
To inspect the margin between an element and its parent container, select the element and hover over the parent container.

Note

  1. Inspect Mode is helpful for developer handoff, but developers may still need to adjust the code depending on the project setup.
  2. If you inspect a screen, you can also export it to code from the Inspection panel. Learn more in How to export designs to code.
Need more help?
If this does not solve your issue, contact support and include a screenshot if possible.

    • Related Articles

    • How to use the Visily AI Chat Assistant to generate your design

      This article explains how to use the Visily AI Chat Assistant to generate your design. You can use it to create new designs from a prompt, with optional visual guidance and AI settings to better match your design goals. Access the Visily AI Chat ...

    • How to use the Visily AI Chat Assistant to modify your design

      This article explains how to use the Visily AI Chat Assistant to modify your design. You can ask the AI to refine either a previous generated output or an existing design on your canvas. Modify an existing design on the canvas To modify an existing ...

    • How to set design instructions for AI

      This article explains how to set design instructions for AI in Visily. Design Instructions help you guide the AI with consistent preferences, so generated results stay more aligned with your project’s style, context, and requirements. Set up Design ...

    • Lo-Fi vs. Hi-Fi in Design Mode

      This article explains the difference between Lo-Fi and Hi-Fi in Design Mode in Visily, and how to switch between them. Lo-Fi vs. Hi-Fi Lo-Fi design mode presents a low-fidelity version of the design with minimal visual styling. It is best used to ...

    • How to use AI Plan mode

      This article explains how to use AI Plan Mode in Visily. Plan Mode helps you create a structured design plan before generating the actual design. Access and use AI Plan mode In the Visily AI chat box, choose Plan Mode. Enter a prompt describing what ...