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 installed on our local machine for package installation Node >= 14.0.0 and npm >= 5.6 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 after creating an account and search for . AWS community 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: : 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 Primitives page : This page gives you control to edit, change, and create components, and it comes with pre-built components. The My Components page : This page shows the example designs of some custom components from the My Components page. The Examples page This tutorial will use two components from the My Components page: the and UI. NavBar FormCheckout 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 , and search for AWS Amplify. account Select AWS Amplify from the list of services. Once in the dashboard, click the button and select from the dropdown. All Apps New app Build an app 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. from Figma's imported components is the same as displayed in Amplify Studio. FormCheckout 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 if you face this challenge. this guide The installation creates a new folder in the directory, which contains all the pulled UI components from Amplify Studio. ui-components src 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: root.render( ); // 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' )); < React.StrictMode > < App /> </ React.StrictMode > Fonts Amplify UI ships with the default fonts, during installation of Amplify UI dependency. In the file, copy and paste the following Google fonts CDN links in the element: Inter public/index.html <head> ...
<head> </head>

... // public/index.html < 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,wght@-10..0,100..900&display=swap" rel = "stylesheet" /> Displaying the Components To display the components and , navigate to the file and remove all the code. FormCheckout NavBar 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 that guides you step by step using AWS Amplify. this resource 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

This story contains new, firsthand information uncovered by the writer.

Amazon

Google

Personal Online Security: How to Stay Safe Online

Web Automation with Python and Selenium

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - Remote Work Warrior

Nominated for 2022 - No No No Nodejs

Too Long; Didn't Read

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

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

2021: Reviewing and Kaizen-ing My Programming and Writing Life

10 Lessons from 10 Years of AWS (part 2)

10 Lessons from 10 Years of AWS (part 1)

Top 10 AI Development Companies in USA

12 Strategies to Reduce Amazon S3 Costs

2021: Reviewing and Kaizen-ing My Programming and Writing Life

10 Lessons from 10 Years of AWS (part 2)

10 Lessons from 10 Years of AWS (part 1)

Top 10 AI Development Companies in USA

12 Strategies to Reduce Amazon S3 Costs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps