EpipTwgen

Description

epip-twgen is a package that consists of two main components:

1. Local Chrome Extension: This extension, when installed in Figma, sends all variables to your predefined server.
2. Vite Plugin: This plugin fetches all Figma variables before starting the project and stores them in the tailwind.config.js file.

Installation and Setup

1. Install the Local Chrome Extension

First, ensure that you have installed the Chrome extension on your browser.

Next, you'll need to load the unpacked extension into Chrome. To do this, follow these steps:

1. Open the Chrome browser and navigate to the extensions page by entering chrome://extensions/ in the address bar.
2. Enable "Developer mode" by toggling the switch in the top right corner of the page.
3. Click the "Load unpacked" button that appears.
4. In the file dialog that opens, navigate to the following directory within your project: ./node_modules/epip-twgen/extension
5. Select the folder, and the extension will be loaded into Chrome.

Finally, open your Figma page in the Chrome browser to begin using the extension. This setup will allow the extension to interact with your Figma environment seamlessly, enabling the features provided by the epip-twgen package to function correctly.

2. Install the Vite Plugin

To install the Vite plugin, make sure Vite is already installed in your project. Then, add this plugin as a development dependency:

npm install epip-twgen --save-dev

1. Use in vite project:

    export default defineConfig({
        ...,
        plugins: [
            ...,
            EpipGenerateTailwindFromFigma({
                figmaPageKey: "FIGMA_FILE_KEY",
                tailwindThemeConfigUrl: "./tailwind-theme.config.ts",
                tailwindPluginConfigUrl: "./tailwind-plugin.config.ts",
                pathDestinationGenerateType: "" // todo ...
            }),
            ...
        ],
        ...
    })

2. Separate theme config and plugin config from tailwind.config.ts
   tailwind.config.ts

    /** @type {import('tailwindcss').Config} */
    import theme from "./tailwind-theme.config"
    import plugin from "./tailwind-plugin.config"
    export default {
        ...,
        theme, // *********** This logic must be improved
        plugins: [
            ...,
            plugin, // ********** This logic must be improved
            ...
        ]
    }

3. Create a new file named "tailwind-theme.config.ts".

4. Create a new file named "tailwind-plugin.config.ts"

5. Start the project and have fun! :)