Amplify UI


Amplify Studio offers an integration with Figma, allowing you to generate clean React code by importing your Figma design file.

Amplify Studio allows you to design components in Figma, visually bind those components to your data in Amplify Studio, and pull them into your application codebase. The Studio generated components are plain React components that compose the Amplify UI primitive components. Studio generated components can be easily extended or overridden so you never eject or throw them away.

Figma file

Get the Figma file

The Amplify UI Figma file for Amplify UI is not a typical design system Figma file. The main difference is it does not have all components Amplify UI offers and those components do not have all the variants you might expect to see (component states like hover for example). This is because this is not a normal Figma file. It is built to work with Amplify Studio's UI Builder functionality which lets you design components in Figma and generate usable and extensible React code you can use in your application.

Figma plugin

Get the Figma plugin

The Amplify UI theme editor plugin allows you to create and edit an Amplify UI theme and save it to your Figma file. This theme is synced with your Amplify application and you can pull it into your app along with the generated UI components.

To install the Amplify Theme Editor:

  1. Go to the Amplify Theme Editor Figma plugin page
  2. Click "Install" on the top-right corner
  3. Go to your Figma file
  4. Right-click an empty area of the canvas and select Plugins > Amplify Theme Editor or use the Figma quick actions menu by pressing command/control + / then typing "AWS Amplify"

Figma to code

Learn more about Amplify Studio's Figma to code capabilities

Data binding

Amplify Studio offers visual data binding capabilities to bind UI components to data to build dynamic components. Use the UI component editor to map fields to static values, or map fields to your backend data model. All data bindings get automatically included in generated code.

Learn more about data binding in Amplify Studio

Event handling

Amplify Studio offers the ability to bind UI component events (onClick, onChange, and more) to actions to build interactive components. Use the UI component editor to map UI components' events to actions for navigation, data manipulation, authentication, and more. All data bindings get automatically included in generated code.

Learn more about event handling in Amplify Studio

Working with collections

Collections are any list of repeating items. You can visually create a collection from any individual component by selecting the Create collection button in the top right corner of the UI component editor. All collections are generated as code with real-time subscriptions automatically set up.

Learn more about collections in Amplify Studio


Learn about theming Amplify UI in Figma

Responsive Components

You can use Amplify Studio to dynamically toggle between different component variants based on your app's breakpoint. For example, you can have the navigation bar shrink to a smaller size as the window gets smaller.

Learn about responsive components in Amplify Studio

Extend via code

When you run amplify pull, Amplify automatically generates JSX and TS versions of your Figma components. You cannot directly edit the code for these components as they will get overwritten on the next pull, but we have exposed mechanisms to extend the code.

Learn about extending Amplify Studio components

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2024 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.