What is Design overview?

It's kind of a style guide on the level of the design screen (artboard) - accessible from the Inspect mode

It lists all fonts (including font-size) and colors that appears right next to the design.

NOTE: The Design overview currently works on the level of artboards for Sketch, XD, Figma, and AI designs and on the level of the whole design file for Photoshop designs.

How does it work?

  1. When you inspect an artboard (Sketch, XD, Figma) or a whole file (PSD) in Avocode, select the artboard in the layer panel or click out of the design canvas. Then you can pick one color or a font, click on “Show layers”, and all layers with this style will be selected both on the canvas and in the layer panel.

  2. If you hold the ALT key and click on a layer in the layer panel, the design canvas will automatically reposition so you can see it.

  3. When you’re using the Design overview, you can also select a font and click View in Typekit or View on Google Fonts in the dropdown to get to the respective font file in the browser so you can copy the CSS rules to specify the font family.

  4. When you select a color, you can transform it to a code variable.

Did this answer your question?