DEV Community

Cover image for 8 New Features of Amplify Studio
Ali Spittel for AWS

Posted on β€’ Edited on

45 16

8 New Features of Amplify Studio

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.

Figma to Studio

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 to Code

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!

Amplify Studio Figma theming plugin

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.

UI to 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).

UI collections layout

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 Shuffle Gif

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.

UI Component editor

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.

code generation

Check it out for yourself!

Amplify Studio is live right now! I’d love to hear your feedback as you build with it!

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (11)

Collapse
 
wsh4and profile image
Eko Andri Subarnanto β€’

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?

Collapse
 
aspittel profile image
Ali Spittel β€’

Love to hear it! Will definitely be making some courses and tutorial content on this!

Collapse
 
wsh4and profile image
Eko Andri Subarnanto β€’

Can’t wait! Keep up the good work

Thread Thread
 
wsh4and profile image

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?

Collapse
 
francescoxx profile image
Francesco Ciulla β€’

Thank you for sharing this!

Collapse
 
cjsmocjsmo profile image
Charlie J Smotherman β€’

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

Collapse
 
aspittel profile image
Ali Spittel β€’ β€’ Edited

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.

Collapse
 
snoopdougiedougie profile image
Doug β€’

How easy (or is it possible?) is it to swap out react code with code from another programming language?

Collapse
 
aspittel profile image
Ali Spittel β€’

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!

Collapse
 
valtrem profile image

Can we use another UI Kit, for example MUI for Figma, or do we have to get started from the AWS Amplify UI Kit?

Collapse
 
yimu187 profile image
Murat YILMAZ β€’

Hi,

When will the UI Library be general available? Is there a way to set action props like onClick before GA?

Kind Regards

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay