If you develop apps with React Native, you probably know how time-consuming it can be to manually convert designs into React Native code. What if you could streamline your Figma to React Native workflow in just a few minutes? In this article, I'll be introducing you to CodeParrot a VSCode extension that was made just for that. We'll be building a twitter clone as an example.

What is CodeParrot?

CodeParrot is a VSCode extension that helps you convert designs to production-ready code. It assists you in creating beautiful UI components in React, React Native, Flutter, Angular, Vue and many more. Whether you're working on Figma to React projects or other frameworks, it's a great tool for developers who want to save time and focus on building their applications.

Why use CodeParrot?

• Speed: Ship your projects faster by converting designs to code in minutes.

• Accuracy: Get pixel-perfect code that matches your designs.

• Customization: Customize your components to match your design system.

• Enhance existing code: Use CodeParrot to enhance your existing codebase.

Installation

CodeParrot is available as a VSCode extension. You can install it from the VSCode marketplace.

Detailed Steps

• Open VSCode and go to the Extensions view by clicking on the square icon in the sidebar.

• Open VS Code on your system.

• Navigate to the Extensions tab on the sidebar (or use Ctrl+Shift+X (Cmd+Shift+X) to open it).

• In the search bar, type CodeParrot and hit Enter.

• Once you find the CodeParrot extension, click Install.

Once installed, you should see the CodeParrot icon in the sidebar, go ahead and create an account to start using the extension.

CodeParrot in Action

In this article I'll be using the following Figma design to demonstrate how CodeParrot works, showcasing how we can almost instantly generate a fully functional Twitter clone application in React Native.

Here's a link to the Figma file: Twitter Clone

How does CodeParrot work with Figma?

Once you Sign In, you'll see an option to "Select from Figma" in the CodeParrot extension UI. Click on it and you'll be prompted to enter the link of your Figma Selection.

What's a Figma Selection?

A Figma Selection is a group of layers in your Figma design that you want to convert to code. You can select a group of layers in Figma and copy the link to that selection. This link can then be used in CodeParrot to convert the selected layers to code.

Here's how you can copy the link to a Figma Selection:

• Open your Figma design.
• Select the layers you want to convert to code.
• Right-click on the selected layers and click on "Copy link to selection".

Once processed, you'll see your component loaded in CodeParrot.

Specifying coding standards

CodeParrot allows you to specify coding standards for your components. You can choose the coding style, naming conventions, and other settings for your components, ensuring consistency in your Figma to React workflow and beyond.

There is also a menu to select the framework/language to be used for the code generation. You can choose from React, React Native, Flutter, Angular, Vue, and many more. You can choose between JavaScript and TypeScript as well.

You can add these by clicking on the settings Icon just above the input field for the conversation with CodeParrot.

Here I am using React Native as the framework and TypeScript as the language.

Generating code

Once you've specified the coding standards, you can add more context or customizations in the given input field and click the Submit button to generate the code. This process works seamlessly for various design-to-code scenarios, including Figma to React conversions.

For our Twitter clone project, we'll start by creating the core components that make up the user interface.

I have created the Tweet component using CodeParrot as shown here It gave me a Tweet.tsx file.

Specifying libraries to use and referencing files

In the coding standards, you can also specify the libraries you want to use in your component. For example, you can specify if you want to use react-native-svg for the icons in the component or anything else for that matter.

In the coding standards you can further specify how you want your imports to be added. In our case, to make our lives easier we will specify a correct path for svg imports which will be ../../assets.
So I can specify that and it will be taken care of for the next generated components.

We will be creating the Twitter Home Screen component where we will be mapping over some Tweets from the Tweet component we made earlier. This is possible by specifying the files you want to refer to by using the @ symbol followed by the file name.

In our case we will be referring to the Tweet component we made earlier as shown here:

Let's save and generate the code for the Twitter Home Screen component.

Here is the generated Twitter Home Screen` component:

You can further modify the component by specifying the exact styling you want to do or any other customization you want to do by just doing it manually or specifying it in the input field which will be taken care of by CodeParrot.

Creating the Search screen component

In this part of the blog, we'll be creating the Twitter Search Screen component from the design. I'll just select the component as a whole, copy it as a "Link to selection" and paste it in CodeParrot.

After specifying the coding standards, I can generate the code for the Twitter Search Screen component.

Here is the generated Twitter Search Screen component:

Creating the Twitter Lists component

Creating the Twitter Lists component is similar to creating the Twitter Search Screen component. I'll just select the component as a whole, copy it as a "Link to selection" and paste it in CodeParrot.

After specifying the coding standards, I can generate the code for the Twitter Lists component.

Here is the generated Twitter Lists component:

Here as we can see, the lists heading is a bit off, we can fix it by just doing it manually or by specifying it in the input field which will be taken care of by CodeParrot.

CodeParrot gives us almost 80% of the styling correct, we can further tweak it to make it look exactly like the design.

Conclusion

CodeParrot is an amazing tool that can help you save a lot of time when working with Figma designs, especially for projects like building a Twitter clone.

If you want to learn more about CodeParrot, you can do so by visiting the CodeParrot website. You can also check out the CodeParrot documentation for more information on how to use the extension.