Write Layouts

About this plugin

The plugin enables you to input AutoLayout settings using a syntax like Tailwind CSS.

It automatically sets layer names based on the AutoLayout settings, keeping your custom layer names.

The props syntax:

• Direction: col | row | wrap
• Justify Content: g-auto
• Gap: g-{number}
• Gap Vertically: gy-{number}
• Gap Horizontally: gx-{number}
• Padding: p-{number}
• Padding Vertically: py-{number}
• Padding Horizontally: px-{number}
• Padding Top: pt-{number}
• Padding Bottom: pb-{number}
• Padding Left: pl-{number}
• Padding Right: pr-{number}

Input these props separated by a space. 

When the 'Direction' prop is included, it will override all props, with any unspecified props defaulting to 0. 

When omitting the 'Direction' prop, only specific props will be overwritten.

Example:

'col g-24'

'row g-auto py-8 px-16'

'wrap gx-16 gy-32'