AWS Amplify Studio — Figma Designs To React UI Components

Photo by Hal Gatewood on Unsplash

Amplify Studio (Formerly Called Amplify Admin UI)

At the last AWS re-invent, Amazon announced Amplify Studio, which introduced UI Library (public preview). With UI Library, you can convert Figma Designs into React UI components code. Figma is a web-based collaborative design and prototyping tool that has taken the design world by storm.

Some Pre-Built UI Components which you could use as a starter.

Install And Configure The AWS Amplify CLI

To start using AWS Amplify, you first need an AWS account. If you do not have one already, create one first. There are no upfront costs, and signing up gives you access to the AWS Free Tier for the first 12 months.

  • API (REST- or GraphQl-based) [API Gateway / AppSync]
  • Data [DynamboDB]
  • Authentication [Cognito]
  • Storage [S3]
  • Functions [Lambda]
  • Geo [Amazon Location Service]
  • Hosting [Cloudfront / S3]
  • Analytics [Kinesis / Pinpoint]
  • Predictions [Rekognition, Translate, Polly, Transcribe, Comprehend, Textract, SageMaker]
  • Interactions [Lex]
  • Notifications [Pinpoint]
$ npm install -g @aws-amplify/cli
$ amplify -v
7.6.5
$ amplify configure
Create a new IAM user and give programmatic access.
Give the new user the needed permissions.
Enter the access key of the newly created user:
? accessKeyId: # YOUR_ACCESS_KEY_ID
? secretAccessKey: # YOUR_SECRET_ACCESS_KEY
This would update/create the AWS Profile in your local machine
? Profile Name: # (default)
Successfully set up the new user.

Create React App And Initialize Amplify

The quickest and easiest way to set up a new Amplify React project is probably using npx, and the package Create React App. You will need Node.js ≥ 14.0.0, and npm ≥ 5.6 installed on your machine.

$ npx create-react-app amplify-app-react
$ cd amplify-react-app
$ npm install aws-amplify @aws-amplify/ui-react
$ npm start
Boilerplate React app runs per default on port 3000.
$ amplify init
? Enter a name for the project amplifyappreactThe following configuration will be applied:Project information
| Name: amplifyappreact
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm.cmd run-script build
| Start Command: npm.cmd run-script start
? Initialize the project with the above configuration? YesUsing default provider awscloudformation
? Select the authentication method you want to use: AWS profile
? Please choose the profile you want to use
> default
....
√ Initialized provider successfully.
Initialized your environment successfully.
Your project has been successfully initialized and connected to the cloud!
$ amplify console
? Which site do you want to open? ...
> Amplify Studio
AWS console

Create The Data Model

To continue, we first have to create a data model within Amplify Studio.

The Backend of the Amplify Studio.
First, we create the model for the items we want to sell and specify who could have access to it.

Adding Dummy Content

Now that we have our data model, we want to add some data. Choose the Content Section within Amplify Studio and add some example content into the table Item.

Importing Figma Designs Into Amplify UI Library

We use the provided Amplify Figma template and import it into the UI Library to speed up things. Note that you need a free Figma account for this. Of course, you can import your own Figma designs as well. Choose the menu UI Library within the Amplify Studio and press the Get Started button. In the next dialog, paste in the corresponding Figma file URL. If you want to use the provided Amplify Figma template, follow the link Use our Figma template and duplicate it into your Figma account.

Click the Duplicate-button in the upper right corner to continue the import process.
Within the Figma web-based UI, you can change the duplicated Amplify UI components as you like. Note down the Figma URL.
Just enter the Figma file link URL, either the duplicated Amplify UI template or your own Figma design.
The final step before the Figma components are imported into the UI Library.

Connect UI Components To Data

Once the import process has finished you will see all the newly added components in your UI Library. Now we are ready to link properties of a particular UI component in your component library to the corresponding data field of your data model.

Select a component that you want to link to the data model and press the Configure button.
Linking our data model fields with the UI elements. Note that the data shown in the preview image is not the data we added as dummy data in our Item table — probably a bug?!
Creating a Collection shows our dummy content in the preview correctly. Now we are ready to embed this collection as a React UI component into our React app.

Embed The Amplify UI Component

To embed the above-defined Collection into our React app we just need to perform the following steps:

  1. Configure the React App to use Amplify (index.js)
import Amplify from 'aws-amplify';
import "@aws-amplify/ui-react/styles.css";
import {AmplifyProvider} from "@aws-amplify/ui-react";
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
ReactDOM.render(
<React.StrictMode>
<AmplifyProvider>
<App />
</AmplifyProvider>
</React.StrictMode>,
document.getElementById('root')
);
amplify pull — appId <YOUR-AMPLIFY-APP-ID> — envName dev
All generated React UI Components are now available for import.
import './App.css';
import { CardBCollection } from './ui-components';
function App() {
return (
<div class="my-app" className="App">
<CardBCollection />
</div>
);
}
export default App;
Et voilà — the generated React UI component shows the content of our Item table.

Amplify Prices

If you decide to use Amplify for your next unicorn startup the price for using this AWS service probably does not matter at all. ;-) For all the others Amplify charges you for the services used in the background. Because Amplify is using managed serverless AWS services like Lambda, S3, DynamoDB, API Gateway you only pay for their usage and you do not have to manage any servers by yourself at all. In addition to the price you have to pay for the used AWS services Amplify charges you for your app's build time and hosting. If you want to make your own price calculations use the AWS Pricing Calculator.

Conclusion

Amplify is great in supporting you to quickly build a full-stack app without worrying about the needed backend infrastructure. The whole backend infrastructure which gets generated is serverless — so you do not have to worry about server updating, patching security issues, etc. The new possibility to convert Figma designs directly into React UI components makes the front-end developers' life even better. Using the Figma community and the existing amount of free available UI widgets a developer can quickly build up a great-looking React app supported by a highly scalable cloud infrastructure.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Frank Haubenschild

Frank Haubenschild

53 Followers

Dad, Software Engineer, Photographer, Reef- & Bee-Keeper, Founder, Drone Pilot — 🤓 💻 📷 🐝 🐠 💡👨‍✈️