Bricks - AI Powered Design to TailwindCSS Code

About this plugin

Bricks is an open source design to code tool built by developers for developers. Here is a video demo of how Bricks works.

AI Powered Design To Code

Here is how Bricks is different from other design to code tools.

• 🛎️ Bricks is only a button click. There is beauty in simplicity.
• ☁️ No need to install anything. Bricks let you develop in the cloud.
• 🤝 Share generated code with stake holder for instant feedbacks and collaborations.
• 🧠 Decent code aided by AI that knows how to use for loops and
• 📚 Open source

Getting started

1. Install Bricks Figma plugin
2. Click "Generate Code" button
3. Preview and develop code in browser
4. Share with others

If you want integration with your IDE

Install our VSCode extension:

1. Install Node.js if you haven't already.
2. Install both the VS Code extension and the Figma plugin.
3. Open any folder in VS Code. Bricks won't work if you don't have anything open.
4. Click on "Activate Bricks" in VSCode's status bar in the right corner to activate the plugin.
5. In Figma, select components to convert to code.
6. Click “Generate”.
7. Done! The generated code shows up in VS Code, along with a live preview👏

 👩‍💻Supported frameworks:

• React

 🧑‍💻Supported UI libraries:

• TailwindCSS
• CSS

 👨‍💻Supported Languages:

• HTML
• Javascript
• Typescript

Your feedbacks are incredibly valuable to us. If you like what we are doing, smash the like button or gift us a star on our Github repository. If you feel there are missing features, you can open up an Github issue or contact us at our Discord server.

If you are passionate about frontend technologies, writing recursive functions, and working with abstract syntax tree, you are definitely suited to becoming a Bricks open source contributor. Email me if you are interested in collaborating on this project.