Figma to React to the Cloud: Build a Fullstack App with AWS Amplify Studio

June 27, 2024: This video uses Amplify Gen 1, if you're starting a new Amplify app I recommend trying out Gen 2 - dev.to/aws/int...!
Use AWS Amplify Studio to generate React code from Figma components which are fully cloud-connected. We'll build a blog app in this tutorial!
👩🏼‍💻 Links Mentioned 👩🏼‍💻
Blog Post Version of this tutorial - acloudguru.com...
Amplify UI Docs - ui.docs.amplif...
Amplify Console - console.aws.am...
🌸 My Links 🌸
Blog - welearncode.com​​​
Twitter - / aspittel​​​​
Twitch - / aspittel​​​​
Portfolio - alispit.tel​​​

[@nick.swoboda]

Awesome video! I think the general release of Studio will be a huge game changer; thanks for getting us up to speed! Quick tip to show some appreciation- I work in Pro Audio & if you want your recordings to play out of both speakers on your videos-> Change your recording audio track to say "Mono" not "Stereo" & Export/ Render Setting to the same!(:

[@ClarkeBishopConsulting]

Thanks Ali! I am an AWS Cloud Architect, but leaning Amplify Studio for fun. One thing I'd like to learn more about is reference naming. Flex.Flex[0].Flex[0].Flex[1] ??? There's got to be a better way to have developer-friendly names. Please address this when you can.

[@ah887-hagbd]

Thank you for the Demo! excellent video and still relevant

[@clivebird5729]

Awesome, Ali! Very very helpful. Just what I was seeking.

[@jasondavis87]

So happy i found your channel. Good stuff!

[@joes1752]

Great introduction! Ty!

[@emmasoreal7346]

Thanks for this! Quick Question: Do we use the UI Buttons from Figma in their .JSX files, Import them to App.Js, use override & flex, or Router? I need to trigger withAuthentication func from app.js after the primary button is clicked from HeroLayout3. Sorry to be super specific but there isn't a lot of resources atm, Thank you!

[@katrinaostrom4375]

i also need to figure out how the buttons work. i literally cant figure out how to change a page when the button is pressed. :(

[@harvuk7729]

I was able to add 2 data stores to a component but when I try and make it into a collection I can only choose 1 data store. is there a way around this?

[@1000monograms]

Very good introduction video. Thank you!

[@neiltucker1355]

Thanks Ali this was really helpful

[@JaLegendsDance]

Hey can you build a tutorial on Building a membership with AWS Amplify, Cognito, and Stripe Billing Portal.. So after you rap your app with aws withauthenticator user will sign up and after success sign up they will redirect to pricing plan then to stripe checkout then user will be directed to protect content after paid signing user logout and signing back in they will be directed straight to protected content

[@danielkanu8554]

Did you ever find the solution for this?

[@JaLegendsDance]

@@danielkanu8554 no i don't

[@aidennelson3171]

Thanks, may God bless! Definitely a helpful tutorial!

[@RocknClassics]

Found it! also in your page. Thanks!

[@alexanderhemming6148]

Cus in English, this sounds like the Bobs burgers voice and is genuinely making me absorb this

[@scigama71]

very nice video. Thank you.

[@Sizzahandz]

@Ali your React beginners tute is not showing!! I love how you teach I want to use it but can't see it it says private..

[@stephenalam6092]

When I do an on click button for a component on one of my first pages it takes me to an empty tab which is what I wanted. However I would like to add things to this second tab but don't know how. Do you know how to edit an empty page after you have added an onclick function that takes you to it?

[@Toralero]

Theres the option to enable MFA in the auth section of amplify studio but not much information on how to implement it tho, any suggestions?

[@harvuk7729]

hi Ali, fyi when installing amplify and ui-react via npm it returns "1 high severity vulnerability"

[@HenkJurriens]

Thanks for sharing

[@favouritejome]

could next.js be used or it's only react?

[@yahir2484]

I wanted this

[@TheConstantLearnerGuy]

:)

[@squintass]

Hello, can you make a video with more complex data models? Thanks, great videos!