Bricks is an open source tool for converting Figma designs into high-quality frontend code.
Check out our demo video!
- Make sure that you have installed Node.js and Yarn 1.
- Clone our VSCode extension.
- Run
yarn installin the repository's root directory. - Click on "Run" and select "Start Debugging" to start the VSCode extension in development mode.
- Click on "Activate Bricks" in VSCode's status bar in the right corner.
- Proceed to start the Figma plugin.
- Install Node.js and Yarn 1.
- Run
yarn installin the repository's root directory. - Right Click in Figma -> "Plugins" -> "Development" -> "Manage plugins in development"
- Click on "+" -> import plugin from manifest -> Select bricks/figma/dist/manifest.json file to import the plugin
- Click on "Run" and select "In-development version" to start the Figma plugin in development mode.
- After activating Bricks' VSCode extension, start selecting components and click on "Generate" button to start generating code.
- Install Node.js.
- Install both the VSCode extension and the Figma plugin.
- Click on "Activate Bricks" in VSCode's status bar in the right corner to activate the extension.
- In Figma, select components to convert to code.
- Click “Generate”.
- Done! The generated code shows up in VS Code, along with a live preview.
- You can tinker with the generated code, and see changes instantly in the preview
- When you’re happy with the code, just drop it into your codebase 👏
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.
- bricks-cloud/vscode: the VS Code extension for Bricks.
Distributed under the Apache 2.0 License and Bricks Enterprise License. See LICENSE for more information.
Email: [email protected]