How to Convert Figma Components to React Components with Amplify

When building products, we usually start with the UX design then code them in our framework of choice. It gets tedious to convert the components to code especially if the project is large.

In this tutorial, I will show you how to leverage AWS Amplify functionality to make your conversion seamless. AWS Amplify offers us a simple integration with Figma and React, thereby taking responsibility of the work needed to convert Figma components to code.

You can watch a video that covers everything in this article:

Create a Figma Project from Template

Before we start creating a Figma project, we first need to set up an account. After creating your account with Figma, the next is to duplicate the AWS Amplify UI Kit for seamless integration with the AWS amplify.

To do that, head to the AWS Community page search bar and type AWS Amplify UI kit.

Click on the AWS Amplify UI Kit.

Click on the Duplicate button to clone the UI Kit.

After duplicating the UI Kit, We have some pre-built pages, some of which are

• The Primitives Page: This is where the binding of your component to your AWS Amplify Studio is done, you shouldn't touch this page as it will affect the integration with the React UI library that we will install later.
• The My Components Page: This is where we will be using our components. There are some pre-built components that we will be using for this tutorial.
• The Examples Page: This page has some example designs using the custom components from the My Components page.

Take note of the MarketPricing component in the My Components Page below as we will be using it for this tutorial.

Create an Amplify Project

After setting up our project in Figma, we will head to AWS console to create our Amplify project, make sure you have an account and you’re logged in.

Search for AWS Amplify on the search bar.

Select AWS Amplify from the list. After which you will click on the New app button to create your Amplify project.

Click Build an app from the dropdown and give the app a name.

You will be prompted with another page where you will specify the name of your project and click the confirm deployment button to create the App.

As our Amplify project is deploying we will head straight to setup a React or Next.Js project

Create a Next.js Project

Head to your terminal and navigate to your project directory then paste in the command below to create a next project.

npx create-next-app component-demo

Launch Amplify Studio

Now that we have setup our Next.Js project, lets head back to our AWS Amplify console and launch our project.

Click on the Launch Studio button to launch the project.

After launching our Amplify Studio, we can see some interesting features like data modeling, authentication, file storage, and some other interesting features to make a full-stack application.

For this tutorial, we will be focusing on the design section of the Studio.

Click on the UI library link under the design section:

Click on Get started button.

This is where it gets interesting. We will be prompted to provide our Figma project link so we can integrate with the Figma project.

Copy and paste the Figma URL and Amplify Studio would ask you for access to your Figma account.

Pull Components from Figma

Integration is seamless now that we have authorize access for Amplify studio. We will then accept all components pulled from the Figma project.

After confirming we will be able to view all our components in Amplify studio.

You can find the MarketingPricing component I asked you to keep an eye on at the beginning of the article.

Pull Components into Next.js Project

The next step is to pull the components to our Next.Js project. To do that click on the Local setup instructions link.

Run the command above in your Next.Js project directory to pull the components from Amplify Studio to your next.js project.

Before pulling the project make sure your installed the AWS Amplify cli globally. To do that run the following command: npm install -g @aws-amplify/cli

After pulling the project you will be prompted for authorization with an image below

Click yes to give access for the Next.Js to the AWS Amplify studio. You will also be prompted with some question when pulling the components.

Review Pulled Components

Checking the project directory you will notice a new folder created with the components pulled from the Amplify studio

The ui-components folder houses all the components pulled from the Amplify studio.

Install Amplify UI Library for React

After successfully pulling our Figma components from the Amplify studio, we will need to install the Amplify UI library for React. This allows us to effectively use the components.

To do that run the command below:

npm install @aws-amplify/ui-react

Start React App

Before starting our React app we will first import the Amplify css to our project. To do that navigate to pages/app.js file and paste the code below at the top of the page.

import '@aws-amplify/ui-react/styles.css'

Next, import the components to the index.js file. Navigate to pages/index.js file, remove all the code and paste the code below

import { MarketingPricing } from '../ui-components';

export default function Home(){
  return(
    <MarketingPricing/>
  )
}

Next, run the project with the following command:

npm run dev

Conclusion

Througout our this tutorial we have seen how fast it is to seamlessly integrate your Figma components into AWS Amplify as well as with a Next.js project. We did all these without having to write the code for any of the components. To learn about Amplify Studio, checkout the Amplify Studio docs.