Inspect design screens in Freehand

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 works specifically with:

• Sketch documents synced via Craft Sync.
• Figma designs imported to Freehand using the Figma integration and the InVision plug-in for Figma.

Access Inspect in Freehand

To access Inspect in Freehand:

1. Sign in and open your freehand.
2. On the bottom toolbar, select Explore > Inspect. The Inspect panel opens.

Select the pin icon next to the Inspect add-on to pin it to the toolbar.

3. Select 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 selecting the arrow icon to the left of each section name.

Layers panel

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, select the drop-down arrow to the left of the group name.

Select layers

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 also selects 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, select 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).

Properties 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. If you don't select any element, you can view the dimensions for the artboard.

Fonts

If you don't select any layer, the properties panel displays the Fonts section. This section lists all fonts used on that particular screen.

Typography

When selecting a text layer, you can view the Typography section, which includes the Font and formatting information. You can copy this information by hovering over it and selecting Copy to clipboard.

With the text layer selected, you can also copy the text itself by selecting Copy, next to the Text field in the properties panel.

Colors

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 displays information about Fills and Borders.

Code

When you select a layer, you see the Code section at the bottom of the properties panel. Once you expand the section by selecting Code or the arrow icon to the left of the section name, you see the layer's visual attributes in code form. To copy the snippet, hover over the code and select Copy.

Assets

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 don'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. This section 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 included in the selected screen.

Download assets

To download assets:

1. Open the Inspect add-on and select a screen in your freehand.
2. In the Assets section, hover over the asset you want to download and select Download ().
3. The asset downloads directly to your computer.