Write Layouts

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 | wrapJustify Content: g-autoGap: 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'