Next, let’s modify the data set used to populate the collection and add a new sort condition to sort by the newest homes to oldest homes. In addition, let’s add 10px padding to all sides of the element to additional spacing. Let’s use a grid layout for this collection and set the column count to 3. Configure all your layout options on the left hand side and then configure your data sources on the right hand side. With Amplify Studio, you can make a collection of any component by clicking the “Create collection” button on the top right corner. Individual components are great but most of the time you’ll want to show a “collection” of a component. To see how your component scales with different information and data, click on “Shuffle preview data” and Studio will shuffle through your app data and populate the component with live data. For price, we can even use some lightweight syntax expression to have the UI render “Price: $” + “home.price” + “/night”. We can bind the text element to the home’s address. Next, select the child elements and bind their “label” to a value from the listing property. To bind images, you can simply select the “src” property and bind it to the home’s “image_url” field. For our app, let’s add a new property called “home” and select the “Home” type. In the UI component editor, you can define component properties and then bind them to different UI elements. Select the component and click “Configure”. With your UI library populated, let’s bind some of these components to data. You can either choose individual components to import or import all of them via the “Accept all” button on the top right corner. Design a new component in Figma like you’d normally do! I’ll create a new component with auto-layout support an image on top and a couple of Text elements below.īack in Studio, paste in the Figma file link to import all the components from your Figma file. You can skip this step and use the pre-built “CardB” component instead if you want. Optionally, you can also create your new Figma component. You can also find a range of pre-built UI components in the “My Components” page.
FIGMA STATUS FREE
Note: this step will require you to have a free Figma account.Įxplore the Amplify UI component primitives in the “Primitives” Figma page. Let’s clone the Figma file as Amplify Studio suggests. 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)
