AWS Amplify Studio — Figma Designs To React UI Components
Building A Full Stack React App With Minimal Programming Effort using AWS Amplify Studio.
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.
Amplify Studio converts Figma designs into React UI components that you can easily integrate into your own React app. With Amplify Studio, you visually connect these UI components to the app's backend data. If you are not already familiar with Figma, the Amplify Figma Template file offers you some pre-built UI components that you can directly use in your own Amplify React App.
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.
The Amplify Command Line Interface (CLI) gives you an easy and convenient way to add AWS Cloud Services' so-called categories into your app without knowing all the details behind them. Using the CLI, you can add the below-listed functionality to your app. Find in brackets the managed AWS service used in the AWS Cloud for the particular category.
- 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]
Install The Amplify CLI
To install the CLI globally on your machine, run the following npm-command (you may need to run the command with sudo). The CLI itself then creates and sets up the needed cloud infrastructure for you. Basically, it runs CloudFormation templates in the background which then provisions all the needed infrastructure.
$ npm install -g @aws-amplify/cli
$ amplify -v
7.6.5Configure The Amplify CLI
After having the CLI installed, you have to configure it. Run the following command on your shell:
$ amplify configureThe above command will open up your browser and ask you to sign in to your previously created AWS account. Do so, and the Amplify CLI will ask you to create a new IAM User.
Creating a user with AdministratorAccess will give the Amplify CLI the permission to provision AWS resources like S3, AppSync, Lambda, or Cognito on your behalf.
If the IAM user was created successfully, securely note down the accessKeyID and the corresponding secretAccessKey. We will need these values in the next step:
Enter the access key of the newly created user:
? accessKeyId: # YOUR_ACCESS_KEY_ID
? secretAccessKey: # YOUR_SECRET_ACCESS_KEYThis would update/create the AWS Profile in your local machine
? Profile Name: # (default)Successfully set up the new user.
At this stage, we have created a new IAM user with the needed permissions and configured the Amplify CLI to use this user. Now it's time to set up our React app.
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.
To create a new project including the needed Amplify packages, run the following lines:
$ npx create-react-app amplify-app-react
$ cd amplify-react-app
$ npm install aws-amplify @aws-amplify/ui-react
$ npm startIf the app is up and running, you should see something like this:
Next, we have to add Amplify into our React app. To do so, you have to be in the project's root directory of your app. Simply run:
$ amplify initContinue and answer a couple of questions that are more or less self-explanatory. Most of them can stay at their default value.
? 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!
If you have enabled the Amplify Studio backend from the AWS Management Console, you can always jump quickly to Amplify Studio via the Amplify CLI:
$ amplify console
? Which site do you want to open? ...
> Amplify Studio
AWS consoleCreate The Data Model
To continue, we first have to create a data model within Amplify Studio.
The data model is the schema of your data structure. Let assume that we want to build a React App to sell used items. So we need a simple model for the items we want to sell.
The data structure of a single item contains a title, a description, an image, and a price. Each data structure can have as many fields as you want. Additionally, you have to specify which user can access this particular model. Amplify is quite granular in handling the authorization towards your data. You can explicitly allow every user having the API key to access this model to create, read, update and delete or deny certain operations, which may be only some of your users should have the rights to do so. In the background, Amplify is using AWS Cognito to handle the user management i.e., data access, signup, and login via email, password handling, third-party integrations like Facebook or Google, etc.
After visually defining the model, press the button Save and deploy and Amplify will set up all the needed Cloud infrastructure for you.
For data handling Amplify will set up the corresponding data structure using Amazon DynamoDB; for the User Handling, Amazon Cognito is used. To access the data, either a REST API (Amazon API Gateway) or a GraphQl-based API (AWS AppSync) can be used. In our case, we will use the generated React component code to access the data.
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.
If you are already logged into your Figma account, you should see something like this in your browser window. You can tweak all the pre-build components if you like or leave them as they are. Write down the Figma URL from your browser window, which we will need to finally import the Figma components into your UI Library.
Finally, you have to accept the import of the Figma components one-by-one or via pressing the button Accept all.
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.
We use the Component CardB as an example. Select it and press the Configure button. Next, you can select an element from the Elements tree and link the UI element with the created data model. We will specify that the image should be taken from our previously generated Item table. On the right-hand side, you have to add a Component property. We add one property with the name image from Type Item here. As the child property, we link the src-property with the corresponding field of our Item data model. We proceed in the same way to link the price, the description, and the title field of a particular item with a corresponding UI element (label) of the component.
Next, we create a so-called collection. Press the Create collection button in the upper right corner. For example, we specify that the Collection Data set should cover All records we have added into our Item table. Further, we specify that we want to have a Grid-layout.
Embed The Amplify UI Component
To embed the above-defined Collection into our React app we just need to perform the following steps:
- 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);
2. Wrap the React app into an AmplifyProvider
ReactDOM.render(
<React.StrictMode>
<AmplifyProvider>
<App />
</AmplifyProvider>
</React.StrictMode>,
document.getElementById('root')
);3. Pull the latest components from the backend via the Amplify CLI
amplify pull — appId <YOUR-AMPLIFY-APP-ID> — envName devAfter syncing your app's project directory with the Amplify backend you will see all the generated UI components under the projects /src/ui-components directory.
4. Integrate the generated React UI component code
Simply add the import statement and integrate the generated React UI component CardBCollection within your app.
import './App.css';
import { CardBCollection } from './ui-components';function App() {
return (
<div class="my-app" className="App">
<CardBCollection />
</div>
);
}export default App;
5. Finally see the results in your browser
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.
If you like this article please follow me to get informed on any new publications. Also, a clap is highly appreciated.
