Hi everyone. My name is Arunddeep and I'm a solutions architect manager at AWS. I lead the developer experience team for AWS amplify. In today's session, we will talk about how to turn on easy mode for full stack app development with the most popular design tool, Figma and AWS amplify. So let's dive right in. I'm going to dive into the design to app workflow now. Our expectation is that we have an idea or a project that we start off with and we are going to work with the designer, and the designer is going to work with frontend developers to get their changes implemented, and then they work with back end devs to get the cloud logic in there and the infrastructure up there. And we expect customers are happy and everybody's having a great experience, right? But unfortunately, that does not happen. In reality, it does not go smooth. There's likely additional changes that is coming in from the designer to the front end developer and the frontend developers and designers go back and forth with changes to the UI, and some changes are not possible and it creates additional communication overhead. Then there's more changes that is required to the back end that the front end engineers are dependent on. This starts to slowly lead to disjoint processes and it spirals out of control and eventually it leads to a lot of chaos. And unfortunately, this is the reality that we live in. And we have deeply analyzed why there is a little bit of friction here, especially on the front end developer side. They spend months pixel pushing. For those not familiar, pixel pushing is like literally making tiny minute UI changes just so that it looks pixel perfect in the end. And we have deeply analyzed on the other side that designers are not happy and about 50% of the designers are not satisfied with the implementation. So designers are not happy and developers are frustrated. So there must be a way where designers can provide Figma designs and a magic solution converts it into functional react code. And this solution is amplify studio. So let's take a look at Amplify studio. Amplify Studio helps you to convert designs built in Figma to reusable react components, saving you from writing thousands of lines of code, and it eliminates the design development gap. Now, it comes with a pre built UI component library where you can select from a dozen of popular react components such as feeds, contact forms, e commerce cards, primitives, such AWS, buttons, text fields, you name it. You can then easily bind that to data so you can visually connect your UI components to your backend data model using a point to click interface. And finally, you can improve team collaboration. You can bridge the gap between designers, front end developers and product teams with centralized workflows that mitigate costly rework. You can easily build your app front end with AWS, amplify and the Figma to code plugin. Now these are coming in from the Amplify UI components which are built with plain react and CSS to provide a solid foundation for building uis and design systems. Now these components are themable, responsive, composable and accessible. They play very nicely with other UI components or styling frameworks. These components have accessibility built in with the popular standards of WChe. Now amplify consists of connected components that accelerates the development of common workflows like authentication, which can have like sign up, sign in and location saving developers hours of development time. Amplify UI also includes UI components like newsfeeds, contact forms and e commerce cards. And you could also use the primitives such as buttons, text fields, cards, layouts, etc. Now before we jump into a cool demo on the ability of how you can actually build an app which is fully responsive using Amplify studio, let's take a quick look into the overview of amplify and what it offers. If you take a look at Amplify, it is a suite and tools that are built for front end developers to build rich and performant web and mobile applications. It has five main categories. The Amplify libraries are use case centric libraries to provide the ability to build cloud powered mobile and web applications. Amplify Studio, which we just spoke about, is a visual interface. Think about it as any visual development environment for setting up your app backend, and you can easily connect figma designs into your app backend. Now amplify CLI essentially does the same thing, but it's a CLI tool chain rather than a visual development environment. And then you've got the Amplify UI library, which is an open source design system that is composed of like connected components, primitives and other pre built components that are actually themable. And last but not the least, we've got amplify hosting, which is a fully managed CI CD hosting provider for easily being able to ship your app into production. Now, features that you can build with AWS Amplify. You can interact with multiple data sources amongst AWS databases. With the data modeling that amplify provides, you can have low latency content delivery. With amplify hosting you can have multi factor Auth sign up, sign in and forgot password workflows easily built within minutes rather than hours of development time. You can also build real time interactive experiences using websockets that is based off of the backend data modeling. You can have stored user content such AWS photos and videos, which we will take a look at it in the cat application. You can also have aipowered chatbots in your web or mobile applications, and text translation that is easily provided through amplify use case centric libraries. Now, what are the benefits of AWS amplify? With all of these features, you can get to market faster. You can build feature rich applications, and the best part about it is you can scale. It's global, it's reliable, and it's secure. Now, in order to showcase the endless possibilities, we'll go ahead and build an end to end cat reviews application. Imagine if you had to work on a cool app that could take images of cat and review it, and you could customize it to a greater extent. But we'll see how you can get started with AWS amplify. Now here's what we'll build. So let's quickly build an app to review cats. Imagine you had a farm where you can review pet cat images. You can extend this app to also take real time can photos, and upload it with reviews for fun things such AWS like parability, friendliness, et cetera. For the purposes of this demo, we'll input the URL of cat images. You can see that the feed has been populated with the images of the cat and with the description I've just taken a space cat, for example, you can wrap the app with amplify UI authenticator to easily add authentication capabilities as well. What I'm doing is just building a feed of wants and adding in ratings for all of them. The left portion of the screen actually showcases the form build component of amplify studio, and on the right hand, we have added some UI code to go ahead and build the feed that goes ahead and renders the component that's been generated for you through figma design. Let's go ahead and add the third cat in there, and then you should be able to see that we also have a confidence cat that is finally looking really cute. All right, so the first main step is to get started with building a new app in amplify studio. So you go into the AWS console, go to AWS amplify and give the name for your app. And in the backend it is going to start setting up the resources for AWS Amplify Studio, which will just be done in a couple of minutes. But in the meantime, you can also go ahead and install a create next apps, which is the starter template to create a next application. You can go ahead and input the parameters to build out your next app. In this particular case, I'm not going to use typescript and I'm still going to use the sources and pages directory for building my app so that it's easier for us. And then the backend environment is now being initialized with Amplify Studio, and once that's complete, you should be able to launch Amplify studio. Now in the interim, what we'll do is we will enter into the directory of the new app that we just built, and we will go ahead and set that up. So the second step is to install the amplify packages and build your data model. So I'm installing a bunch of dependencies for AWS amplify. The most common one is the Amplify UI react dependency. And once Amplify Studio has been launched, you can actually go into the data section to build your data model. Now in this particular cat review application, my data model consists of a reviews model and it needs to have the name of the can, a description for the cat, and a rating for the cat, which is set to float because you could have a cat with a rating of 4.7 and optionally the image of the cat AWS, well, you would typically include an image of cat. And once you've defined your data model, you just go ahead and click save and deploy. Now it's going to deploy this data model into the backend. Now this abstracts the complexity of the underlying GraphQL API that is powered by AWS app sync and amplify studio makes it real easy for front end developers to define this. Now let's go back to studio and let's go ahead and use the UI library to go ahead and sync in with Figma. So you can actually use the pre built Figma template. And that opens up the Figma to code plugin and choose your Figma account. And once you enter into the Figma account, you can actually see that it contains themes, primitives and components. So I'm actually going into the component section here straight away and there's a pre built component called review card that I can go ahead and reuse. Now this is the one that amplify has built for you, but I'm going to make some changes. I'm going to remove the description to just be a single description of the product. I'm also going to go ahead and remove the pricing because you don't necessarily attach a price to a cat. I'm also going to ensure that you can have a button to favorite the can based on the reviews. And because it's not properly aligned, I'm just going to make sure that the name of the cat and the icon to favorite the cat is in a single row. And while I'm doing this, I'm also going to ensure that the whole card component is actually a little bit nicer and it looks curvy on the end. So I'm just going to add a value there. I'm going to clip content to ensure that we have rounded corners. Going to leave the rating component as it is just cleaning up the divider there. And I'm going to copy the Figma file URL and paste it into amplify studio. And then I'm going to say sync with Figma. Now what this does is it's going to fetch all the components and the primitives from Figma. Now you can click on accept all to accept all of the themes, primitives and components. And then let's take a look at the review card and you can actually see it looks exactly like how we made the changes in Figma. And in the meantime, our data model that has already been deployed has created certain forms. But we'll talk about it in just a second. For the image, we'll set it to reviews image. And for the title, we're going to set that to reviews name. And for the description, we will map it to the reviews description. And finally, for the rating, we're going to set the value of the rating to be reviews rating. Now this showcases the power as to how easy it is to make all of these changes and bind your UI components to data through the visual development environment. Okay. All right, so next we're going to create the form and associate the form with data. So this is the form builder component. So here we have the name description that has automatically been generated by you based on the data model that we defined. But the description has been modified to a text area. The rating, I just changed that to a stepper field so that it's easier for users to come in and use the stepper field to input the data. The image is again optionally containing a placeholder. I'm just adding a descriptive placeholder text that says enter the image of your cat here, and that should be it. Now these changes are automatically saved in studio as and when you are making them. All right, now once you go into the data section, you have the code to pull the code locally. So once you do amplify pull with the optional application id as well as the environment name of staging, it is going to pull all of the code that is there in studio to your local development environment so that we can continue to function locally. Now once that's done, it will ask you to log into amplify CLI and you can log into amplify CLI and then you can pass into the workflow about choosing the basics of a JavaScript application with the source directory build directory, and then you will let it complete after the app is pulled down locally. You should be able to open that in an editor of your choice. In this particular example I'm choosing vs code and you can say that you plan on modifying the backend AWS. Well, although for the purposes of this demo we are not going to be modifying the backend. And you can see now it's generating the UI components. So all of the UI components that we had defined earlier, it is going to convert them into functional, reusable react code and components that can be extended, right? And then now we're going to set up the application code and we're going to create a collection in order to render the components. You can go and say yarn dev or any package manager of your choice run the local server and you should see the default create next apps. This is a next 14 app because now that next JS has released next 14, that's the default that comes through. And right after that I'm going into app js file and I'm defining the amplify imports along with the configuration that is required. I'm also adding the interfont that is required by this particular application. You can optionally choose not to if you're okay with the default fonts that are being used. And then now I go ahead and build my actual application. I'm going to import the reviews create form from amplify UI components and I'm going to export the default function. I'm just going to name that as home. And then I'm going to call the reviews create form component. Let's wait for that to be complete. And once that's done, I'm just going to rerun the server and you can now see the same form that we designed on amplify studio is running on your local environment. Now let's go back into the reviews card component and we can create a collection. Now collection is a group of components and studio automatically gives you this ability. Now you can actually see that there's dummy data in there already. Now, these are not production data just yet, but you can also have a look and feel as to how your data is going to look like. Now, any changes that you're going to make on studio, you need to pull them locally. So I run an amplify pull just to ensure that all the components are pulled in locally. And now I'm going to go ahead and finalize my app code with the theme provider and I'm going to have a couple of imports in here. I'm going to be importing the reviews card collection. I'm also going to be importing the API category from AWS amplify. I'm also going to go ahead and import subscriptions because you would want to go ahead and look at the changes that happen in real time. And the data modeling capability of AWS amplify creates the model in the backend, which is powered by GraphQL APIs that come through from AWS appsync. And this provides the ability to go ahead and utilize the subscriptions feature where you can listen to real time events through websockets. And once you subscribe to the event of any changes in this particular model that I have, I'm actually going ahead and subscribing to on create reviews. So you can actually see that I'll be subscribing to the on create reviews here. And as soon as a new item is created, I'm going to be displaying that item through collections here. And in order to make the styles, the look and feel better, I'm actually importing certain predefined components from the UI react library and primitives. So there are like view text and flexbox that is provided by amplify UI library. And I'm going to build my application code here and that's it. Before you can know, you have already build the app that we looked at, which is the cat reviews application. So in a typical workflow for an app that would have taken multiple hours or days or months of effort is now reduced to potentially less than an hour or minutes with AWS amplify studio. So with that, thank you so much for listening in and hope you all enjoy the rest of your conference and have a wonderful day. Thanks,