Inspect Design

Inspect mode

In Inspect mode, you can select an element to view its CSS properties and inspect the space between it and other elements. To open this mode, click the “Inspect” icon on the top bar.


    Inspect mode

    CSS inspection panel

    You can find the CSS inspection panel on the right sidebar in Inspect mode. On this panel, you can:

    • View and copy the CSS properties of the selected element
    • Download assets like images or icons, if any
    • Change the setting to display color property in the CSS code

     
    light-bulb
    Tip: You can select an element in Design or Prototype modes and press “Cmd (for Macs) + I/ Ctrl (for Windows) + I” to quickly access CSS inspection panel in Inspect mode.
     

    To change the color model displayed in the element’s CSS code, switch between “Hex” and “RGBA” in the color model dropdown.

    Hex dropdown

    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.

    Related Articles

    Subscribe to
    Visily now

    Don’t miss out on the latest articles to stay a top of UX design and Product management

    © 2024 Visily. All rights reserved.

    © 2024 Visily, Inc. All rights reserved.