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!

Getting Started

Make sure that you have installed Node.js and Yarn 1.
Clone our VSCode extension.
Run yarn install in 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 install in 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:

Distributed under the Apache 2.0 License and Bricks Enterprise License. See LICENSE for more information.

Name		Name	Last commit message	Last commit date
Latest commit History 128 Commits
.github		.github
assets		assets
core		core
docs		docs
figma		figma
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc.json		.prettierrc.json
LICENSE		LICENSE
README.md		README.md
package.json		package.json
yarn.lock		yarn.lock