June 27, 2024: This blog post uses Amplify Gen 1, if you're starting a new Amplify app I recommend trying out Gen 2!
This post was written with @theswaminator
Last Thursday at re:Invent, AWS Amplify, the team I work on, launched Amplify Studio which brings developers new capabilities to help accelerate UI development. Amplify Studio automatically translates designs made in Figma to human-readable React UI component code. You can also connect a cloud backend to your UI components — Studio integrates with existing Amplify data modeling.
Here are 8 exciting new features available in the brand new Amplify Studio!
Figma to React code
The biggest new feature is the ability to go from designs made in Figma to developer-friendly React code. Amplify Studio uses Figma capabilities such as components and auto-layout to generate React code that can be used directly in your own code. This workflow empowers UI/UX designers to control every styling decision of components – box shadows, border radii, paddings, margins, and colors that us devs always end up messing up 🙈.
Studio allows developers to focus on the core business logic that makes their app different rather than spending tons of time going back-and-forth on UI styling.
Amplify UI Library
To accelerate UI development, Amplify Studio uses the gorgeous, brand new Amplify UI library. It offers dozens of components such as newsfeeds, contact forms, e-commerce cards, and primitives such as Buttons, TextFields, and Alerts. All of these components are also available in the Amplify Studio Figma community file. You can mix and match Figma generated UI components with Amplify UI components to build complete apps in very little time.
Figma Theming plugin
The Amplify UI library ships with theming capabilities, allowing you to define design tokens that apply globally across your app. The theming plugin for Figma allows you to update the Amplify Figma file to match your brand styles!
Bind UI to data
You can use Amplify’s point and click interface to visually bind UI components imported into Studio to items in your backend data model. Studio automatically generates all the ‘glue’ code required to power the UI with real data.
Create collections
Almost all apps we build render collections (or a repeating list of items). You can create collections in Studio that display multiple instances of your data. Connect to the data in your data manager, dynamically query data with filtering and sorting , bind your collection to specific records, and define your collection layout styling (e.g. grid vs list, padding, direction).
Shuffle preview
Shuffle preview gives you the ability to test how your UI component renders with different types of data from your data model. You can make sure that your UI will still look good with a very short title and a very long one, for example!
UI component property editor
Amplify Studio renders a live preview of your UI component, with the ability to edit properties ranging from styles such as color, font weight and data. All property changes made in the editor are reflected in real-time in the live preview.
Extend generated code
My favorite part of Studio is that we focus first and foremost on a developer audience. We have a visual way to make components, but then they can be generated using normal React code. All generated code can be extended by either modifying the component props or by overriding the generated code.
Check it out for yourself!
Amplify Studio is live right now! I’d love to hear your feedback as you build with it!
Top comments (11)
Hi, I love this as a solo developer who can possibly create a full stack app within just weeks instead of months.
Any change you will create a Udemy course?
Love to hear it! Will definitely be making some courses and tutorial content on this!
Can’t wait! Keep up the good work
So I watched your course on Linkdin; on the section of Authorization, what is the better way in user management and what is the different between Cognito and IAM?
Thank you for sharing this!
Can I take the code generated by Amplify Studio and deploy it on a different cloud provider like CloudFlare or Azure?
Vender lock-in is my concern
The answer to this is yes and no: some parts could be, some could not be.
The generated React components that aren't cloud connected could be deployed anywhere, as could the site frontend in general.
The cloud connected backend; however, would be different from provider to provider. That being said, you could write abstractions that would allow you to switch providers if you needed to.
How easy (or is it possible?) is it to swap out react code with code from another programming language?
Right now we’re working on making the React version rock solid, but we are seeing a lot of requests for other framework support. If you have a specific one, I can make sure to pass it on to the PM!
Can we use another UI Kit, for example MUI for Figma, or do we have to get started from the AWS Amplify UI Kit?
Hi,
When will the UI Library be general available? Is there a way to set action props like onClick before GA?
Kind Regards