Studio can also sync any new components created in Figma as well! The Amplify Figma file includes both UI primitives and pre-built components. Amplify also provides you a handy Figma file to get started faster. With Studio’s new “UI Library (Preview)”, you can sync components from Figma to Amplify Studio. Let’s explore the new “ UI Library” preview feature. Your content tab should look something like this: (Tip: if you don’t have a image URL handy, try using Unsplash’s random photo generator.) Next, add in some image URLs to into the record’s “image_url” field. Let’s create 5 records for now and also introduce the constraint of “Street address” to the address field to make the auto-generated seed data more semantically accurate. Next, let’s use the content tab to auto-generate some random seed data for your app.Ĭlick on “Content” and then select to “Auto-generate seed data” under the “Actions” menu to seed your database with sample data. In this case we have “Home” model with just a few fields to represent a listing. Once deployed, click “Open Studio” to browse your Amplify app configurations.Įxplore the data model in the “Data model” section. This workflow forks a GitHub repository and deploys a new Amplify app with a pre-configured backend. Build your backend and frontend in one visual development environmentįirst, let’s deploy this starter React app which includes a GraphQL API backend and a React frontend with the libraries. To show case the new UI capabilities, let’s build a “Home Listing” application that shows the most recently added homes. Within Amplify Studio, developers can visually connect the UI components to app backend data.įor configuring and managing backends, Amplify Admin UI’s existing capabilities (such as “data”, “authentication”, “storage”, and more) will be part of Amplify Studio going forward, providing a unified interface to enable developers to build full-stack apps faster.
Amplify Studio automatically translates designs made in Figma to human-readable React UI component code.
AWS Amplify announces AWS Amplify Studio, a visual development environment that offers frontend developers new features (public preview) to accelerate UI development with minimal coding, while integrating Amplify’s powerful backend configuration and management capabilities.
0 kommentar(er)
