Page updated Jan 16, 2024

Build UI

With Studio’s new UI Library, you can sync components from Figma to React code. Amplify also provides you with a handy Figma file to get started faster. The Amplify Figma file includes both UI primitives and component templates. You can also create your own component in Figma! In this tutorial, you'll create a home listings app using Amplify Studio.

Create UI components in Figma

  1. Clone the Amplify UI Figma file Screenshot showing how to sync with Figma The Amplify UI Figma file provides a starting point for your app. It includes common UI primitives and pre-built UI components.

  2. Explore the UI primitives and templates

Screenshot of Figma file showing the primitives

Primitives are common UI components that allow you to build complete applications that fit your brand, like Buttons, Text Fields, and Badges.

Screenshot of Figma file showing the templates

Templates are Figma components that leverage the primitives to enhance your UI even further, such as Hero Cards, Profile Cards, and Product Detail Cards.

  1. Create a custom component in Figma

Video showing how to create a component in Figma

Sync components with Figma

In Amplify Studio, choose the “Sync from Figma” button to review all the components from your Figma file.

Paste in the URL of your Figma file to start syncing. If this is your first time syncing from Figma, you need to grant Amplify Studio access to your Figma account.

Screenshot showing where to get Figma URL

Either choose Accept all or review individual components with the Reject and Accept buttons.

Screenshot showing component review when syncing with Figma

Use component in code

Now that your components are synced, select a component and choose Configure. To get your React code, choose Get component code.

Follow the instructions in the modal. If this is your first time setting up the UI components in your app, make sure to complete Initial project setup first to install all dependencies.

Screenshot showing how to get the component code

Next, run amplify pull to sync all your components into your local code base. A new ui-components folder with all the UI components is created.

Import the UI component you want from ./ui-components and then render it in your React app. For example:

import { CardB } from './ui-components'; return ( <div> <CardB /> </div> );
1import { CardB } from './ui-components';
2
3return (
4 <div>
5 <CardB />
6 </div>
7);

Removing multiple UI components

  1. In UI Library, click on the edit button.

edit button

  1. Select the UI components you would like to delete.

selection

  1. Then, click on Delete selected components to remove the selected UI components.

delete