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:
- Go to the Amplify Theme Editor Figma plugin page
- Click "Install" on the top-right corner
- Go to your Figma file
- 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
Theming
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.