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.

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 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.
Figma account, create a free account here.
MongoDB account and a data collection. ## Getting Started

To create Amplify project, we've to log in to the AWS 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.

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

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

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

Click on the Use our Figma template link, and this will open the Amplify's UI Kit in our Figma account.

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.

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:

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.

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:

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

In the Elements tree, select the image, and in the component properties set the image source to productImage.
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.
Select the button element and set its label prop to "Add to cart" the button won't do anything in this project.

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.

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:

npm run dev

In the browser, we should have the application up and running like below:

We can learn how to connect the Next.js application with MongoDB here.

Pulling the Amplify app into our Next.js app

First, we'll install the AWS CLI if we don't have it already installed on our computer, with the below command:

npm install -g @aws-amplify/cli

Now, let's install the AWS javascript library that our components depend on.

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:

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

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:

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

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

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:

Using Amplify UI Builder with your existing data