ark-tailwind-codegen
by Luke
Convert Figma's css output into tailwind classes that match our custom theme.
Installs
17
Likes
2
Users
355
Views
363
Preview
About this plugin
This plugin is based on Parbez's figma-tailwindcss pluginIt uses ARK's custom Tailwind theme to convert Figma's CSS output into tailwind classes that can be used in conjunction with our design system.
The source code is available on GithubHow to useClick the Open in... button and choose the file you want to use it inGo to your file and make sure you’re in Dev Mode (if there are green buttons in the UI, you’re in the right place 👌)Select the layers you want to generate the class names forMake sure you have the Inspect panel open on the right-hand sideScroll down to the 'tailwindcss' section et voilà ✨If you don’t see this section but instead see an Inspect layer properties button, click it and you should see that section appearIf you still can’t see the section, make sure you’ve got `ark-tailwind-code` plugin selected from dropdown at the top-right of the `Code` sectionTodo[ ] Import tailwind theme from @ark/theming[ ] Custom typography classes[ ] Convert layout variables to classes[ ] Prettier?
More software development plugins
View allBuilder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
by Steve Sewell
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
Anima: Convert Figma to HTML/CSS/React/Tailwind,Vibe code,DevMode Inspect/Run React/HTML,App builder
by Anima
Anima - AI Design to code, Vibe code, Vibe design
SkewDat
Paidby Unfold
Skew any layer or group with all layers preserved to edit.
Zeplin
Paidby Zeplin Crew
Design tools are for designing. Zeplin is for clear, structured design delivery.