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.