sketch plugin display topographic information
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Sketch Topographic

Display Topographic Information.

webdeveloper extention


Ideas form chrome extention webdeveloper.

When you choose the Display Topographic Information you can see the struct of the page like below. That can check your page is align well like what you want.


It is a amazing function. So I try to make a Sketch vision like the wonderful extention.

What I did in this sketch plugin?


Foreach layers except the symbol element.

ctrl alt cmd t

show the frame with a rgba(0,0,0,0.1) shape

ctrl alt cmd b

show the frame with a rgba(0,255,255,0.8) border

ctrl alt cmd z

clear all

further more

  • In our team, we highly recommend that each text should be a shared text style. If there is a text without shared text style the gray shape or the blue line will turn out to be red.
  • When the text layer Height%lightHeight!=0 it is error too.

Of course you can Ingore all the rule when your layer name with a _ start.