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

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 👩🏼‍💻

🌸 My Links 🌸

[clivebird]

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

[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.

[jasondavis]

So happy i found your channel. Good stuff!

[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!(:

[ah-hagbd]

Thank you for the Demo! excellent video and still relevant

[alexanderhemming]

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

[monograms]

Very good introduction video. Thank you!

[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

[aidennelson]

Thanks, may God bless! Definitely a helpful tutorial!

[harvuk]

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?

[emmasoreal]

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!

[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..

[harvuk]

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

[stephenalam]

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?

[favouritejome]

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

[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?

[squintass]

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