How to Connect Figma with AWS Amplify Studio

Amazon recently announced AWS Amplify Studio, which is a visual development tool for front end developers to create UIs with minimal coding. Minimal coding. And make 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 help anyone else who may get stuck in those same places.

I don't typically use Figma, so Figma isn't something that I was particularly adept with and also had not used any of the Amazon products previously. So before this video, I did create accounts with Figma and on some of Amazon's services and did kind of do a couple of walkthroughs. So hopefully this won't be too much meandering and we can kind of get to the meat of it. So let's get to it.

So 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, 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.

And so we're going to build an app just down here.

And let's just do play that orgasm magic.

Okay. So that phase is done.

I've got a staging environment set up. All right. And let's launch studio.

Okay.

Can see the start there. And we're going to skip some of these initial statements 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 Amplify design file.

We're going to duplicate this here.

Delete these things over here.

Okay, so let's this is one of the places where I got stuck earlier.

So we need to share. We're going to need a shareable link, which is this link here.

And there was a place that 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 AWS. AWS? Amplify studio do that I've already forgotten.

In the UI Builder section of AWS amplify studio Builder UI library.

There it is.

All right, continue.

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.

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 we basically 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 the figma or excuse me, amplify studio and say accept all we now see, that item has come over here. Okay, so that's it for this video.

Happy building.

‍