This article provides answers for InVision V7
To confirm your version, check the upper right corner of your dashboard.
Inspect in Freehand simplifies the design-to-development process. With Inspect in Freehand, your team can drive efficient and productive hand-off meetings between designers and developers, providing access to measurements, colors, assets, and code for your designs.
Inspect in Freehand works specifically with:
Only screens that are directly synced from Sketch or imported from Figma can be inspected. Currently, it's not possible to inspect copied or duplicated screens.
Access Inspect in Freehand
To access Inspect in Freehand:
- Log into InVision and open your freehand.
- On the bottom toolbar, click the More tools menu icon (•••) and select Inspect. The Inspect panel will open.
Click the pin icon next to the Inspect add-on to pin it to the toolbar.
- Click any screen to inspect the details.
The Inspect panel in Freehand has different sections:
- Layers panel: Select any layers on the current screen.
- Properties panel: Access your screen’s dimensions, colors, fonts, code, and more.
- Assets: View and download assets on a screen.
You can expand or collapse these sections by clicking the arrow icon to the left of each section name.
When opening the Inspect panel, you’ll see a full list of groups and layers generated from your design document. The layers panel displays all the layers in the exact order, layer type, and hierarchy found in the source design file.
To expand or collapse a group, click the drop-down arrow to the left of the group name.
When hovering and clicking design elements on the canvas, the Inspect add-on selects the parent group by default. To select a nested group or layer, select the parent group first and then hover and click on a layer within that group. To access the most deeply nested layer, select a screen and hold the
Command key while hovering and clicking.
Selecting a layer on a screen will also select that layer in the layers panel, and vice versa.
To deselect a layer, click the canvas outside any screen.
Measure layer position
To display the relative distance between two layers, click the layer you want to measure and then hover over the layer you want to measure it against (either on the canvas or in the layers panel).
With a layer selected, the information panel displays layer-contextual information. With a screen selected, the information panel displays screen-contextual information.
Dimensions and position
At the top of the information panel, you can view the dimensions and position of a selected element relative to the artboard. When no elements are selected, you can view the dimensions for the artboard.
When no layers are selected, the properties panel will display the Fonts section. This section lists all fonts used on that particular screen.
When selecting a text layer, you can view the Typography section, which includes the Font and additional formatting information —you can copy this information by hovering over it and clicking Copy to clipboard.
With the text layer selected, you can also copy the text itself by clicking the Copy button next to the Text field in the properties panel.
When selecting a screen, you can view all the colors found on that screen in this section.
If you select a layer with vectors, the properties panel will display information about Fills and Borders.
When you select a layer, you'll see the Code section at the bottom of the properties panel. Once you expand the section by clicking Code or the arrow icon to the left of the section name, you'll see the layer's visual attributes in code form. To copy the snippet, hover over the code and click the Copy button that appears.
With the Inspect add-on you can view and download individual assets when selecting a screen synced from Sketch or imported from Figma in your freehand.
To view and download assets, you need to mark the layers for export in Sketch or Figma and sync or import your prototype to Freehand first. To enable asset download for layers within a symbol, the layers within the symbol must be marked for export in Sketch or Figma. If you don't complete these actions, the assets won't appear in the Inspect add-on.
When selecting a screen with assets, you can view a list of the assets in the Assets section, which includes a thumbnail preview, format, and dimensions of the asset in pixels.
The number displayed next to the section name indicates the number of assets that are included in the selected screen.
To download assets:
- Open the Inspect add-on and select a screen in your freehand.
- In the Assets section, hover over the asset you want to download and click the Download icon .
- The asset will download directly to your computer.
Currently, it is not possible to download multiple assets at the same time.