Write Layouts
The plugin lets you input AutoLayout settings
Plugin Preview
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 | 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'
Plugin Details
| Version | 13 |
|---|---|
| Created | March 12, 2023 |
| Last Updated | July 15, 2023 |
| Category | Software development |
| Creator | 見野 伸太郎 |
| Stats | 117 installs, 4 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- main:dist/code.js
- Editor Types:figma
More Like This
Discover other plugins in the Software development category.
Builder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
Code Snippet Editor
Translate component variants, properties, and more into dynamic code snippets for your design system
GitHub
Connect Design to Code