Design with Prompts

Transcript

[00:00:00] Today I'm going to show you how to build this Figma reactions interaction with just prompts. So when you tap on E anywhere on the screen, you open this circle and you can select whichever reaction you want. And if you keep clicking on the page, you'll see these animated emojis fly across the page and we've also added an interesting interaction, which is the shuffle icon in between, where if you click on it, the emojis shuffle into new ones.

So the first thing we need to do, as usual, is open our terminal and create a new Next. js application.

And we can do that by using the command npx app at latest and followed by the project name, which is going to be figma. reactions. And once you do that, just select all the defaults. I will just say yes to everything

now that's done, we can go into cd Figma reactions and we can open it in cursor by saying code. [00:01:00] We need to open a new terminal and do npm run dev That will run the application on the browser.

So the first thing we need to do is to create the wheel. So the way we can do that is by opening our composer, by hitting on command I and what we can do is Create a folder within source and call it prompts,

Our first prompt is going to be to create a wheel. So we are going to call it wheel dot md. And within this markdown, we're going to say, create a new component, because we want that component to live outside the main page, and we're going to say in that component, create a pie shape.

I say pie because pie is the easiest way to refer to a section of a pie and Because later when I start to add a lot more visual details to each section, it becomes easier to refer it when you use an analogy [00:02:00] that's recognizable. So I'm going to say pie shape with eight sections with a white background and a purple border.

Import that component into the page and render it. Make sure page is selected I will just tag this one wheel and execute it.

As you can see, you have a simple wheel.

So we will actually remove everything else but the wheel. You can do that in the composer and just say remove everything else on the page but the wheel

What we need to do right now is to change the color of the lines. So we are going to create a new prompt and say to line color dot md, and within line color, we can say make the lines light gray.

And then when I hover, a section of the pie, highlight the section in a light purple color. So we can create a new composer chat and we can tag 2-line color and make sure the wheel is selected. [00:03:00] We don't have to worry about page anymore for now. And once we are here, we can just hit enter.

What that should do is give us some code. We accept it. And the reason you're getting this is because it works on a client component. Once in a while, you would get this error. Sometimes It knows on its own. All you need to do is just say use client. this is because of a little detail of Next. js that some of the code is compiled on the server Or most of the things that we are going to do is on the client.

So now we have the hover state Configured as you can see when I hover I can see this little purple hover interaction. We can also update the cursor, during hover make the cursor a pointer.

Now you have a simple reaction wheel with a hover state.

So the next thing we need to do is go back to our prompts and create a new file.

And call it styling. md. And within styling, we will say add a [00:04:00] purple border around the outer edge of the pie and then we will say add an emoji at the center of each section of the pie. So we can go back into our wheel. tsx let's open a new composer and just tag our three styling. md

and when you accept all the changes, you can see that you have your purple border

but there's a little. gap between the outer edge and the border. So we can fix that. And if you read what it generated, it says that at the end of the SVG, we added a circle element to create the purple border around the outer edge of the pie.

So I'm going to say make the border around the circle a bit thicker and make the circle bigger so it covers the outer edge of the pie.

So this is what we wanted and we can go and update the color of these lines.

So now you need to know that the. new reactions which is happening [00:05:00] is independent of the wheel and then later we will connect the wheel to the Reactions and then say when a particular emoji is selected in the wheel now We change the emoji that appears when you react, right?

First We will have to import a new component, and this component, all it does is just react, and it would assume that a specific emoji is selected and react. And then we can change that emoji and connect these both later. So we'll say, create a new component and import into the page and then we will say then in the imported component, do the following. When I click anywhere on the screen, start a new instance of. Fire at that location, then animate it upwards

for about 200 pixels with scaling and rotation. When it reaches 200 pixels, Up, fade it out and [00:06:00] remove it from the DOM. The DOM is a bit of a technical thing. You don't have to say DOM, you can just say screen. And use FramerMotion for the animation. I am going to use FramerMotion because that is one of the best libraries out there to make these kind of animations.

And we can tag.

4-Reactions. md

I think pretty much everything is here, except for the fact that we don't have the framer motion library.

So i'm just going to say npm install frame of motion. This error should disappear and once you select that, you can see the fire emoji works, but it's having this fun like rotation animation.

We can tweak those animations later. I'll show you like an interesting way to tweak these animations.

Now, if you see, there is one detail here That you cannot interact with the wheel anymore. And the reason is because it's [00:07:00] written clearly here that the component creates a full screen overlay that listens for a click events. So the full screen overlay is actually sitting on top of the wheel.

So if you go and, tsx, you can see that, it has two components, which is the wheel and the fire emoji. And now the fire emojis component is actually sitting on top of the wheel, even though the fire emoji component is under it. The reason this overlay sits on top is because of some CSS positioning property that would have been applied.

So it doesn't necessarily mean that if a component is below it takes that order of placement. Typically it does, but if some CSS property is specified that this is a fixed layout, for example, it would sit on top. We don't want to go too deep into the code right now, but let's just understand that right now, because this overlay layer is sitting on top of wheel, you're not able to interact with the [00:08:00] wheel.

