CodeParrot is a developer first design to code tool. It uses AI to convert components from Figma files to production-ready code. Reuses existing components, libraries and coding standards to generate code which fits perfectly with your existing codebase. All without any prompting.
Learn how to get the CodeParrot plugin and start converting designs to code.
Open CodeParrot by clicking on CodeParrot Icon
You can login via Figma or Github. Logging In with Figma allows you to browse and select components from Figma files directly in Vscode
Share what your component looks like. You can use different methods to tell CodeParrot how your component looks.
Use Figma file
!!! You need to login via Figma for this feature !!!
If you logged in using Figma, click "select fom Figma file" in Component Builder. Submit your own Figma file or try CodeParrot using the provided sample file.
Now, select the component you want to create
Click on "Use Screenshot of Component". Upload the screenshot ( < 1 MB, png / jpeg / jpg ), you can also use this sample screenshot
Code Generation Settings
Click on the edit icon to change code generation settings.
Save code generation settings like React, Tailwind, Typescript. You can also specify additional rules for CodeParrot like "use material ui library" or "create functional components instead of class" etc.
For using custom components, checkout code generation settings
You would be able to preview the component in CodeParrot Panel. Click on Submit button to start generating code. Optionally, add additional instructions like "On mobile, navbar menu should collapse in a menu button"
Add Functionality by further prompting.
Create Login Modal
Create login form: "Clicking on login button should open a Modal with email, password and login button. "
Validate email: "Add validation for email in login form"
Add API call
Add an API call on login button: "Login button should make a POST API call to /login with email and password"
Your component is now ready! Copy paste code to respective files. Go through the next sections to get comfortable with using CodeParrot.