Design Exercise Continuation

A team builds a Figma dashboard prototype for SupportPro, defining ticket categories like recoverable and system failure, then styling responsive tables with buttons and icons. They document the design in Notion, embed it into presentation slides, and set up OBS for streaming.
Chapters
Okay, stream.
How's the stream looking? Let's see. It's working like a charm.
Like a charm. How's the Mic, mic looks good.
Can I turn it up? I don't even know. Mic volume, is that what this does? Hello, hello, hello. Testing, testing, testing, testing, testing, testing, testing, testing.
Oh, that looked, that looked a little louder, but that's just me moving it.
Yeah, it's kind of far.
Hm, I have the mic like right here-ish, and this thing doesn't really get much closer. Oh well, I could use the, uh, the audio from the webcam, but man, whatever, whatever. So let's go back to finishing this. Oh, I do want to tell everybody in the Discord that I'm live.
Okay, so I've had some more thoughts about this, to be honest. So I'm gonna say— now, where is the old ChatGPT?
Now ChatGPT gave me a good list of, um, activities like reasons why, and let me write them down here. I started making a table.
Yeah, so here's 1, 2, 3, 4. Okay, let's say this is recoverable, and the actions would be retry Update.
Let's retry.
Schedule retry.
So then we have the next one is fix required, which is data issues. So what you would do is edit, edit data.
What else?
Request missing info.
Update, I guess, same as edit.
Then third one, routing assignment issues, reassign ticket. I don't really know what change priority or escalate mean, to be honest, so not gonna do that.
Human interaction. Respond, reassign, and then there's system failure.
Retry connection.
Escalate to engineering, switch to fallback, or I guess update connection. Okay, so in this scenario, navigation still stays the same, everything's cool, but we really want to give exactly what the, what the agent needs. When they need it.
So for me specifically, recoverable—
I do want to have a priority, so it's even above that. But then we want to have—
let's put those 5 sections. Data issues. Assistant needed. Look at that. Look at that.
And Human needed. I gotta come up with a better name for that.
That's just lame.
And then system failure.
Let's go with issues.
Okay, so realistically, the goal for a support agent would be to come here and kind of knock these things out as a, as a day-to-day support agent, right? Because you're going to have two different main users: ones that manage the system and then ones that are completing the task. So I'm gonna have to put together like a presentation for this. It's gonna have to, to describe this. So I really should start documenting this in like a, an actual, what is it, an actual note.
So let's see, interview. Okay, so we got the design exercise, right? So problem predispositions, we've got that. We've also got— let's get into PRI. What is the I? PRI. PR. Insights.
Oh, research.
Research. Insights. P-R-I-N-C. Prototyped. Strategy. Sorry about that, I was struggling for the principal design framework.
Okay, so really I want to talk about the concepts.
So we have two main users, or two user types considered.
We have support agent and systems admin. Support agent, their job is to fulfill tickets, help customers. The systems admin, they manage the software and the support agents. Okay, right, so certain things, for example, they may manage automation.
Grant permissions, grant permissions.
I don't need bullets for these, etc.
So then the prototype obviously is going to be what we have here. So ideally, as a support agent, your job is to clear this dashboard. You should be coming here and trying to fix everything that's on here. And we have areas that are, you know, priority So this is like basically where you should, should start, and then you have issues this way.
So let me just do a quick, um, let me move this into here. Okay, partially concerning because of how long it is. So everything's a priority, so let's get rid of priority.
Customer name, subject, and then we're missing an action.
Oops, that's not good. So what I could do Let's make this smaller.
Subject.
And then assignee does not need to be 320, let's do 240. Okay, and now we're just gonna make the subject fill container.
160.
Okay, that's right. Oh, I know the problem here. So I go like this, and they all should fill container.
Oops, so that didn't—
that's right, that's right, this is on fill, this is on fill. Okay, let's just say these need to be on fill container. Nope, I'm doing the header, I need to do the rows. There we go. Okay, and this last step, 320, and this one should be 240.
That should be 240.
Yeah, so a lot of the— like, I can definitely get more detailed with the table, but I really want an action here.
I think that's what's, what's missing.
That'll make it all come together.
And realistically, I'm probably gonna take this off, but that's fine. 240. So I can just duplicate this one again, and then what are we gonna do? I could break this and then add like a button.
Do we have any buttons? We do not have any buttons. So what's one of our actions?
Let's say update And yeah, fine, we're gonna add—
oops.
So, button—
Oops.
And this is We've got a ghost button here, which just means we take off everything.
There we go.
So now we've got our button real quick, real quick and easy.
A fun fact, I saw this thing somewhere which I thought was kind of cool, gives you more diversity. So say you, say you don't want like— say I saw this, right? Let me, let me explain. So you see our secondary button right here. Now this is cool, but there's sometimes where you need almost a different button, or you have a button that's like a different style. Let's say we have a complementary color to this, right? So instead of brand primary, maybe it's like an orange or something.
Let's do this, or accent color. I'm gonna call it an accent color, right? And then we're also going to change this to the accent color too.
I'm not sure if this is ADA at all, but what I saw and I thought was kind of cool is someone had a secondary type where you had, um, outlined or filled on a button. So I was like, oh, that's kind of cool, you know.
So in this one you have the surface, and then this one, all right, you go one level deep and then you have surface, and then this one you leave it the same. Okay, and then watch here. You add a new variant, you say style, I guess, right? And then here you have button primary, and then you have filled.
Now me personally, I like to do a lot more of the toggles, so I'll call this to filled.
Call this true. This is ghost, false. This is secondary, false. And then this is primary. There we go. So now when you have your instance, right, you can make it like that, which is kind of cool. One thing we also need to do— boom, boom— we need to make sure that these these fill the container. Actually, now it's got a hug and make sure these are all hugged too. Okay, cool. So everything's going to hug.
Sure, whatever.
Let's take this, Command+C. Now this is going this way, so I also want to add another one that is a ghost that says "View Details." Okay. Oh, okay, so now you hug that, and then you— sure. Okay, now I feel like it's— oh, look, look, now this got weird. Last step needs to be smaller. That's 320. We need to put that to at least like 160.
Ah, gotta be 240.
There we go, but I still feel like it's It's a little tight here, so— Okay, cool, so that'll work. Just need to select all the table rows. Reset size, fill.
Boom, perfect, perfect table.
So here's some priority tickets and Let's see, this needs to hug the content. Oh, this is Phil. This needs to hug the content and should also be like that. Okay, so I've been—
I don't normally do this type of thing. I normally have things in like containers and stuff, but I've been wanting to mess with this a little bit.
So I want to look— fix stay in place is not even an option, probably because it is a Why is it—
oh, because probably because it's auto layout.
Okay, surprise!
Where's the camera?
Right here.
No kids, no kids, no kids, no kids on stream.
Oh, thanks babe, I'm on your camera now.
Oh, hi everybody, no kids.
Hey everybody, it's a great—
oh, I love it.
Yes, he has a black queen. Well, don't want to get you banned.
I love you.
There's no one, there's no one even watching, I don't think.
Well, if they are—
here, let me tell you about the design though. Let me get your opinion, because I do enjoy your insights. Okay, hold on, let me fix everything, because I just broke everything.
It's a beautiful day, but yes, continue.
Okay, one second.
Aaliyah, thank you for your participation. Can you get your little paint, anything you have for your paint assignment, and then you can play while you're waiting for me to be ready too. And we can go outside and do that in a little bit. I say 15, 20 minutes?
Okay.
Playtime?
Okay.
Oh wow.
You have something special for me.
I do.
After this, I'm gonna give it to you.
Okay, okay, this may work. Nope, that did not work. Let me put this here. Starting point. Okay, so now we have a prototype.
Let's take a look at the prototype.
Okay, okay, good.
This works. Okay, so on SupportPro, imagine you are a support agent, right? You're coming here and, um, you're coming here, you log in, and essentially your job is to kind of clear this thing.
Okay.
Right?
So as you can see, there's, there's kind of a lot, and I haven't filled this realistically, but you have a total of 9 priority tickets. There's a bunch of recoverable tickets, data issues, assistant needed, human needed, system issues. Now realistically, ideally, you don't have— you know, if you solve these, you don't have as many of these. But you can see here the recent activity, uh, the customer, the subject, the last step, the assignee. So no one's assigned, and you can update the ticket or you can view the details of the ticket, right? So this is kind of— you're essentially going here, going update, entering the information, update, entering the information depending on what type it is. Now with the priority, it's, it's, it's supposed to be all of these grouped in the ones that are the most important, right? So that's kind of, uh, I'm still working on this But generally, this is the— are you watching?
Are you looking at the—
I'm looking at you.
Yeah, I'm showing you the UI.
I was looking at you exiting.
Yeah, so depending on the type of user you are, you may need to go into tickets and reports and automation. But generally, you would come here and you would just focus on these tickets daily and knock them out. And that would be your assigned—
I love that.
I love that. That's assignment management, something I, I've had prior previous experience, which is a very understandable user design breakdown. I really like what you did here.
Yeah, thank you.
It's very nice.
I'm gonna add a little more context because like it says recoverable, but I'm going to describe what that is. Some of these, I broke it down here, some of these are going to have different things. You might need to retry You might need to update and retry. Sometimes you need to schedule retry. Sometimes you need to edit the data or request missing info.
Yeah.
Reassign the ticket, respond, reassign, you know, retry connection, update connection.
So depending on what type it is, it will have different status updates.
Filter back through, right?
Yeah.
I love that.
So like, let's see right here on this one, recoverable.
Mhm.
It would say retry or update or something.
Nice.
So retry, update, retry, completed.
Maybe no.
Well, all— I'm messing up cuz these are all— these would be under here. Okay, under recoverable. So all these would be retry, update, right? So if you hit retry, realistically a modal pops up, it says it's retrying, and it's going to say failed or not, and then it gives you the next step.
Okay, right.
But you know, so maybe in this scenario, let's see, what is recoverable mean. Look at my ChatGPT over here to your right. So it says retry. It says like message failed to send, email bounced. So the email bounced is like it, um, you need to update the email, right? Something like that. That's why they have some that are update.
Um, that's cool. And as each item is taken care of, the ticket number item goes down.
Yeah, exactly.
To resolution.
So let's say there are 15 tickets in total. Well, let's, let's use— yeah, 15 tickets in total. Let's say there are 5. Let's say there's 3 in the retry.
All right, so realistically this looks more like this, right? Because I need to—
I don't want it to look too cumbersome.
Yeah.
Okay, in the data issues, edit data or request missing.
So let's do some of those. Edit request. Edit. And there are 5 of these, right? 4, 8.
Okay, and then assistance needed, let's do 2 of these.
So 3, 5, 6, 7. Let's do another 7.
So what's the math here?
You got it?
3, 5, 8, 9, 10, 17.
That's too many.
So let's do another— if we do, if we have 15 in total, so let's do 4 human issues.
Okay.
And then 1 system issue. So does our math add up?
Yeah.
15, 16, 17.
No, no.
5, 6, 7, 8, 9, 10, 15.
Perfect, perfect.
And let's delete some so it actually matches.
Great mockup.
It's getting there.
It's, it's, it's funny because I generally like this like clean look.
Mm-hmm, it looks really nice.
I need to, I need to right now look to see the scrolls going over it. I need to clip the container, but I'll do that in a second.
Okay.
Um, what that is is this right here. See how it's like overflowing? Normally I would do this, I'd go into here.
Let me call this scroll. Oops, no space there. Scroll container.
When I clip this, everything stays inside that, that box.
See? Okay, so yep, 3, 2, 3, 4, 5, and then I need 2 here, 4 here.
Perfect.
So I just need to take off this one with the— to me.
So now when I'm working, I do this though so I can see it. And I was actually— it's funny, before you came, I was working on this thing because I, I do it like this because this is how like development and mobile development works. I would normally have this thing right—
oops, I'm blocking my camera.
I would normally have this right here and I would have another component that fills it where you can see it. Um, but then like I said, you kind of can't see it. You have to look at the other component to see it, which may be difficult for developers. So another way to do that, and I usually use Auto Layout for everything everything so that basically it automatically resizes. Um, with this, there's also frames that you manually set, and I don't normally use that, to be honest. Yeah.
Um, how'd you like the experience of this one this time doing it?
I, I haven't done it, so I'm going to test it right now. So you can set things as fixed where it stays in place.
Yeah.
And then you have Let's see. So when it's inside a—
what's it called? There. So now this page content is really weird, so I guess I have to, I have to like dynamically position it. See, it doesn't—
so in code I would just add spacing here.
Okay, so here, I'll do it like this, like this.
And then on this part, the scroll container, this is what, 400 pixels wide?
So on this part, where's the scroll container again? Here.
I'm going to add 400 pixels to the left there, so that puts this all in the right Okay, okay, that's cool. And now if I make this as long as it's supposed to be, which is annoying because look, I have to manually resize it.
So let's see if this worked. Not at all, which is weird. Okay, look, this part is actually not— it's something else that is all the way along. Okay, so now this should work. See?
Oh cool.
Yeah, except look, it's, it's on top of the thing, and it may be because there's no background here.
It might need just a that. Yeah, there we go.
So that's cool. And this stays, so it's kind of the same, but I'm using a lot more like almost absolute positioned things, which is kind of weird to me. Like this, you know, like it's— if you see, I have a set 72 pixel high—
oops—
thing. I, I guess what I would normally do is I would create another container like this, the page content. I'd put it fully like this, and this is where I would add like dynamic. So 400 here, and then I would do— how much did I say? 72 up top, right? And then this would— I would remove the 400. So now the page container actually sits perfectly, you know, aligned with everything, but it has spacing on the side and on the top for the header and this. So now I can, I can comfortably just use everything inside in the amount of space I'm supposed to.
Still works.
Yeah, I like the other way I do it. You saw it worked perfectly.
Yeah, but the Yeah, I thought it was just different ways to do the same thing.
It is kind of a better way. So the, the— what makes it better though is how the developer is going to use it. Here, I'll show you an example of how this is done practically. So this is— and this is theoretically how I'd imagine a developer to, to look at it. So you can see, um, also the MVP. So if you look at this file you can see all the purple things. They'll be outlined in purple. See these? Those are all components, right? Really, this file is just to show you the flow of how you would navigate it. But when you wanted to— say you're a developer, you want to build this page— you would go to this library here, and you can see all the things that are on the page, right? Here's the entire page. But what about this section here, this chapter section, let's say? Um, well, let's go over here. We see it's right here. You can see there's two different states. There's the empty state, there's the filled state. Here's the— what, what the developer should build, right? It has the empty, empty section that says, hey, no chapters here, and then you hide this based on logic. So if there are no chapters created, show this. If there are chapters created, you hide this. And that's how a developer would work realistically.
I like this because it reminds me of a family tree. When you zoom out, it feels like a little family tree of products.
That's how it, how it is realistically. Like, it's more like the tree. And to me, this makes user—
not the experienced designer. Sorry.
Yeah, yeah.
And that way you look like this. Look, smallest piece which makes up bigger piece which makes up biggest piece. You know, so to me, this is how you would, um, you should build. And you can still do this with the other direction, but if you look, I have a page template that I can use on everything, so I can keep that consistent as long as it's built this way. So that's just a little, a little, you know, something I was kind of debating on best practices, but now saying that out loud, it makes it really validates the way I was doing it originally was the right way. And then here, so you see how like this, when I look at a page on here, none of them overflow because I hide them. I don't even look at this. I just slap this page in, make some adjustments to the page, and then that's— it's done. You'll see I actually use some of these pages multiple times. For example, this dashboard or the profile, I see it again here, right? Here's a filled state of the dashboard. Same page just with a different— with some modifications that I just easily tweaked because I can control these sections. For example, say I want to show the empty state, I can flip the switch. Boom, empty, everything's gone, right? Back to updated. And that's all I need to do to show different flows. Maybe I need to update some things, but I would just unhide some things and make those modifications. Uh, the profile page Right, completely different. It's got more stuff here, it's got a different person. And so like I can make those modifications on here to show the flow, but to build it you should come and look at this page here. Um, but, but I don't like that. The problem is, is the level of maturity for developers, they don't know that. They're not like, oh, let me look at the specs. They kind of just go wing-ding it and That's what we get.
That's unfortunate, but you have exactly what people probably are looking for in that, uh, concept, and you go deep into the details, and I really like that. I think you showed your work and it really looks good.
Thank you, thank you.
Very valuable.
So what I think, one more thing while we're here, is I'm gonna make just the top 3 priorities.
Oops.
So these are the top 3 that are— they can be from everything.
All right.
So retry.
Edit. Let's say what was the One of the other ones, um, request.
I have to look at the other ones, but yeah, so this is what I'm doing on the stream and this is what I have to present.
Uh, you can see I'm putting together some notes on the old Notion right here on turning that what I just showed into a presentation that I'm going to be sending, uh, together on Monday.
Oh, that's really exciting. It looks Looks great to me.
Yes, thank you.
I hope they love it and it's everything that it needs to be. Looks like you're hitting all those concepts and bullet points that you showed throughout. And yeah, babe.
Yeah, thank you.
Thank you for sharing.
Oh, thank you.
Thank you for, uh, being a guest star on my stream.
Oh, of course. I will be here time and time again.
Oh, look, you look radiant.
Thank you.
Look at your perfect skin. Look at your beautiful little sunscreen.
A little happiness, a little sun.
That'll do it, that'll do it.
We spritzed the water and took pictures of flowers.
Oh, that's always fun.
Yeah, we're gonna go look at them right now. Okay, compare notes. I love you.
I love you too.
Yes, I hope everybody enjoys the rest of your stream.
Yeah, all zero people. That's okay, they can watch— they can watch it later though because it uploads to YouTube. I imagine, uh, you and then I'm making my little commentary that may have Yeah, I think, I mean, I enjoy our dynamic because I, you know, you're not like a UX designer, so your experiences around— yeah, your experiences around this are completely different than mine or other people's.
So it's cool.
I'm sure people will enjoy seeing that, that insight.
Yeah, that's like funny, like you got your serious and then you're like, a family tree? This is not a family tree.
Yeah, lowkey.
But it's cute and it's fun. It's like what a user designer probably goes through is someone not understanding all of it, but, but being there to try.
All right.
I love you.
I love you too.
So now I do want to add those Descriptions. What is happening here? That's what I want to do. No, don't want to do that. You here, you here, and the header also. There we go. Um, tackle these immediately.
Recoverable.
I'm just going to take the, um, kind of descriptions from here. Whoops. And then I can take this and delete it. Data issues. Please, assignment assistant. Assignment needed. Assistant needed.
Oops.
This is a very extensive, um, exercise. Really? Yeah, to be honest. Oh, okay.
I'm locked in.
I have a problem with these. I feel like it's not— oh, oh, someone got something to say over there. What is it?
What?
Okay, and then assistant needed.
Mhm. Respond.
Okay, and I think what would make this even better is some iconography around here to like really show the, um, just to give it some more visual appeal. So like, it increases scannability as a user. So let's see, priority SAP time.
There we go.
Can you tell me what—
now I'm going to do the Duotone. Shoot, going to have to do all this to the icons.
Recoverable.
Data Assignment Assistant System. What is this icon?
Loop?
No. Refresh? Kind of.
Yeah, I think after, after I finish adding this, I'll, I will, um, work on the, uh, presentation.
Thank you, because I am tired of doing this.
It's like harder to do without all the— like without fully committing to it.
Thank you, my love. Okay, now I need to fix this component here. What did I do?
Okay.
Recoverable. Data issues. Hmm. I know I did a data here.
Oh.
Okay, so—
This is what you get. This is it.
In the line, man. Priority tickets. Now let's make the personal portfolio. Make some slides with the matching name. Okay, so Design exercise.
Okay, I've never embedded a prototype into here.
So let's look how to do that. How to add a prototype to Figma slides. Live prototype right here. Oh, that's sick. Oh, I'm seeing. So you here. Let's lower it by like 80 pixels. Center, center. We'll throw a background color on the whole thing. We really should have some kind of, uh, let's do this.
Proto—
look at this. We're going to do one of these. And this whole thing should probably have 40, 40, embed, fill the width. Yeah, you know what, let's fill the height. Nope, that's not gonna work. This may. There we go, clean as a whistle. Oh man. Okay, so what slides do we need? So looking at our prompt, what was the The, um, so let's say problem with this position, um, research insights Concepts, user types, user journey. Okay, so let's keep everything consistent here. What font am I using? Sen. Yep, everything is -4.
That's just the spacing.
It's not a big deal. Oh, okay, cool.
I got that set up.
I got that outlined. Let me do some research here. Okay, so, um, how to mark OBS. Create chapter marker. Let's see. Settings, hotkeys. Hmm, sure, whatever, whatever. Let me do some other notes here. So I need a thumbnail, scenes, BRB thumbnail.
What else do I need?
Stream name. Okay, let's click all these details. And this is YouTube. What else do you need? Um, this is OBS. What else do I need? I need audio setup, I need the stream info. I think that's it. Okay, well, that was fun.
Be back later.
Let me check.
I'm gonna check the stream, see how it goes. Actually, let me try the hot—
the thing, the hot swap. What is it called? Add chapter marking. I'm gonna do M.
See, I don't know, maybe because I'm not recording.
I don't know if it's recording it. Studio mode. Oh, oh, so I can switch, I can transition between one scene to another scene. I see. Start virtual camera. What is a virtual Camera, you know what that is. Start recording.
I'll have to watch the video, which I can do.
I just won't do it on stream.
Or you can actually use the integrated chat.
Jeez. press the key, or you can set that hotkey under— here, the number pad is going to work completely. If you're a streamer and you're not using the replay buffer, you are wasting hours of your time. Over the past 7 years of streaming, I've wasted so much time by either scrubbing my VODs for clips after I ended, or screaming at chat to clip things and risk missing those epic moments. But forget dealing with all those problems. Let me show you right now how to bypass all that BS and how to start using the replay buffer in OBS Studio or Streamlabs to start capturing high-quality clips in real time. And I got a special— I got a special tip for you guys at the very end of the video, so make sure to watch until the end. Step 1, open up OBS. Open up OBS Studio or Streamlabs. It's pretty much the same process for either, but I will point out some key differences. First thing you should notice is this beautiful starting soon screen, which if you don't have one, you can grab it in my streamer starter pack link. In the description down below. But you guys might notice that I have a button that says Start Replay Buffer right here, which you probably don't. So the first thing we need to do is actually go into the settings of OBS or Streamlabs, and then what we're going to go and do is click on the Output tab right here. And if you're on the Simple mode, you can actually scroll down and see at the very bottom where it says Replay Buffer. You're going to want to make sure this is checked. And if you're not on Simple mode, you're on Advanced, if It'll be located actually right here. Just make sure to enable the replay buffer by ensuring that it is checked on whether you're on advanced or simple. It doesn't matter, just make sure it's checked. So you'll notice first that it has a maximum replay time. This simply just means how long the clip is gonna be after we tell it to clip something. You can have it anywhere between 10, 5 seconds, or recommended around 30, all the way up to about 4 minutes, which would be 240 seconds. However, if you do anything longer than that, you're you might as well just do a normal recording instead. I usually like to keep mine around 30 to 60 seconds, mainly because I want to usually post these to Instagram Reels, TikTok, or YouTube Shorts. So usually I like to keep it at about 60 seconds so that way it's not going to be over a minute, especially after I'm done editing it for TikTok or Instagram Reels or wherever. So this one's pretty easy. This is just the length of the clip when we press our hotkey, which I'll show you how to do in a second. Now the maximum memory, you're not going to see this option if you're you're using Streamlabs. But basically, this is just going to depend on how much RAM you have on your system. You could leave it at 512 megabytes and see how it goes, but the internet suggests that you keep it between around 1 gigabyte, which would start at 1024 megabytes, and 4 gigabytes, which would be 4096 megabytes. So depending on the strength of your computer and how much RAM you have, you can keep it between there. But truthfully, you can always start at 512, and if you're not happy with the quality of your recordings, or if you're running— keep it up— even more detailed guide. So now that we've enabled the replay buffer and we've set up our settings, we're going to hit apply, and that's when you're going to see the start replay buffer button appear in your controls on OBS Studio or Streamlabs. Now if you're on Streamlabs, it's actually going to be right next to the go live button. I'll put a picture on the video right here showing you exactly what it looks like, but there's a couple more things that we need to do to really take advantage to the maximum effect of the replay buffer. The next thing we need to do is actually going to the Advanced tab. We're going to scroll all the way down to where it says Hotkeys, and we're going to make sure that the Hotkey Focus Behavior says Never Disable Hotkeys, so that way you don't run into any issues when we set up our hotkey to tell OBS or Streamlabs to save the replay buffer clip. So make sure that says Never Disable Hotkeys, click Apply. Now this is where the magic happens. This is where we're going to set our hotkey. So anytime we press a hotkey, it's going to actually save the clip. So we're going to navigate over to the hotkeys tab here. And this is where a lot of people get confused. So pay attention. First, you're going to navigate to where it says start replay buffer and stop replay buffer. You would think that this is the one that controls when you actually take the clip, right? Well, you'd be wrong. And there you're not the only one because there's a lot of people. All this hotkey is going to do is going to turn this button on to enable you to then scroll down and use replay buffer, save replay. This hotkey right here is the button you're going to hit in order to save that 60-second clip.
Okay, where is that? You play No, see, I'm not seeing that. Maybe it's because I'm already streaming, so let me stop and restart. I'm about to be done in a second.
that we told it to under the output tab, which is right here. So if you want to have a hotkey set for turning the actual replay buffer on and off, you can. I think it's a little confusing to do that, so I don't. And there's also a setting if you go to general here where you can automatically start the replay buffer when streaming. So if we hit that and then we hit apply, anytime we're streaming and it says start streaming, it's automatically going to start the replay buffer, which does most the work for us. That being said, you do not need to be streaming or recording to actually use the replay buffer at all. So if you just want to game offline with your friends and just clip hunt, you could totally do that. All you have to do is just click on Start Replay Buffer like this, and then when we set our hotkey, you'll be able to take clips without streaming or recording, which I know a lot of people had questions about. However, if this replay buffer is not active, which it currently is— so if we turn it off like that and it's not, and you press your hotkey to save, the actual replay is not going to do nothing. So in order to actually save those clips and use the replay buffer, we'll go to Hotkeys, we'll scroll down to where it says says Replay Buffer, Save Replay. So this is where I like to use my poverty Stream Deck, because if you're familiar, I have a keyboard that has a little number pad like many of you probably do. And so this number pad can actually have up to like 9, 10+ keys because they're different than the actual num—
numbers.
I actually have a little number pad like many of you probably do, and so this number pad can actually have up to like 9, 10+ keys because they're different than the actual numbers. On my keyboard, I just have to make sure the Num Lock key is turned on. So I enable the Num Lock, and then now if I press the 9 key on my number pad, which is to the right of my keyboard, and not the 9 above the actual letters where you type— I'm going to press it right now— it's going to say number pad 9, which is different than if I backspace that right there and I press the 9 above the letters. That's just a 9. So this way, if you have the Num Lock enabled, at least for my keyboard— yours might be different— then allowing that Num Lock to be on and pressing the numbers Hm, I need to restart OBS.
Okay everyone, this was fun. I will see you later.
More from Ritzie

I started my career doing lots of graphic design and having to create and edit images.

How to Upload a Project to GitHub (Using Claude + Cursor) | Step-by-Step Tutorial








