Layout grid

Note: Layout grid can appear only in Sketch, Adobe XD and Figma designs uploaded to Avocode 3.4 and higher.

Layout grid lets you define columns and rows. It's very helpful when coding responsive websites. Avocode allows you not only to measure column and row width/height but also their distance from individual layers or selections of layers.

How to display and use the Layout grid?

  1. Go to GRID & GUIDES in the bottom right corner.
  2. Check Layout.

3. Select layers and mouse over layout columns/rows to measure distances.

Tip: Press CMD/CTRL + R to toggle Layout grid.

Regular grid

The regular grid is usually used for designs that need to be scaled divided by an even number in order to fit to different screens (such as Retina vs full HD screens). 

Note: Regular grid can appear only in Sketch, Adobe XD and Figma designs.

How to display and use the Regular grid?

  1. Go to GRID & GUIDES in the bottom right corner.
  2. Check Grid.

3. Select layers and mouse over the grid squares to measure distances.

Tip: Press CMD/CTRL + R to toggle Regular grid.

Guides (or rulers if you like)

Guides help you measure distances between elements precisely. Guides appear as non-printed lines that float over the image. There are two types of guides in Avocode:

  • Static Guides are created in the design tool by the designer and are synced into Avocode. You can only show or hide them, but you can't move or delete them.
  • Dynamic Guides are created directly in Avocode. You can move, show/hide, delete and create them as you want.

How to show guides made in the design tool?

  1. Go to GUIDES in the bottom right corner.
  2. Check Designer's guides.

Note: This action will show you also rulers around the design canvas.

How to create aditional guides in Avocode?

  1. Make sure rulers are visible (either click Designer's guides  or Show guides).
  2. To create a horizontal guide, drag your mouse from the top ruler.
  3. To create a vertical guide, drag your mouse from the left side ruler.

How to show/hide guides?

  1. Go to GUIDES in the bottom right corner.
  2. Check My guides.

Tip: Press CMD/CTRL + R to toggle Guides.

How to delete guides?

Either select a Guide with Select tool and hit Backspace or drag it to the top and left side of your Design view.

 

Learn more:

Did this answer your question?