Vivid | Free React, Tailwind, TS, CSS Modules from Figma

About this plugin

Vivid cuts out redundant development work by letting designers own your UI while developers focus on functionality.

Designers submit their Figma designs through the Vivid plugin to automatically generate and maintain a UI library in their team’s codebase. With every new design submitted, Vivid will generate any new components necessary and create a pull request directly in GitHub.

Features

• Code Generation. Vivid generates React code using TypeScript and CSS modules from your Figma designs.
• Sandbox Preview. Preview the code Vivid generates in a shareable sandbox.
• Existing Component Support. Automatically link your implemented components from your codebase to the components available in your Figma asset library.
• GitHub Integration. Create a pull request for developers to review with the newly generated code.

Roadmap

• Responsiveness. Vivid will soon allow you to specify different screen sizes for larger designs so that the code you generate will automatically be responsive!
• Modularity. To prevent unnecessarily long code files, Vivid will automatically break its generated code into more manageable components and files
• CSS Frameworks. Tailwind and styled components support is coming soon!

Support

Reach out to [email protected] with any feedback, bugs, or support needs!

Join our Slack channel for product updates, to provide feedback, or just to chat!