Your team can now gain access to the exact design specs from Sketch files, using the Inspect mode – promoting the collaboration between designers and developers.

Inspect is available for Sketch files and can be accessed if you have an Enterprise account.
​ 

To start, you’ll need to install version 54 (or later) of the Frontify plugin in Sketch and have artboard(s) ready to be uploaded into Frontify Projects. If you’d like certain elements to be downloadable later, such as pictures, then set them as exportable in Sketch.

Once you’ve uploaded your artboards into the desired Frontify folder, you can either:

2. Locate the folder in your Projects and open the artboard from there.

 The new file type that’s been uploaded from Sketch, and is viewable with Inspect, is .artboard. No other file types are supported in the Inspect mode.

Start by opening the artboard you wish to inspect. The view mode will show the artboard only. When you click the Inspect icon in the Power Bar, you’ll be redirected to a view of the design layers and information. 

On the side of your screen, you’ll notice the Layers Panel. The panel reflects the actual layers from the Sketch source file. Each symbol will reflect what the layer is for example: 

Group

Image

Text

Path

Symbol

When you select a layer from the panel, the related layer will also be selected on the artboard. 

Layers can be expanded completely using the arrows on the side of each layer:

In the middle of your screen, you’ll find your artboard – the place where you can manage the file you’ve selected to Inspect. 

In the artboard, you’ll see the different rulers and measurements, based on where you hover. Click any part of your design to select it, with the corresponding layer highlighted in the layers panel on the left side. The measurements are shown in pixels, with the rulers in red for vertical measurements, and blue for horizontal. You are able to measure layer against layer and also in relation to the Artboard.  

The canvas is also equipped with a feature that allows you to zoom in and out from its standardized auto-zoom view – an aspect of the whole design scaled to fit or zoomed up to 200% for a more detailed view. 

When a layer is selected, the dimensions (W/H) and the position (X/Y) of a selected element relative to the artboard will appear at the top of the information panel. 

The Information Panel is displayed on the right side of the screen. It’s where you’ll find the detailed, technical information of the design. On the top, you can choose to inspect the artboard or the exportable assets. 

By selecting a specific layer, the information displayed in the information panel is layer-contextual. Deselecting the layer reveals artboard3-contextual information in the panel. 

Format Settings

Units - pixels 

Color - HEX and RGB

Code - CSS

Image: PNG, JPG, TIFF, WEBP, PDF, EPS, SVG. 

Artboard Information Panel

When you open an artboard, the default information in the artboard tab is the screen-contextual information, along with the auditing feature. 

You will find the width represented with a W and the height represented with an H, both measured in pixels. The background color is also included, available in HEX units. 

The auditing feature will present you with the colors that are present in the Artboard so that you can see everything in one place, this tool will allow you to compare them with what’s in your brand guidelines, to determine if they’re in fact on-brand.  This is especially important to keep brand consistency and it’s incredibly useful having everything in the same Frontify environment. 

Whenever a color or font in the design is not covered in your guidelines, the system will insert a warning symbol which (when hovered) will inform you that the color is not on-brand. 

The information displayed for the layer will vary depending on the type of layer chosen.

The typeface in the information panel will indicate the font used in the chosen layer.

In the same way, the color/weight of the layer selected is indicated in the information panel as HEX/RGB. The style of the font will also be shown in the same line.

The size of the text, line height, letter spacing, and alignment also appears in the same section, with pixels measuring the size and letter spacing.

If you would like to incorporate the Layout grid while you are using the Inspect mode in Frontify you would need to follow the next steps:

Here you would need to activate the settings of your grid. 

You will be able to visualize the grid once you have added it in the Settings. 

View> Canvas > Show layout 

From this point, you can upload the artboards directly using the Frontify plugin and be able to visualize the grids when you toggle and activate the Grid section on the Information Panel.

The code section in the information panel is displayed whenever a layer is selected, indicating the different attributes specific to the layer. The code can simply be copied to use directly from the information panel.

When text is selected, the content component will appear in the information panel. This is especially important when extracting text, as it can be copied directly from within the box. 

In this section of the panel, you'll find all the assets from your artboard which were marked as exportable in Sketch. You can download the assets based on the specifications you set before uploading them, such as size and format. You can download all assets at once, or individually. 

If you have any questions, don’t hesitate to contact your Customer Success Manager.