Designer to Developer Handoff: How to Build a React Component from a Figma Design File

As we all know, part of a product developer's work is to convert the design from Figma into code with a framework of choice, and it can be complex if the project is significant. The essence of the designer-to-developer handoff is that the developer implements the screens from the design into exact and pixel-perfect components. 

In this article, we will extend the functionality of AWS Amplify Studio to build an application from Figma and import the components into React. The connection between Figma and React, with the help of Amplify, creates reusable React components that save you time and from writing long lines of code. The conversion process from Figma to code is seamless and makes it efficient for developers to build faster (which is probably why Abode acquired Figma for billions).

Prerequisites

To understand and complete this guide, the following are required:

• A Figma account. Sign-up is free
• Node >= 14.0.0 and npm >= 5.6 installed on our local machine for package installation
• A code editor
• Install the AWS Amplify CLI on our terminal. Run this command:

npm install -g @aws-amplify/cli

• Knowledge of JavaScript and React
• Have an AWS account. Register for an account here

Creating a Template UI Kit on Figma

Before we create the React components from the UI kit, we need to set up the Figma project. Once on Figma, go to the AWS community after creating an account and search for the AWS Amplify UI kit Figma file. 

Click on “Get a copy” to duplicate or clone a copy of the UI kit.

The Amplify UI kit comes installed with some pre-built pages, which are:

The Primitives page: This page binds to AWS Amplify Studio, which comprises all the styles for the pre-built components. Changing the content of this page will affect the look of the React UI library from the Figma components.

The My Components page: This page gives you control to edit, change, and create components, and it comes with pre-built components.

The Examples page: This page shows the example designs of some custom components from the My Components page.

This tutorial will use two components from the My Components page: the NavBar and FormCheckout UI.

Creating an Amplify Project 

With the setup complete in Figma, head to the AWS console to create a new Amplify project. Log in to your account, and search for AWS Amplify. 

Select AWS Amplify from the list of services. Once in the All Apps dashboard, click the New app button and select Build an app from the dropdown.

Give the app a name and click confirm deployment to create the app.

With the Amplify project deploying, let’s create a new React app.

Creating a React App

To scaffold a new React app, head over to your terminal and paste in the following command:

npx create-react-app no-code

This command unpacks all the files and folders necessary to build a beautiful and scalable web application.

Launch Amplify Studio

After installing our React app, now is time to launch the project. Click the launch studio to display the no code's staging.

Click the launch studio button as it takes you to the page showing the staging environment for no-code.

Here, we will be able to do lots of things like creating data models, authentication, and so on. But our focus will be on the UI library under the Design tab.

Click the Get started button.

Sync with Figma. This dialog box will allow you to paste the Figma file link from the My Components page.

If this is your first time doing this step, it may require authentication to access your Figma account.

Fetching Components from Figma

Accept all the changes of the pulled components from Figma.

We will be able to view all the UI components from the Figma file in Amplify Studio.

FormCheckout from Figma's imported components is the same as displayed in Amplify Studio.

Working with the Fetched Components in React

Now that we have the fetched UI components in Amplify Studio, we must have all the UI components in our React application. 

To connect our app with Amplify Studio, we need to pull the components into our source code using the Local setup instructions link and run the command from the project root folder.

Remember that for this command to work, install the AWS Amplify CLI globally, as stated in the prerequisites section.

Running the command will prompt our program with an authorization message. 

Click yes to grant permission to the React app. After, a series of prompts appear when pulling the components. Accept the default to the questions.

If you encounter challenges or any error log messages in the terminal, it will probably be that you haven’t configured AWS.

Check out this guide if you face this challenge.

The installation creates a new folder ui-components in the src directory, which contains all the pulled UI components from Amplify Studio.

Getting Started with the Amplify UI library

The Amplify UI React library is essential for the styling purposes of our app, which is similar to every other CSS utility library. 

Run this command: 

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

Styles

In the application's entry point, the index.js file, import the CSS file. Copy and update the index.js file with this code which is responsible for the look and feel of the app:

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import '@aws-amplify/ui-react/styles.css'; // add this

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Fonts

Amplify UI ships with the default fonts, Inter during installation of Amplify UI dependency. In the

public/index.html

<head>

// public/index.html

...
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:slnt,[email protected],100..900&display=swap"
  rel="stylesheet"
/>
</head>

...

Displaying the Components

To display the components FormCheckout and NavBar, navigate to the

src/App.js

Next, update the file with this code:

// src/App.js

import { FormCheckout, NavBar } from './ui-components';

const App = () => {
  return (
    <>
      <NavBar />
      <FormCheckout marginTop='5em' />
    </>
  );
}

export default App;

The margin-top property gives a top margin between the navbar and the checkout form. The CSS value is part of how to use styles from the Amplify UI in our components.

Start the Development Server

React comes with a hot-reload feature that refreshes itself every time there is an update on the file. 

Run this command: 

npm start

The development server runs on

http://localhost:3000

Want to deploy this React app to the web? Check out this resource that guides you step by step using AWS Amplify.

Conclusion

Low-code tools with zero to no code at all are what Amplify Studio offers. This tool makes working as a developer exciting, as part of our work has been done for us without building components from scratch or, better still, implementing screens from the designer. 

We can boldly say that the handoff from the designer to the developer is seamless.

This article taught us how to create and integrate our Figma components with the help of Amplify Studio and to connect the components to React components which function as a working app. 

The complete source code is in this GitHub repo.