All Collections
Developing with Zeplin
Layout 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

Fatih avatar
Written by Fatih
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 then publish them to Zeplin, you can view the specs 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) generates flex properties on Web projects

  • The XML extension generates LinearLayout on Android projects

Related articles:

Did this answer your question?