# Quick Start

Speed up UI Development using CodeParrot AI.

# 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 choose the Framework.

Edit Code Generation Settings
Edit Code Generation Settings

For now, just choose your framework like React / React Native / Flutter etc and language. Save the settings. Checkout Code Generation Settings later for details on how to generate better results using additional settings.

Code Generation Settings
Code Generation Settings

# Reuse Components

To reuse existing components or styling classes, write "Use Component Name" like "Use MUI table". For custom components or style files write "Use @filename"

Reuse Components
Reuse Components

# Generate Code

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

Preview
Preview

Code Blocks
Code Blocks

Iterate over the code, by further prompting till your component is ready. Copy paste code to your project.

# Vector Assets

Vector assets (svg) are automatically downloaded and imported in your code. You can see the path and 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.