Using Amplify UI Builder with your existing data
Published: 2022-04-28 13:25:29

AWS Amplify offers various features that include binding existing data to Figma design components with the Amplify studio.

In this post, we'll discuss how to add AWS Figma design components to a MongoDB data collection by building a mini ecommerce application with [Next.js](https://nextjs.org/).

Next.js is a React-based frontend development framework that supports server-side rendering and static site generation.

This post assumes that we are familiar with [MongoDB](https://www.mongodb.com/) and have at least a data collection in our account.


## Prerequisites 

The following are required in this post:


- Basic knowledge of JavaScript and React.js.
- Node.js and AWS CLI are installed on our computers.
- 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/).
- [MongoDB](https://www.mongodb.com/) account and a data collection.
## Getting Started

To create Amplify project, we've to log in to [the 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, search for AWS Amplify and select it from the list of services.

Next, click on the **New app** button and give a name to the application.


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


We’ll name our application **random-store-demo.** Click on **Confirm deployment** button to proceed.


![](https://paper-attachments.dropbox.com/s_DD1F932B2DAF461064AAD5157217312A69203FAFE9F866F4DBCDC612B0B33299_1649590341923_Screenshot+2022-04-10+at+12.31.55+PM.png)


Next, after the deployment process, click on **the Launch Studio** button. With that, we have completed setting up our project.


![](https://paper-attachments.dropbox.com/s_DD1F932B2DAF461064AAD5157217312A69203FAFE9F866F4DBCDC612B0B33299_1649590921591_Screenshot+2022-04-10+at+12.34.21+PM.png)




## Connect Amplify Figma Design Components

After launching the Studio, follow the below steps to connect Amplify Figma designs to our project:


- Click on **UI Library** and click on the **Get Started** button


![](https://paper-attachments.dropbox.com/s_DD1F932B2DAF461064AAD5157217312A69203FAFE9F866F4DBCDC612B0B33299_1649633028629_Screenshot+2022-04-11+at+12.08.16+AM.png)


Click on the **Use our Figma template** link, and this will open the Amplify's [UI Kit](https://www.figma.com/community/file/1047600760128127424) in our Figma account. 


![](https://paper-attachments.dropbox.com/s_DD1F932B2DAF461064AAD5157217312A69203FAFE9F866F4DBCDC612B0B33299_1649633442321_Screenshot+2022-04-11+at+12.10.09+AM.png)


Duplicate the UI Kit and make desired modifications in the component folder. This project will be using the **CardC** components; let's modify it a bit. 


![](https://paper-attachments.dropbox.com/s_DD1F932B2DAF461064AAD5157217312A69203FAFE9F866F4DBCDC612B0B33299_1649634379211_Screenshot+2022-04-11+at+12.45.42+AM.png)


We removed the star rating and aligned the price to the right.


- Copy the duplicated Figma file URL and paste it in the Studio like below:


![](https://paper-attachments.dropbox.com/s_DD1F932B2DAF461064AAD5157217312A69203FAFE9F866F4DBCDC612B0B33299_1649634923910_Screenshot+2022-04-11+at+12.54.57+AM.png)


Click on **Continue** to pull the components into Studio, then click on **Accept all** button to accept the elements.



## Binding Data to the UI Component 

After successfully importing Amplify Figma components, we'll proceed to bind the data to the **CardC** component.

In AWS studio, we can create a model and bind data to it, then bind these data to a component of our choice; but that's not our case in this project. 

In a nutshell, we'll be using Amplify's Figma design components to display the dataset we created somewhere else; in MongoDB.

From the UI Library, let’s choose the **CardC** component ****and then click **Configure.**


![](https://paper-attachments.dropbox.com/s_DD1F932B2DAF461064AAD5157217312A69203FAFE9F866F4DBCDC612B0B33299_1649636089651_Screenshot+2022-04-11+at+1.13.32+AM.png)


From a react.js background, we're adding prop names and the type of value we're expecting to the **CardC** elements.

Let's follow the below step to bind the data:


1. Let's create `productName`, `productImage`, `productPrice`, and `productInfo` and set their values to `string` in the component properties. 



![](https://paper-attachments.dropbox.com/s_DD1F932B2DAF461064AAD5157217312A69203FAFE9F866F4DBCDC612B0B33299_1649979782738_Screenshot+2022-04-15+at+12.42.33+AM.png)



2. In the Elements tree, select the **image**, and in the component properties set the image source to **productImage.**


3. In the Elements tree, let's select the first text from the **Main Text** group and set its label prop to **productName,** select the second and set it to **productInfo**, select the third text and set it to **productPrice.**


4. Select the button element and set its **label** prop to "Add to cart" the button won't do anything in this project.


![](https://paper-attachments.dropbox.com/s_DD1F932B2DAF461064AAD5157217312A69203FAFE9F866F4DBCDC612B0B33299_1649981456634_Screenshot+2022-04-15+at+1.09.37+AM.png)


Right at this moment AWS Amplify uses auto-generated properties to preview our component.


## Setting up and installations.

To create a new Next.js application, we'll run the following command in our terminal:


    npx create-next-app --example with-mongodb randomstore

The command above creates a Next.js application with MongoDB setup example in a folder called randomstore.

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


    cd randomstore # to navigate into the project directory
    npm run dev # to run the dev server

Next.js will start a development server at [http://localhost:3000](http://localhost:3000).


![](https://paper-attachments.dropbox.com/s_DD1F932B2DAF461064AAD5157217312A69203FAFE9F866F4DBCDC612B0B33299_1649986189325_Screenshot+2022-04-15+at+2.27.43+AM.png)


In the browser, we have an error; this is because we need to provide our MONGODB_URI in the `env.local` file.

We'll change the `env.local.example` to `env.local` and get the URI by clicking on the "connect" button in the MongoDB dashboard and following the prompts.

After setting up the `env.local` with our data collection user detail, we'll rerun the application with the below command:

```sh
npm run dev
```
In the browser, we should have the application up and running like below:


![](https://paper-attachments.dropbox.com/s_DD1F932B2DAF461064AAD5157217312A69203FAFE9F866F4DBCDC612B0B33299_1649987116208_Screenshot+2022-04-15+at+2.44.58+AM.png)


We can learn how to connect the Next.js application with MongoDB [here](https://www.mongodb.com/developer/how-to/nextjs-with-mongodb/).


## Pulling the Amplify app into our Next.js app

First, we'll install the [AWS CLI](https://docs.amplify.aws/cli/) if we don't have it already installed on our computer, with the below command:

```sh
npm install -g @aws-amplify/cli
```
Now, let's install the AWS javascript library that our components depend on.

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

Now, it's time to pull the AWS Amplify components and backend environment into our Next.js application. We'll head back to the Studio and copy the pull command:


![](https://paper-attachments.dropbox.com/s_DD1F932B2DAF461064AAD5157217312A69203FAFE9F866F4DBCDC612B0B33299_1649671304260_Screenshot+2022-04-11+at+11.01.03+AM.png)


Next, in our terminal let’s us run the Amplify pull command and follow the prompts.


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


The steps above create a few folders inside the Next.js application, including the **ui-components,**  where all our components are.


## Binding MongoDB data to AWS Figma UI components

After pulling our application from Amplify studio, we'll use the UI components to display our MongoDB data.

Now, in the `index.js` file, let's import **CardC** from the `ui-components` folder and render it:

```js
//pages/index.js
import Head from "next/head";
import clientPromise from "../lib/mongodb";
import { connectToDatabase } from "../utils/mogodb";
import { CardC } from "../ui-components";
    
export async function getServerSideProps(context) {
  try {
    await clientPromise;
    
    const { db } = await connectToDatabase();
    const productCollection = await db
      .collection("products")
      .find({})
      .toArray();
    
    return {
      props: { products: JSON.parse(JSON.stringify(productCollection)) },
    };
  } catch (e) {
    console.error(e);
  }
}
    
export default function Home({ products }) {
  return (
    <div className="container">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
    
      <main>
        {products.map((product) => (
          <div key={product._id}>
            <CardC
              productName={product.title}
              productImage={product.image}
              productPrice={`$${product.price}`}
              productInfo={product.descrp}
            />
          </div>
        ))}
      </main>
    
      <style jsx>{`
        .container {
          min-height: 100vh;
          padding: 0 0.5rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
    
        main {
          margin: 5rem 0 2rem 0;
          width: 70vw;
          max-width: 1170px;
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
          grid-column-gap: 3rem;
          grid-row-gap: 3rem;
        }
      `}</style>
    
      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
            Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
            sans-serif;
        }
    
        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  );
}
```
The above snippets do the following:


- imports **connectToDatabase** from utils folder and **CardC** from ui-components folder.


- utilizes Next.js server-side-rendering functionality with the **getServerSideProps** function. The function fetches our products from MongoDB once the pages loads and send them to the Next.js component.


- The **Home** function receives the product as props, loops through it, and uses the CardC component to display it in the front end.


- In the CardC component, we assigned product properties to corresponding CardC prop names; we configured them in the studio.

Next, we'll create  **_app.js** inside the **pages** folder with the following snippets:


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

We imported `**@aws-amplify/ui-react/styles.css**` and `**AmplifyProvider**` in the above snippets. 

We used `AmplifyProvider` at the top of our return so that child components will inherit AWS Amplify styles. 

In the browser, we should have our Next.js application looking like we expected:



![](https://paper-attachments.dropbox.com/s_DD1F932B2DAF461064AAD5157217312A69203FAFE9F866F4DBCDC612B0B33299_1649995725177_awss-store.gif)



## Conclusion

This post discussed how to bind existing Amplify data with Figma designs components and use it in a Next.js application. 

## 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)
- [Connect Next.js with MongoDB](https://www.mongodb.com/developer/how-to/nextjs-with-mongodb/)