# Quick Start

Learn how to get the CodeParrot plugin and speed up Frontend Development.

# Install VS code plugin

Install CodeParrot plugin from VS Code marketplace

# Login

You can login via Figma or Github. Logging In with Figma allows you to browse and select components from Figma files directly in Vscode

Selecting components from Figma File
Selecting components from Figma File

# Build UI using Figma Designs

Click "Select fom Figma" button in CodeParrot Panel. Copy and submit this Figma Design sample link.

Select fom Figma
Select fom Figma

You would be able to see the preview of the component. See selecting components from Figma File to add your own figma component

# Code Generation Settings

Click on the settings icon to change code generation settings.

Edit Code Generation Settings
Edit Code Generation Settings

You can specify settings like React, Tailwind, Typescript and also set additional rules for CodeParrot like "use material ui library" or "create functional components instead of class" etc. Save the settings.

Code Generation Settings
Code Generation Settings

See Code Generation Settings for more details.

# Generate Code

Preview
Preview

You would be able to preview the component in CodeParrot Panel. Click on Submit icon to start generating code.

Code Blocks
Code Blocks

Iterate over the code, by further prompting till your component is ready. Example prompts

  • use flex instead of grid
  • on mobile, collapse the navbar into a menu

Copy paste code to your project. Go through the next sections to get comfortable with using CodeParrot.

# Vector Assets

Vector assets (svg) are automatically downloaded and imported in your code. The assets are downloaded in the "assets" folder in the root directory of your project. You can see the status of download in the notification.

Assets Download
Assets Download

# Large Figma Components

Very large figma selections like multiple pages will generate inaccurate results. Check selecting Figma components for more.

Now checkout build entire pages section to go from building individual components to full pages