Christian Nwamba

Posted on Apr 7, 2022 • Edited on Apr 22, 2022

From Figma to Next.js App in Minutes

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 to React components with Amplify studio and use it in our application.

View the source code on Github

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.
Figma account, create a free account here.

Getting started

First, let's log in to AWS console or create an account here. Search for AWS Amplify from the search bar and select it from the list of services.

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

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

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

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 or create a free account here. In our Amplify Studio, click on Design and click on UI Library and follow the below steps.

Click on the Get started button and provide our Figma design URL. Or
Click on the "Duplicate Amplify design file" link to duplicate Amplify's Figma design.
Copy the duplicated Figma design URL, click on the Get started button, paste it and click the Continue button*.*

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

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

Setting up the Next.js application

Next.js 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:



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:



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.

Connecting our AWS Amplify app and Next.js app

Amplify Studio uses the Amplify UI library 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 with the following command:



npm install -g @aws-amplify/cli

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

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

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:



npm install @aws-amplify/ui-react

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



#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.



//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.

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.