Warning
Razorsharp has been merged into the Blade codebase. This repository is a view only archive. Go to the Blade codebase
Razorsharp is a Figma plugin that generates code for the Blade design system.
Do not expect this plugin to generate 100% production ready code. To get the most out of this plugin:
- Ask designers to always use Blade components in Figma
- Ask designers to use Auto Layout in Figma
- Generate code per design section instead of the whole page
For installation and usage instructions, please refer to the usage guide.
Work in progress
-
If you are developer, help by contributing to the codebase. Contributions can be bug fixes, support for new components, or documentation improvements.
-
If you are a designer, help by pointing out bugs, suggesting improvements, or by creating a logo/cover image for Figma 😅.
Create a new GitHub issue or tag @Burhan on #design-system on the Razorpay Slack workspace.
Please include the following information:
- The component that you are trying to generate code for
- Link to the Figma file
- Screenshot of the Figma file and the generated code
Will shortly be moving this to GitHub projects. This is a work in progress
| Component | Status |
|---|---|
| Button | ✅ Done |
| Link | ✅ Done |
| CheckboxGroup | ✅ Done |
| Checkbox | ✅ Done |
| Text | ✅ Done |
| Title | ✅ Done |
| Heading | ✅ Done |
| RadioGroup | ✅ Done |
| Radio | ✅ Done |
| Badge | ✅ Done |
| Alert | ✅ Done |
| TextInput | ✅ Done |
| Spinner | ✅ Done |
| TextArea | ✅ Done |
| PasswordInput | ✅ Done |
| Code | ✅ Done |
| OTPInput | ✅ Done |
| Counter | ✅ Done |
| IconButton | ✅ Done |
| Indicator | ✅ Done |
| Card | |
| ProgressBar | ✅ Done |
| List | |
| SelectInput | ✅ Done |
| Dropdown | |
| ActionList | |
| Layout | ✅ Done |
- The amazing Blade design system team for creating such a great and consistent design system that made it possible to build this
- @varunachar for the inspiration of the name for this plugin
Licensed under the MIT License. See the LICENSE file for details.