Skip to main content
All CollectionsDeveloping with ZeplinLayout Specs
Inspecting Auto Layout properties
Inspecting Auto Layout properties

Learn how to view Auto Layout or Content-Aware Layout specs in your designs on Zeplin

Bedriye avatar
Written by Bedriye
Updated over a week ago

When you set up Auto-layout specs from Figma or Content-Aware Layout specs from Adobe XD in your designs and then publish them to Zeplin, you can view them using the Layout Widget on the right panel.

When you select a parent layer, Zeplin shows the children's direction using the gray columns' direction. Alignment and distribution of the child layers are also available under the Layout Widget.

You can also see the spacing and padding (gap) information, and Zeplin will highlight the relevant area on the canvas when you hover over the spacing or padding area on the Layout Widget.

πŸ’β€β™€οΈ If you have spacing tokens defined in your styleguide, the tokens will apply to the spacing and padding information.

Zeplin generates code snippets for Auto Layout settings using extensions.

  • The Stylesheet extensions (CSS, SCSS, Sass, Less) generate flex properties on Web projects.

  • The XML extension generates LinearLayout on Android projects.


Related articles

Did this answer your question?