{"id":24374415,"url":"https://github.com/bricks-cloud/bricks","last_synced_at":"2026-01-16T23:19:29.321Z","repository":{"id":144286434,"uuid":"607379650","full_name":"bricks-cloud/bricks","owner":"bricks-cloud","description":"Bricks is an open source tool for converting Figma designs into high-quality frontend code.","archived":false,"fork":false,"pushed_at":"2023-08-08T22:20:18.000Z","size":2797,"stargazers_count":74,"open_issues_count":33,"forks_count":6,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-01-19T05:34:09.984Z","etag":null,"topics":["css","design-to-code","figma-plugin","html","react","tailwindcss","vscode-extension"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bricks-cloud.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-27T21:31:57.000Z","updated_at":"2024-12-29T09:37:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"fe96d065-623d-4390-ae7c-c5a0f266c3c4","html_url":"https://github.com/bricks-cloud/bricks","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bricks-cloud/bricks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bricks-cloud%2Fbricks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bricks-cloud%2Fbricks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bricks-cloud%2Fbricks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bricks-cloud%2Fbricks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bricks-cloud","download_url":"https://codeload.github.com/bricks-cloud/bricks/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bricks-cloud%2Fbricks/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28487586,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T22:54:02.790Z","status":"ssl_error","status_checked_at":"2026-01-16T22:50:10.344Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","design-to-code","figma-plugin","html","react","tailwindcss","vscode-extension"],"created_at":"2025-01-19T05:28:32.512Z","updated_at":"2026-01-16T23:19:29.297Z","avatar_url":"https://github.com/bricks-cloud.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"./assets/bricks-logo.png\" width=\"150\" /\u003e\n\u003c/p\u003e\n\n# **Bricks: Design to Code For Developers**\n\nBricks is an open source tool for converting Figma designs into high-quality frontend code.\n\n\u003cp align=\"center\"\u003e\n   \u003ca href='http://makeapullrequest.com'\u003e\u003cimg alt='PRs Welcome' src='https://img.shields.io/badge/PRs-welcome-43AF11.svg?style=shields'/\u003e\u003c/a\u003e\n   \u003ca href=\"https://github.com/bricks-cloud/bricks/stargazers\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/bricks-cloud/bricks?color=e4b442\" alt=\"Github Stars\"\u003e\u003c/a\u003e\n   \u003ca href=\"https://discord.gg/NM6aeBeqCD\"\u003e\u003cimg src=\"https://img.shields.io/badge/discord-bricks-blue?logo=discord\u0026labelColor=2EB67D\" alt=\"Join Bricks on Discord\"\u003e\u003c/a\u003e\n   \u003ca href=\"https://github.com/bricks-cloud/bricks/blob/main/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-Apache-red\" alt=\"License\"\u003e\u003c/a\u003e\n   \u003ca href=\"https://github.com/bricks-cloud/bricks/commits/main\"\u003e\u003cimg alt=\"GitHub commit activity\" src=\"https://img.shields.io/github/commit-activity/m/bricks-cloud/bricks?color=8b55e3\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nCheck out our [demo video](https://www.loom.com/share/1e7bf5792f6949cb83f2e181762fb2af)!\n\n## Getting Started\n\n### Development Version\n\n#### **VSCode extension**:\n\n1. Make sure that you have installed [Node.js](https://nodejs.org/en/) and [Yarn 1](https://classic.yarnpkg.com/en/docs/install).\n2. Clone our [VSCode extension](https://github.com/bricks-cloud/d2c-vscode).\n3. Run `yarn install` in the repository's root directory.\n4. Click on \"Run\" and select \"Start Debugging\" to start the VSCode extension in development mode.\n5. Click on \"Activate Bricks\" in VSCode's status bar in the right corner.\n6. Proceed to start the Figma plugin.\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"./assets/vscode-extension-activation.gif\" width=\"500\" /\u003e\n\u003c/p\u003e\n\n#### **Figma plugin**:\n\n1. Install [Node.js](https://nodejs.org/en/) and [Yarn 1](https://classic.yarnpkg.com/en/docs/install).\n2. Run `yarn install` in the repository's root directory.\n3. Right Click in Figma -\u003e \"Plugins\" -\u003e \"Development\" -\u003e \"Manage plugins in development\"\n4. Click on \"+\" -\u003e import plugin from manifest -\u003e Select bricks/figma/dist/manifest.json file to import the plugin\n5. Click on \"Run\" and select \"In-development version\" to start the Figma plugin in development mode.\n6. After activating Bricks' VSCode extension, start selecting components and click on \"Generate\" button to start generating code.\n\n### Production Version\n\n1. Install [Node.js](https://nodejs.org/en/).\n2. 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).\n3. Click on \"Activate Bricks\" in VSCode's status bar in the right corner to activate the extension.\n4. In Figma, select components to convert to code.\n5. Click “Generate”.\n6. Done! The generated code shows up in VS Code, along with a live preview.\n7. You can tinker with the generated code, and see changes instantly in the preview\n8. When you’re happy with the code, just drop it into your codebase 👏\n\n## Project Structure\n\nBricks is composed of a number of components. Below is a description of each component:\n\n- `figma`: the Figma plugin for Bricks.\n- `core`: the engine that converts Figma nodes into coding files.\n\n## Related Projects\n- [bricks-cloud/vscode](https://github.com/bricks-cloud/vscode): the VS Code extension for Bricks.\n\n\n## License\n\nDistributed under the Apache 2.0 License and Bricks Enterprise License. See `LICENSE` for more information.\n\n## Get in Touch\n\nEmail: spike@bricks-tech.com\n\n\u003ca href=\"https://discord.gg/NM6aeBeqCD\"\u003e\u003cimg src=\"https://img.shields.io/badge/discord-bricks-blue?logo=discord\u0026labelColor=2EB67D\" alt=\"Join Bricks on Discord\"\u003e\u003c/a\u003e\n","funding_links":[],"categories":["Design to Code"],"sub_categories":["Design Conversion"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbricks-cloud%2Fbricks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbricks-cloud%2Fbricks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbricks-cloud%2Fbricks/lists"}