How to connect AWS Amplify Studio and Figma

amazon recently announced aws amplify studio which is a visual development tool for front-end developers to create uis with minimal coding uh minimal coding i maybe would use in quotes i took it for a spin for a little bit and kind of got lost with what one needed to do in a couple of spots so this video is to hopefully uh help anyone else who may get stuck in those same same places i don't typically use figma so figma isn't something that i was i'm particularly adept with and also had not used any of the uh amazon products pre previously so before this video i did create accounts with figma and on some of uh amazon's services and did kind of do a couple of walkthroughs so hopefully this won't be too too much meandering and we can kind of get to the meat of it so let's get to it so there's uh at least in this public beta phase one of the items in the documentation is that you do need to use this aws amplify ui kit i did see in the documentation that at some point in the future uh the goal is where you can use your own figma file but for now you need to use this existing one so let's get started um and so we're gonna build an app which is down here and let's just do play that let it work its magic you okay so that phase is done i've got a staging environment set up all right and let's launch studio okay you can see the start there and we're going to skip some of these initial statements uh steps here and we're going to jump into building the ui okay and we're going to do first thing that we're going to do is we're going to duplicate the amp the amplify design file and we're going to duplicate this here actually i'll delete these things over here [Music] let's move this over okay so let's um this was one of the places where i got stuck earlier uh so we need to share we're gonna need a shareable link which is this link here and there was a place that we it was where one pasted it in okay okay so we duplicated the figma file okay so this is where we're at now we want to link the figma file in studio in amplify studio enter the url yep so amplify studio just where in amplify studio do we do that which i've already forgotten in the ui builder section of amplify studio ui builder ui library ah there it is so obvious all right continue [Music] okay and it's important here to click the accept button which i think is ends up doing one by one since we want all the components we're going to do an accept all and we're going to start to see them appear here okay and if we come over here to my components these are the pre-built components you can delete them you can either delete all some or none so what i did before is i took one and i came over and i duplicated it and then i just for grants changed the background so we now see that there's been an obvious change there if we sync over here we're not going to see the number 28 go to 29. so we still have 28 so what we needed to do is click on this component and [Music] we basically need to need to say create component and let's just give us a name too so now this is a duplicate and now since we've made it a component if we sync with figma or excuse me amplify studio and say accept all we now see that it that that item has come over here okay so that's it for this video happy building

Channel: I Heart #NoCode

Views: 719

Keywords:

Id: pZ9ZNcdSazo

Length: 10min 24sec (624 seconds)

Published: Sat Dec 04 2021