From Figma to Next.js App in Minutes
Published: 2022-04-07 13:49:20


{% embed https://www.youtube.com/watch?v=K4fuBEXkWPk&ab_channel=ChristianNwamba %}

## Introduction

AWS Amplify is a set of purpose-built tools and features that lets front-end web and mobile developers quickly and easily build full-stack applications on AWS. 

In this post, we'll convert [Figma components](https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-Components-in-Figma) to [React components](https://reactjs.org/docs/components-and-props.html) with Amplify studio and use it in our application.


View the source code on [Github](https://github.com/Kizmelvin/aws-amplify-figmatocode)


## Prerequisites 

The following are required to follow along in this post:


- Basic knowledge of JavaScript and React.js.
- Node.js is installed on our computer.
- Fair understanding of Next.js but not required.
- AWS Amplify account; create one [here](https://portal.aws.amazon.com/gp/aws/developer/registration/index.html?nc1=f_ct&src=default).
- Figma account, create a free account [here](https://www.figma.com/).


## Getting started 

First, let's log in to [AWS](https://signin.aws.amazon.com/signin?redirect_uri=https%3A%2F%2Fconsole.aws.amazon.com%2Fconsole%2Fhome%3Ffromtb%3Dtrue%26hashArgs%3D%2523%26isauthcode%3Dtrue%26nc2%3Dh_ct%26src%3Dheader-signin%26state%3DhashArgsFromTB_us-west-2_6e278d73bcc5ae1c&client_id=arn%3Aaws%3Asignin%3A%3A%3Aconsole%2Fcanvas&forceMobileApp=0&code_challenge=PgNDA_jabFgNlsf536dB-Iv28VbObJsEl1xOr_0-4nE&code_challenge_method=SHA-256) console or create an account [here](https://portal.aws.amazon.com/gp/aws/developer/registration/index.html?nc1=f_ct&src=default). Search for AWS Amplify from the search bar and select it from the list of services.


![](https://paper-attachments.dropbox.com/s_4933ADAFE325C9F5A64FCB18D292775A14E417CC933C1DC74756C0692D222949_1649283115087_Screenshot+2022-04-06+at+11.11.03+PM.png)


Next, we'll click on the **New app** button.


![](https://paper-attachments.dropbox.com/s_4933ADAFE325C9F5A64FCB18D292775A14E417CC933C1DC74756C0692D222949_1649282402294_Screenshot+2022-04-06+at+10.58.06+PM.png)


For this post, we'll name our app `**figmatoreact-demo**`**,** then click on the **Confirm deployment** button. 


![](https://paper-attachments.dropbox.com/s_4933ADAFE325C9F5A64FCB18D292775A14E417CC933C1DC74756C0692D222949_1649282463751_Screenshot+2022-04-06+at+10.57.22+PM.png)


Once the deployment process completes, click on the **Launch studio** button to launch a staging studio where we'll build our app.


![](https://paper-attachments.dropbox.com/s_4933ADAFE325C9F5A64FCB18D292775A14E417CC933C1DC74756C0692D222949_1649282615665_Screenshot+2022-04-06+at+11.02.55+PM.png)

## Connecting Figma

The standard web or mobile app development method entails UX and UI designers building design mockups. Then the developers manually build these designs with code.

AWS Amplify drastically reduce this workload; with AWS amplify, we can generate the codes by importing the designs to the AWS amplify console and then pulling and importing them as components into our projects.

To convert Figma designs to React components with AWS Amplify:

Login to [Figma](https://www.figma.com/) or create a free account [here](https://www.figma.com/signup). In our Amplify Studio, click on **Design** and click on **UI Library** and follow the below steps.


1. Click on the Get started button and provide our Figma design URL. Or
2. Click on the "**Duplicate Amplify design file"** link to duplicate [Amplify's Figma design.](https://www.figma.com/community/file/1047600760128127424)
3. Copy the duplicated Figma design URL, click on the **Get started** button, paste it and click the **Continue** button**.** 


![](https://paper-attachments.dropbox.com/s_4933ADAFE325C9F5A64FCB18D292775A14E417CC933C1DC74756C0692D222949_1649267569986_Screenshot+2022-03-28+at+3.19.17.png)



1. Figma will seek authorization if it's our first time. Click the **Allow access** button to give permission.
2. AWS Amplify will fetch the design from Figma. Afterward, click on the **Accept all** button at the top-right corner.


![](https://paper-attachments.dropbox.com/s_4933ADAFE325C9F5A64FCB18D292775A14E417CC933C1DC74756C0692D222949_1648491925276_Screenshot+2022-03-28+at+7.23.21+PM.png)


We've successfully imported and converted the Figma design to components for the `**figmatoreact-demo**` app.


## Setting up the Next.js application

[Next.js](https://nextjs.org/) is an open-source React-based front-end development web framework that allows server-side rendering and the generation of static websites and applications.

To bootstrap a new Next.js application, let's run the following commands in our terminal:


```sh
npx create-next-app <project-name>
```

After creating the application, we'll navigate into the project directory and start the application with the following commands:


```sh 
cd <project-name> # to navigate into the project directory 
npm run dev # to run the dev server
```

Next.js will start a development environment accessible by default at [http://localhost:3000](http://localhost:3000).


![](https://paper-attachments.dropbox.com/s_4933ADAFE325C9F5A64FCB18D292775A14E417CC933C1DC74756C0692D222949_1649269924623_Screenshot+2022-03-18+at+11.57.0.png)



## Connecting our AWS Amplify app and Next.js app

Amplify Studio uses the [Amplify UI library](https://ui.docs.amplify.aws/) to offer dozens of fully customizable components within Figma and imported into Studio as React components.

To connect our AWS amplify app, we need to install the [Amplify CLI](https://docs.amplify.aws/cli/) with the following command:


```sh
npm install -g @aws-amplify/cli
```

  
Next, we click on the "**local setup instructions**" in our studio dashboard and copy the CLI command.


![](https://paper-attachments.dropbox.com/s_4933ADAFE325C9F5A64FCB18D292775A14E417CC933C1DC74756C0692D222949_1649269640713_Screenshot+2022-03-28+at+11.19.4.png)


Next, we run the copied command and follow the prompts below to pull the AWS backend environment down to the Next.js application.


![](https://paper-attachments.dropbox.com/s_4933ADAFE325C9F5A64FCB18D292775A14E417CC933C1DC74756C0692D222949_1648984690604_carbon+2.png)


We successfully pulled the AWS backend environment and components.

AWS added three folders in our Next.js application.


- `**/vscode**` ****this houses some AWS to VSCode configurations


- `**/amplify**` this contains AWS backend configurations.


- `**/ui-components**` this is the most important for our project. It contains all of our converted Figma designs/components 


## Using the converted Figma designs in the Next.js application

Before we start doing that, we have to install a UI library that the AWS components depend on; let's run the following command:


```sh
npm install @aws-amplify/ui-react 
```

Next, let's import some components from `/ui-components` and render them inside the `index.js` file.


```js 
#pages/index.js 
import Head from "next/head";
import styles from "../styles/Home.module.css";
import {
  NavBar,
  HeroLayout3,
  MarketingPricing,
  ContactUs,
} from "../ui-components";

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Figma-to-code</title>
      </Head>
      <NavBar />
      <HeroLayout3 />
      <MarketingPricing />
      <ContactUs />
    </div>
  );
}   
```

Next, we’ll import AWS styles in our top-most component, in our case in the  `_app.js`.


```js 
//pages/_app.js 
import "../styles/globals.css";
import "@aws-amplify/ui-react/styles.css";
    
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;
```

Over in the browser, our application should have a landing page with Next.js components that are similar to the Figma design.


![](https://paper-attachments.dropbox.com/s_4933ADAFE325C9F5A64FCB18D292775A14E417CC933C1DC74756C0692D222949_1649270816767_ezgif.com-gif-maker+2.gif)


Since many software teams adopt the low-code tool, Amplify studio is one to consider. It significantly reduces the manual development work involved in building an application interface. 

At the same time, it enables developers to customize the code of the user interfaces they create extensively.


## Conclusion

This post discussed how to convert Figma designs to React.js components using AWS Amplify studio.

## Resources

These resources might be helpful:


- [Amplify studio](https://docs.amplify.aws/console/)
- [Figma components](https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-Components-in-Figma)
- [React components](https://reactjs.org/docs/components-and-props.html)