AWS Amplify Studio and Figma
Before you start
Who can use this feature
Anyone with can edit access to a file, project, or team can subscribe a channel to that resource.
Anyone with can edit access to a file can see previews of the file in Slack.
AWS Amplify Studio lets you go from Figma design to feature-rich, full-stack web apps in hours, on AWS.
Designers and developers use Amplify Studio to work collaboratively on development tasks and ensure pixel-perfect implementation of your Figma designs.
Typically, front-end developers spend a lot of time incrementally making minor UI code tweaks to match provided designs. Designers need to verify that new implementations match the designs. This can lead to inefficiencies and suboptimal end user experiences due to compromises made to ship on time.
With AWS Amplify Studio, developers can automatically import UI component designs from Figma as code. The generated components are familiar to any React developer and offer the same flexibility as hand-authored components, with mechanisms to modify component properties.
Amplify Studio’s Figma Integration:
- Automatically converts your UI component designs into clean React code.
- Lets your developers select from a library of prebuilt UI components, such as news feeds, contact forms, and e-commerce cards, and primitives such as buttons, text ares, and alerts, which can be fully customized within Figma.
- Generates UI components that follow accessibility best practices and are themeable using a Figma plugin to match your brand’s look-and-feel.
- Lets your developers easily connect the generated UI components to existing backend data.
Import a Figma UI design to AWS Amplify Studio
Step 1: Set up Figma file
To get started, simply link your Amplify Studio project to a Figma file. While you can link any Figma file to Amplify Studio, for the best end-to-end experience, we recommend starting with our template Figma file. To start from scratch, simply duplicate our Figma UI file.
Step 2: Link Figma file in Amplify Studio
In Amplify Studio, enter the URL for the Figma file you created or duplicated. You will be asked to authenticate with Figma.
After authenticating with Figma, you will see a list of components that you can sync with Amplify Studio.
Select Accept all to import all components, or walk through them individually to ensure they are visually acceptable.
Once you complete the sync, you will see a list of components that have been imported.
All previews of the components are live renders of the coded UI components. You can open your developer tools inspector to confirm.
Step 3: Pull UI components code into your project
In Amplify Studio, choose a component and select Configure to get to the component editor screen. Select Get component code at the bottom of the page.
Go to the Initial project setup tab and follow the setup instructions.
Amplify Studio generates all UI component code into src/ui-components, as JSX and TS files. All generated code is built with primitives from the Amplify UI library.
Although you have access to inspect the component code, you cannot modify it directly as Amplify Studio will override any changes on the next amplify pull.
Once the amplify pull command downloaded all UI components to your src/ui-components folder, you can use the components anywhere in your app. Learn how to customize these UI components in code.
import { ComponentA, ComponentB } from './ui-components';
Need help using AWS Amplify Studio? Check out the AWS Amplify Studio docs or join the Discord community at discord.gg/amplify.
