Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

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

Posted on • Edited on

     

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 outGen 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 inFigma 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 newAmplify 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 theAmplify 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 liveright now! I’dlove to hear your feedback as you build with it!

Top comments(11)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
wsh4and profile image
Eko Andri Subarnanto
  • Joined

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?

CollapseExpand
 
aspittel profile image
Ali Spittel
Passionate about education, Python, JavaScript, and code art.
  • Email
  • Location
    Denver, CO
  • Education
    Hamilton College
  • Work
    Developer things at AWS
  • Joined

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

CollapseExpand
 
wsh4and profile image
Eko Andri Subarnanto
  • Joined

Can’t wait! Keep up the good work

Thread Thread
 
wsh4and profile image
Eko Andri Subarnanto
  • Joined
• Edited on• Edited

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?

CollapseExpand
 
francescoxx profile image
Francesco Ciulla
Check YouTube: https://www.youtube.com/@francescociulla
  • Email
  • Location
    Rome, Italy
  • Education
    Computer Scientist
  • Work
    Developer Advocate at daily.dev
  • Joined

Thank you for sharing this!

CollapseExpand
 
cjsmocjsmo profile image
Charlie J Smotherman
  • Location
    Seattle WA
  • Work
    Worlds Greatest GrandPa at Looking for work
  • Joined

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

CollapseExpand
 
aspittel profile image
Ali Spittel
Passionate about education, Python, JavaScript, and code art.
  • Email
  • Location
    Denver, CO
  • Education
    Hamilton College
  • Work
    Developer things at AWS
  • Joined
• Edited on• 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.

CollapseExpand
 
snoopdougiedougie profile image
Doug
  • Joined

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

CollapseExpand
 
aspittel profile image
Ali Spittel
Passionate about education, Python, JavaScript, and code art.
  • Email
  • Location
    Denver, CO
  • Education
    Hamilton College
  • Work
    Developer things at AWS
  • Joined

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!

CollapseExpand
 
yimu187 profile image
Murat YILMAZ
  • Joined

Hi,

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

Kind Regards

CollapseExpand
 
valtrem profile image
Valerie Tremblay
  • Joined
• Edited on• Edited

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

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Collection of articles by AWS Developer Advocates

More fromAWS

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp