https://github.com/bricks-cloud/bricks
Bricks is an open source tool for converting Figma designs into high-quality frontend code.
https://github.com/bricks-cloud/bricks
css design-to-code figma-plugin html react tailwindcss vscode-extension
Last synced: 3 months ago
JSON representation
Bricks is an open source tool for converting Figma designs into high-quality frontend code.
- Host: GitHub
- URL: https://github.com/bricks-cloud/bricks
- Owner: bricks-cloud
- License: apache-2.0
- Created: 2023-02-27T21:31:57.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-08T22:20:18.000Z (over 2 years ago)
- Last Synced: 2024-06-20T22:34:16.942Z (over 1 year ago)
- Topics: css, design-to-code, figma-plugin, html, react, tailwindcss, vscode-extension
- Language: TypeScript
- Homepage:
- Size: 2.67 MB
- Stars: 64
- Watchers: 5
- Forks: 5
- Open Issues: 33
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-ai-products - Bricks - Open-source Figma to code converter: (Design to Code / Design Conversion)
README
# **Bricks: Design to Code For Developers**
Bricks is an open source tool for converting Figma designs into high-quality frontend code.
Check out our [demo video](https://www.loom.com/share/1e7bf5792f6949cb83f2e181762fb2af)!
## Getting Started
### Development Version
#### **VSCode extension**:
1. Make sure that you have installed [Node.js](https://nodejs.org/en/) and [Yarn 1](https://classic.yarnpkg.com/en/docs/install).
2. Clone our [VSCode extension](https://github.com/bricks-cloud/d2c-vscode).
3. Run `yarn install` in the repository's root directory.
4. Click on "Run" and select "Start Debugging" to start the VSCode extension in development mode.
5. Click on "Activate Bricks" in VSCode's status bar in the right corner.
6. Proceed to start the Figma plugin.
#### **Figma plugin**:
1. Install [Node.js](https://nodejs.org/en/) and [Yarn 1](https://classic.yarnpkg.com/en/docs/install).
2. Run `yarn install` in the repository's root directory.
3. Right Click in Figma -> "Plugins" -> "Development" -> "Manage plugins in development"
4. Click on "+" -> import plugin from manifest -> Select bricks/figma/dist/manifest.json file to import the plugin
5. Click on "Run" and select "In-development version" to start the Figma plugin in development mode.
6. After activating Bricks' VSCode extension, start selecting components and click on "Generate" button to start generating code.
### Production Version
1. Install [Node.js](https://nodejs.org/en/).
2. Install both the [VSCode extension](https://marketplace.visualstudio.com/items?itemName=Bricks.d2c-vscode) and the [Figma plugin](https://www.figma.com/community/plugin/1178847414663679049/Bricks---Copilot-for-UI-Engineering).
3. Click on "Activate Bricks" in VSCode's status bar in the right corner to activate the extension.
4. In Figma, select components to convert to code.
5. Click “Generate”.
6. Done! The generated code shows up in VS Code, along with a live preview.
7. You can tinker with the generated code, and see changes instantly in the preview
8. When you’re happy with the code, just drop it into your codebase 👏
## Project Structure
Bricks is composed of a number of components. Below is a description of each component:
- `figma`: the Figma plugin for Bricks.
- `core`: the engine that converts Figma nodes into coding files.
## Related Projects
- [bricks-cloud/vscode](https://github.com/bricks-cloud/vscode): the VS Code extension for Bricks.
## License
Distributed under the Apache 2.0 License and Bricks Enterprise License. See `LICENSE` for more information.
## Get in Touch
Email: spike@bricks-tech.com