Let's not worry about it right now because you wouldn't have both Working at the same time because when the wheel is selected, we don't want the fire emoji to Work, we just want to be able to select the wheel when the wheel is invisible or when you've selected a specific Emoji within the wheel then you want just the fire emoji to select .

But before that you want to bind The letter e on your keyboard to this wheel so that it is visible only when you Tap on e on your keyboard.

So let's implement that first and then we will come to this So within my prompts i'm going to create a new file and call it keyboard bindings Dot md And within keyboard bindings I am going to say by default The wheel component

should be hidden with opacity 0. When I press on E, animate and scale the component to its original size and make it visible with opacity 1. So let's see if this works and we can go back into page. tsx [00:09:00] and we can go and tag our keyboard bindings file

as you see, what happened was, if I go and refresh, by default, the wheel is hidden. And when I press E on my keyboard, you can see the wheel open up. So far everything works fine. We also need to add another detail that when you click outside of the wheel, hide it back to zero.

So I'm going to go back here, right in the cursor chart, and say, when I click outside the wheel, make the wheel invisible again.

And once I accept these changes, when I click outside, as you see, it goes away.

So now let's make sure the wheel opens up where the mouse cursor is. When your mouse cursor is over here, the wheel should open at that point. We will create a new prompt and we will say six wheel origin dot MD and within here we can say the center of the wheel origin should be where the mouse [00:10:00] cursor is and then once the wheel is visible,

keep its position fixed where it was triggered because we don't want the wheel to constantly follow the mouse cursor after you've opened it.

And let's go and execute this and see,

So now first, let me select page. tsx and I will select wheel and I will select fire emoji. And within this, I will go and select the sixth instruction I just gave.

There's one problem though, there's some TypeScript errors. So I'm just going to, say, fix the TypeScript errors.

And once I accept it, if I see on the thing, the wheel opens where the cursor is, and when I have this thing, and when I click outside, the wheel disappears so far, so good,

so now what we can do is when the wheel is selected, we will make it selectable.

So let's go back into our prompts and we will create new prompt called, wheel Selectable [00:11:00] md. And within this prompt, we can say that when the wheel is visible, the wheel should be selectable

and. disable the fire emoji component. Once I have selected

from the wheel, the wheel should be hidden and the fire emoji component should be enabled. I think it's kind of clear., I'm just saying yes to whatever AI suggests. Let me go back to page and I will tag wheel again and I will tag fire emoji again. And this time let me tag the 7th instruction

so I've accepted all the changes. So when I go and click, I can see that. The wheel is selectable and now when I select it As you see it did this little thing on the top. That was not what I specified, but it's interesting that it captured which Emoji was selected And now when I go back into the wheel I can select that the emoji at the top got selected Updated as well, which is nice And yeah, I think this is Pretty much what I [00:12:00] expected

so we go back into our prompts and now we'll create a new prompt and we will call it 8.

Updateupdateemoji. md. So what we're going to do is just make sure once the The emoji is selected. We'll update the fire emoji component.

Say when I select An emoji from the wheel update the fire emoji component of the selected emoji. It already knew what I was going to do, so let me go and just open a new component and just say we'll just tag both the components. And tag the eighth instructions.

I okay. So I have accepted all the changes. And as you see, When I change the emoji, everything works pretty well. Now let's implement the last part of the

interaction, which is the shuffle interaction.

So to implement the shuffle again, go back into our prompts and we will add a new prompt, say shuffle. md. And within shuffle, we are going to say add a circle.

At the center of the wheel and

make it purple in color. In the middle of the [00:13:00] circle, add a shuffle emoji. And when I click on shuffle, I want all the emojis in the wheel to be shuffled, not to a random position, to another emoji.

I will tag both fire emoji component and then wheel component and I will Tag my ninth instructions shuffle

Okay, everything is complete Let me accept it for now

so we can just copy the error from here and we can go paste, make sure we tag wheel and fire emoji as well, just in case

and so far, looks like all the errors have been fixed. I'm going to accept it for now and let's go try it out. So when I hit on, I am able to select the wheel and when I shuffle, it shuffles. And when I select the emoji, I can

react with that emoji.

Great. Everything is working well right now.

Now we can make some little visual edits by like making the center wheel a little [00:14:00] bigger.

So we can always like go back to fire emoji, component, and we can say make the center circle a bit bigger.

So when I click on the shuffle, I can see that one of the other reactions is selected.

So I think that's everything that we need to do. The one last tip I wanted to give you is that you could, make it give you these variables and create your own kind of like a custom UI that you can modify to change some of these properties. For example, you could say that create a variable to increase the size of the center circle.

So you could design your own UI. Within code to modify some of these properties of what you're designing, which makes things so much simpler when you're making more complex stuff and you want more finer granularity in how you edit some of these details,

So I hope this was useful and I will see you in the next video.