A beginners guide to AWS Amplify Studio
Tags: beginners, amplify, tutorial, javascript
Published: 2022-01-01 16:46:08

Are you trying to learn more about AWS Amplify Studio? If your answer is Yes, then this guide may help you get a better understanding. Hopefully it will also help you keep track of related information around this new release. There are a few different videos, blogs, tweets popping up on Amplify Studio. I needed something to connect them all together (maybe you do too). We all know how fast it changes in this space and a guide can help keep this information in one place and relevant. As I find new resources / links, I'll be updating this same guide to keep it up to date :) If you have recommended resources, please do share them and I'll add them to this guide. Probably a good time to drop that famous _African_ proverb:
 

> **If you want to go fast, go alone, but if you want to go far, go together** 

   
I'll be explaining and listing essential resources on Amplify Studio. We will also be taking AWS Amplify Studio for a test drive! Hopefully you will find value in this guide / blog. Even if it's just understanding concepts, please do follow along (at your own pace) and test it out with me. If you're not aware of this new update… let's explain below (feel free to skip this if you've already gone through it):

**What is AWS Amplify Studio?**

{% youtube KJSD6LFErgE %}

AWS Amplify Studio is a **visual development environment** for building full-stack web and mobile apps. _Studio_ builds on existing backend building capabilities in AWS Amplify, allowing you to accelerate your UI development. With Studio, you can quickly build an entire web app, front-to-back, with minimal coding, while still maintaining full control over your app design and behaviour through code.

I like to think of amplify as _**a great way for you to go from idea to production ready app, fast**_. I also think this shift to Amplify Studio will help bring ideas to life for non developers too. Have you got a startup idea? I would recommend trying this out! Let's have a look at what resources are available to you: 

---

### Documentation Resources

- _About Amplify Studio_: https://aws.amazon.com/amplify/studio/

General information on Amplify Studio. Great for quickly understanding what it can be used for.

- _Amplify Studio Docs_: https://docs.amplify.aws/console/

This website is where most of the magic happens. It explains how to setup your Amplify (Studio) environment. Key concepts are explained, helping you to turn your idea into UI design, database modelling and binding your UI to data. 

- _Amplify UI Docs_: https://ui.docs.amplify.aws

Great website for you to learn how you can use prebuilt UI design layouts and components within your app. This is a new feature and definitely worth checking out for inspiration!   

- _Understanding CSS_: [Flex Help](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction/)

There are lots of properties now with UI / CSS aspects in the development and design of components and layouts. This website will help you fill in the gaps of what can be changed regarding design.

- _What's New_: [AWS News Post on AWS Amplify Studio](https://aws.amazon.com/about-aws/whats-new/2021/12/aws-amplify-studio/)

General overview / announcement explaining region availability of Amplify Studio.

- _Amplify Studio features written by @aspittel and @theswaminator_

{% link https://dev.to/aspittel/8-new-features-of-amplify-studio-14gf %}

Great overview of eight new functionalities and features for Amplify Studio. 

---

### Tutorial Resources


- _Launch Blog Tutorial_: [AWS Amplify Studio using Figma](https://aws.amazon.com/blogs/mobile/aws-amplify-studio-figma-to-fullstack-react-app-with-minimal-programming/)

René taking you through a tutorial from start to finish. Even if this is not aligned with your idea, doing this tutorial will help you gain practical understanding of key concepts.   

- _AWS Amplify Studio_: [Official Getting Started Tutorial ](https://docs.amplify.aws/console/tutorial/buildui/)

You should do this official tutorial! It’s really good and probably the best place to start if you don’t really want to read anything and just build, which is completely cool to do. We all learn and build differently.

- _Build a Vacation Rental Site with Amplify Studio_
{% link https://dev.to/aspittel/build-a-vacation-rental-site-with-amplify-studio-1n10 %}

Great tutorial that helps with all those nuances that don't get explained. Lots of extra links on the different steps to help plug those gaps.

- _Matt's Amplify Studio Twitter Tutorial thread_: 

{% twitter 1467374905033437185 %}

Great for understanding the steps quickly. Definitely recommended if you want to learn via Twitter. 

- _Anna's blog on_: [Building a Newsfeed with AWS Amplify Studio](https://aws.amazon.com/blogs/mobile/build-newsfeed-with-aws-amplify-studio/)

Great to see a different use case tutorial! Brings in a deeper integration of how to do different layouts and social components (profile pictures, comments) integration. 

![Newsfeed AWS Amplify Studio Figma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58wg3wnnhd7nbpfmpkq2.gif)

- _A Cloud Guru Tutorial_: [Create a Blog App with Studio](https://acloudguru.com/blog/engineering/how-to-create-a-full-stack-app-with-aws-amplify-studio/)

Ali showing us a different use case and includes building the app from a sandbox environment.

- _Clojurescript Tutorial_: [How to Use Amplify Studio Figma Connector with Clojurescript](https://dev.to/aws-builders/how-to-use-amplify-studio-figma-connector-with-clojurescript-382d) by @rberger

Instead of being Javascript based, the blog shows how you can use Clojurescript for the project implementation. It does incorporate the Javascript output of Amplify Studio but all code to use it is in Clojurescript. Great work! 

- ([Ali Spittel](https://twitter.com/ASpittel)) Figma to React to the Cloud: Build a Fullstack App with AWS Amplify Studio: {% youtube x8g9ti7PT8s %}

Using AWS Amplify Studio to generate React code from Figma components which are fully cloud-connected. Ali builds a blog app in this tutorial!


---

**Figma Design Integration**

One of the new features allows you or graphic designers to develop your app design in Figma and integrate within Amplify Studio. Let's take a look at this integration. 

[Figma](https://figma.com) is a free, online UI tool to create, collaborate, prototype, and handoff your application design. Amplify Studio offers an integration with Figma, allowing you to generate reusable React code by importing your Figma design file. Amplify Studio automatically converts any Figma component in your Figma file to a React component that can then be used in your app. Whenever you make a change to the component in Figma you sync the changes to Amplify Studio and update your application!

There are 4 introduction videos [here](https://help.figma.com/hc/en-us/sections/4405269443991-Figma-for-Beginners-tutorial) on how to use Figma. If you're like me, this is all new. I'm used to graphic designers working in adobe photoshop, illustrator etc and sending it to front-end developers (me) and then I would translate that into production. Using Figma is a new way for me to improve the design -> development process.   

---

## Let's GO! & Build a Solution (MVP)

The above is a lot of information to digest. We are not stopping there... (stick with me!) and yes we could probably split this into a series, though we have all these resources and we've got nothing tangible... We need to build something with all this knowledge! 

I was in the Amplify Extensibility sessions and a few people commented "_Is there anywhere on the web with all the amplify videos in one place?_" I replied, "_I've not seen one and could easily create a youtube playlist to encapsulate them all._" Let's create a place (solution) to view all Amplify Studio videos.    

Yep, we are going to build an app to hold all of our Amplify Studios videos. Yes, that sounds like Inception, building something for Amplify with Amplify. We need this solution, to give other users CRUD access to update / manage the content (Amplify Studio enables this functionality). That's enough talking, let's GO!  

**Step 1: Load up an App in Amplify Studio**

Lots of different ways to do this, I've gone via [AWS Management Console](https://signin.aws.amazon.com/console), then locate AWS Amplify and select **New app -> Build an App**. You should see the below screen, I've called my app '_Amplify Studio Learning_'. Select **Confirm Deployment**.

![AWS Amplify Studio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f9y74ktm8ev7c747og09.png)

**Step 2: Launch Amplify Studio**

Once it loads, you'll see '**Launch Studio**' button in the backend tab. Click that button, though check if your pop up is blocking it from opening (always happens to me, in chrome!).

![Amplify Studio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4fi5im62xuffpg62023b.png)

If you've been using Amplify recently, you'll notice, Amplify Studio looks exactly like Amplify Admin UI and you would be correct ;) What's better than a new service, a service that's been refined and improved over time. I digress, let's get back on it! 

**Step 3: Data modelling & Adding Data**

Select the **Data** tab on the left, we are going to do some data modelling. Mine looks like this: 

![Amplify Studio Data tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fs2ae0z2uiz6nqlndfsz.png)

If you've gone through the other tutorials, this will be familiar to you. I've added fields for _video_ url, _name_ and _type_. Once you're happy with your data structure, click "**Save and Deploy**". This is where Amplify builds it all out for you in the background. Once done, head over to the content tab. Mine looks like this:

![Amplify Studio Content tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6rou13xs5g8as9jyqoq1.png)

Yes we can add auto generated data, though you're on route to production / being a pro, put in some real data. I've inputed some Amplify Studio videos that are essential viewing. Once done, it's time to introduce Figma (Design). Click the **Home menu** and select the '**Build UI**' button. Or click the **UI Library** tab and select **Get Started** button. 

**Step 4: Open up Figma**

Clicking the **Get Started** button will open up the link to: [Figma - Amplify Studio Template](https://www.figma.com/community/file/1047600760128127424). Click **duplicate** and select **My Components**. You'll see the available components. I've customised _CardE_. 


![Amplify Studio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/imrxliwanx35d88n4geh.png) 

Feel free to adjust your component the way you would like it. Once you're happy with the design. Click the **Share** button in the top right and copy the link. 

![Figma Share Link](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qsi9gf8voj8uyhtpn0xg.png)

**Step 5: Sync Amplify Studio with Figma**

Once you've got your link, you need to switch back over to Amplify and paste the link in the **UI Library** (tab) area and click **Continue**. This will prompt you to sign in with Figma, allow access and sync the files. I normally accept all, it's quicker. Then all your components will be available for you.

![Figma Sync](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9s7nlqndasxqx0ggaag.png)

Once that is done, you will see all the components loaded from Figma in your Amplify **UI Library** tab. Here is what mine looks like:


![UI Library Sync Figma Components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mf5g2qpjbil9ffasbqoq.png)

**Step 6: Configure & Bind Data to Components**

Awesome, it's looking good. Notice I've highlighted the **Configure** button in the above image. We now need to turn our design into a collection and bind the data to our design. Click **Configure** and you'll now be able to do this:

![Bind Data](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d8evqsgkgfdqn0ygxpmi.png)

_**Groovy!**_ Add in your model name in the _Type_. Select the top level Component (_CardE_) and input that in and give it a name (mine's '**Info**'). Go through your other elements and connect them up. The property on text is '**label**' and the value would be '**Info.name**'. This will be different for you, depending on what you've named your data model and component name. Once you're done connecting it up, click **Create Collection** and give it a name (mine's '_CardECollection_'). 

![Collection Editing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/omp80mx8cyed0lpuq62a.png)

**Step 7: Adjust Layout and Get Component Code**

Here you can adjust the layout, spacing and order for your collection. On the left, I've selected '_Grid_' and added 10px around each card. On the right you can adjust the order. I've added a sort filter via **Name** to be ascending, which will keep the content displayed in a logical order. Feel free to do the same or make it your own. **_Coolio_** :sunglasses:, that's done! We now need to import this into our app locally to test it out. Click '**</> Get component code**' This brings up a handy prompt of what we need to pull locally into our amplify app. 

![Initial Project Setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qm7yh9esza236m2okity.png)

**Step 8: Create App Locally & Sync with Amplify Studio**

Create your React app locally. You can do this with running the following command in Terminal: 

```javascript
npx create-react-app amplify-demo
```

Move into the React app that you've just created: 

```javascript
cd amplify-demo
```

Remember that section with the 'initial project setup' guide. Run those commands: 

```javascript
npm install -g @aws-amplify/cli
```

```javascript
npm install aws-amplify @aws-amplify/ui-react
```
Once done, you'll need to switch to the other tab instruction and pull the Amplify Studio code into your project. Mine looks like this: 

```javascript
amplify pull --appId d22vmom8abyhk2 --envName staging
```
In your _App.js_ file add:

```javascript
import { CardECollection } from './ui-components';
```

Place your collection where you would like it to be displayed: 

```javascript
<CardECollection />
```

My _App.js_ looks like this: 

![App javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/85sw50grqe2eq926ikno.png)

**Step 9: Override & Extend Generated Code - React Player**

I know what you're thinking, wait a minute what happened to _CardECollection_ in your code? Don't worry it's there, I've renamed it and it's called '_PlayerCollection_.' Why have I done this? Remember at the start we are trying to allow users (you and me) the ability to watch videos. There is no video component integrated (yet). When you use a default component, any changes will be overwritten when you re-sync with Figma. Take a look at this [Modify Generated Code Override](https://docs.amplify.aws/console/uibuilder/override/#modify-generated-code). This explains how to do this change and also everything we've gone through so far is within that documentation. Take the time to explore the docs too.

I used and installed this ([React Player](https://github.com/CookPete/react-player)): 

```javascript
npm install react-player
```
Then within your _CardE_ component import the React player. Change the url to your corresponding path in your data model. Mine would be: `url={Info?.video}`

```javascript
import ReactPlayer from 'react-player'

// Render a Video Player
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
```

Remember that grey box in my _CardE_ design on Figma. I've made the React Player to be the same size and it fits nicely within that area. Here's what my _Player_ / _CardE_ component looks like: 

![Figma Component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3megtb8vg8wul3gx0rh.png)

Now that's added, we should load up the React server and check what this looks like... 

```javascript
npm start 
```

Mine looks like this: 

![Amplify Videos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ibwtxh09jfvkogcr7z2t.png)

Take a moment to reflect... _if you've followed along_. You've just turned an idea into a real, working product. **AMAZING! Well Done!** You've not only created an MVP, you are the MVP! All we do now is wait for Venture Capitalists to invest ;) or integrate your own payment model and bootstrap your startup. If you feel like helping to add more videos to our Amplify Videos app, feel free to connect with me. I'll add you to Amplify Studio content management section. You can add more videos and help the community learn more about Amplify.

**Summary**

I really like the direction AWS Amplify (Studio) is going. If you've got a startup idea or need to develop a solution to a problem, with an AWS service, Amplify Studio is a good option. Yes, the learning curve does take time (each person is different). I would encourage you to stick with it, the rewards are exponential when you understand how it all connects. Yes, it isn't a no-code solution and it does take time to up-skill. We've seen a deeper design integration which will exponentially help us reduce the time it take to move from idea to production ready app. I hope you found this guide useful. Leave a comment or tweet me [@markramrattan](https://twitter.com/markramrattan) with any questions or resources you think could be added. You can also join the [Amplify Discord](https://discord.com/invite/amplify) if you need help... They are superheroes! 

![Amplify Multiverse](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x7sjbkqngfbrkvm70wtx.png)


**Clean Up**

To clean up your Amplify project, run:


```javascript
amplify delete
```

Or via the Amplify Web Console, go **Actions -> Delete app**:


![Amplify Delete App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96e5w2y1ts33tvwz1rjs.png)

Wishing you a healthy and happy new year! I'm looking forward to seeing what you build in 2022.


![Amplify Superhero](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3qwvf3bm1bqyldwvwtdr.jpg)

[Figma File Link](https://www.figma.com/file/jYj6XQ3oGOUdyNQ4C7UCme/AWS-Amplify-UI-Kit-(Community)?node-id=861%3A3635) @zachjonesnoel 

**Extra**

If you want to take it a step further. Check out my other blog, it shows you how to integrate **Chat** and **GEO** within your Amplify App. That would be a cool extra integration:

{% link https://dev.to/aws-builders/build-a-serverless-real-time-application-with-modern-apis-the-graphql-real-time-race-1b48 %}

Editor: Dr Shivani Kochhar