Current Support
The plugin currently only supports generating React TSX components with Tailwind CSS installed and configured. Your project must have Tailwind CSS set up before using the generated components. More output formats and configurations will be supported in the future, including the ability to load custom formatting configurations.
Prerequisites
- • A Figma account
- • A TypeScript project (for integrating generated components)
- • Tailwind CSS installed and configured in your project
Getting Started with the Plugin
Open the plugin in Figma
Visit the plugin page on Figma Community and click "Try it out" to open the plugin directly in Figma:
Open PluginLog in with Google
When the plugin opens, follow the on-screen instructions to log in with your Google account. No installation or setup required.
Setting Up Your Project
1. Install the React Package
To use the generated components in your React project,
install the
@figmint/react package:
npm install @figmint/react # or yarn add @figmint/react
Note: This package requires React 17+ as a peer dependency.
2. Create a Project
1. In the plugin, create a new project
2. Install the GitHub App: Click the Install App button to give read/write access to the GitHub app for your repository
3. Choose Repository: Select the repository where you want to sync generated components
4. Choose Component Destination Folder: Select the folder path in your repository where components will be generated
Note: Currently, every Figma file is associated with one project, and every project is associated with one file.
3. Verify Project Creation
Once the project is created, it will appear in the projects list with a "current file" badge, indicating that the project is now associated with your current Figma file.
Next Steps
Once installation is complete, see the usage guide for detailed instructions on:
- • Using generated components
- • Working with elementProps
- • Handling component variants
- • Customizing generated code
Support
For issues or questions:
Support: support@figmint.dev - For technical support and troubleshooting
General Inquiries: hello@figmint.dev - For general questions and inquiries