ark-tailwind-codegen

About this plugin

This plugin is based on Parbez's figma-tailwindcss plugin

It 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 Github

How to use

1. Click the Open in... button and choose the file you want to use it in
2. Go 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 👌)
3. Select the layers you want to generate the class names for
4. Make sure you have the Inspect panel open on the right-hand side
5. Scroll down to the 'tailwindcss' section et voilà ✨

1. If you don’t see this section but instead see an Inspect layer properties button, click it and you should see that section appear
2. If 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` section

Todo

1. [ ] Import tailwind theme from @ark/theming
2. [ ] Custom typography classes
3. [ ] Convert layout variables to classes
4. [ ] Prettier?