How to Make a Branded Podcast Frame in Figma

It's time to make your video podcast stand out with a branded frame. Learn how to make two different branded frames so you can add it to your Riverside recordings.

Overview Page

00:01

You've seen video podcasts that look like this. It's time to make your video podcast stand out with a branded frame. In this video, we're going to show you how to make two different branded frames for your video podcast. When you have a recording with multiple people, you have a few different options to present it. You can have each person come up onto the screen when they're talking, which can work fine. You ultimately miss out on reactions, you can have odd moments where people are talking over each other. You can then have a single frame, which puts everyone's face in the gallery view, but has the branding of your podcast or company. There is a third option where you can combine the two, but we'll talk more about that in another video. For this two person podcast of me and Abel we'll stick with the side by side format, but you can easily get more creative if you have more than two people.

So the first one we're going to create in Figma, you can see here that this is my Figma document with a lot of different options. So we're going to go ahead and create our frame by pressing F and then create a 16 by nine looking frame. We're going to go into the top right hand corner and edit these so it's the resolution of a regular 16 by nine video, which is 1920 by 1080. So now we've got 1920 pixels to work with on the top and 1080 to work with on the side. Now, this is important to make sure that our aspect ratios are square. So first we're going to create sort of a template for where the faces of the two people are going to go in this podcast. We're going to remove these at the end, but I'll explain that more in future. One thing, name your frame. So I'm going to name this frame for podcast. So now we know what we're going to have when we export it.

01:41

Now, first of all, create your rectangles. Just make them a shape that looks kind of like it's going to fit correctly. Now here's where we change the aspect ratio of them. We're going to go 850 by 750 Heights. So it's slightly wider than it is taller. We're then going to press alt and drag that. You can also press control C, control V and it'll copy that layer. And now we have our two layers side by side. Now to make sure these are distributed correctly and aligned well, we're going to use the line tools in the top right hand corner. We're going to align it so it's in the middle of the frame. And now we've got our boxes nicely aligned.

Now we're going to create the actual frame around them. These are just reference so we can align different things to them. So click your rectangle tool again, which is up here or press the R key and then drag in a rectangle so it aligns nicely at the top here. Now here's where we're going to change the color to your brand color. So I'm going to select the Riverside brand color, which I've used in this document before, but it's 0E1745. You can just implement your hex code here. Now, once you've done that, you're going to press alt and drag it again, alt or option on Mac. And now we've got our top and bottom. Now we can either press R again to create another rectangle to put it on the right hand side, or we can press alt and option and drag this and just use these tools to resize your frame. And use the snap features so it goes in no problem around these. Drag that to the other side, and you'll notice it fits in perfectly. Then you drag this one into the middle and then use the drag tools.

03:40

So we have a slightly thinner bar in the middle and slightly wider bars on the side, just so it draws your eye into the middle there. Now drag your Riverside logo onto the frame. I have one here. So I'll drag it on. I'm zooming in and out, just using my track pad. I'll then center it here, or you can center line using the center line tool. Now I'm going to add text. So my labels for both myself and Abel. So I'm going to press the T for text or T up there, click and just type in your label. So I can see this is way too big at the moment. So I'm going to press K and scale it down to a point I'm happy with. I'm also going to double click on it. So select it all and I'm going to change the color to white, which is FFF on your hex code. I can see that still a little bit too big. I'm going to press K again and just scale it down to a point I'm happy with.

Then I'll make sure it's aligned with this box by selecting them both and clicking the align tool. And now that's lined up nicely. Then you're going to press option or alt and drag that. Little tip here, you can hold shift and you won't be able to move it up and down just side to side and wait till it aligns with that box and name this one, Abel. Now with these fonts, you want to make sure it's your brand font. You can change the font here. We use Poppins for Riverside. So we're just going to stick with that font for this particular example.

05:16

Now we've got our frame built. We're pretty much ready to export. There just one final thing we need to do. And that's actually to get rid of these boxes. Now, these boxes were just there so we could align the text up and make sure we could put the frame around it, but we don't actually need these. Because if you think you've got to have the videos coming through this frame, because we're going to put it on top of the video. So you simply select them both and delete. Now, one thing you want to do before you export in Figma is make sure when you select the frame, so you select the whole thing, click frame for podcast, click it in your layers tab. You'll see there's fill here. Now we don't want this fill, because that means it's going to be a solid block. So you just click this minus button and now it gets rid of the fill. This is now a transparent image and this is really important when we go to export it too. So go to export in the bottom right hand corner.

Now make sure your frame is selected. Click the plus icon. Make sure it's a PNG. This is so important. If it's a JPEG, it doesn't have that transparency. So we're going to keep it as a PNG. Going to click export. Going to choose to put it into assets. We're going to call it frame for podcast and press save. And there we have our first frame built in Figma. Now we're going to make a second, slightly more interesting option in Figma. So you can use that. So we're going to take the same steps as before. Select your frame by press and F, drag it so it's pretty much 1920 by 1080, and then change your width here and your height so it's the correct dimensions. Zoom in, rename your frame. Going to call it frame for podcast two. I'm going to create my little template borders by placing R for rectangle, making one that looks about right, making it 850 by 750.

07:10

Now we can move these if we're not particularly happy with them. We're going to duplicate it by pressing alt or option. We're going to put it so we're happy with it. I'm actually going to take this to the left hand side and move it 80 in. And from the other side, it's going to be negative 80 from 1080. So it's actually just going to be a 1000 on the X axis and I'll make sure these are aligned. There we go. We're all aligned with our frame. And now I can see here with what I'm actually going to build. I'm going to need a little bit more space at the top. So I'm just going to make these slightly smaller for both. In fact, I'm actually going to make them square. I'm going to make them both 700. I'm going to drag it. Okay. Going to make a difference between them.

Here, I'm pressing shift and the arrow keys. I'm going to do it 10 times and that'll move it 100 pixels. One, two, three, four, five, six, seven, eight, nine, 10. So that's moved it 100 pixels. I've now got both of these. Going to drag them so they're well aligned. So for this frame, I'm going to add in a few different things. I'm going to add in the title of the podcast, the logo, I'm also going to add in some name tags and also the location of where the person is. So we're quickly going to add in our frame. So the same way we did it before. So add your rectangles, make it the right color, make it the color you're happy with. We use like a different one for this one. Move it to the top and the bottom. Create my text, press T. Start writing, going to this the James and Abel show.

08:58

Going to select it all. Change the fill. Going to put the title there and then going to take the Riverside logo, going to drag it from the other one and drag that over there. Here's where you put the logo. If you want to scale things, press K. Move it. There you go. So I've now got the title of the show. I've got the logo. I actually think that's slightly too big. So I'm going to press K, make it a little bit smaller. There you go. I'm happy with that. You can also add, say the episode number. So say I'm going to make that a little bit smaller. I'm going to press alt and drag down. I'm going to call this episode 002. Going to align at left. I'm going to align the James and Abel show left too. And to add a bit of hierarchy, I'll make this font regular.

So there you go. Now we have the title. We have the episode. To add a tiny bit more hierarchy, I will make it slightly smaller in terms of the text size. You might be able to add a longer title here if you'd prefer. Now what we're going to do is we're going to add some name tags. Now we're going to do that by using more rectangles. To select our rectangle tool by pressing R then drag it over. Now, what we're going to do here is once we delete these, you'll see it's going to go over the top of our actual recording.

10:37

So I'm going to make this a different color. I'm going to make it say, let's make it Riverside purple. I'm also going to add a slight bevel to these to make them look a little bit nicer. So up in the bevel I'm going to put five. Yeah, I'm happy with that. And then drag it to the other one, other side. And now I have a place to put the name tags. Now I'm happy with how the font looks here. So I'm just going to drag this into this box in the layers panel. Make sure it's above the rectangles. I'm going to name myself, so James McKinven. In here, I'm going to put my location, London.

I'm going to change the font to regular and also change the font size. If you want to get a bit more creative with this, you might want to put it in another box. So I'm going to make the name tag a little bit smaller, and then I'm going to get a little icon, get an icon from Feather icons. I'm going to type in location, mapping. I'll then download. Drag that into my Figma document, make it white. And there we go. We've now got a location. So as you can see, I've got my name and a location. We're now going to duplicate this for the other side. So instead of using that one we created previously, we're going to select all of these items. We're going to press command G to group it together. So now we can drag it onto the other side.

12:39

Press alt and drag it over until it's nicely aligned. And there we have our template made, which is just a little bit more interesting than the other one. So we'll select it. Go export. Remember from the last one, we need to delete both of these template frames. So delete those, click your frame for podcast, press export, make sure you remove your fill, export your frame. I'm going to call it frame for podcast two. And now we have two different frames made in Figma. So there you have two frames ready for you to use for your video podcast.

We'll go more in depth on some more frames for the episodes with more than two people. So make sure you subscribe to the channel for that. In the meantime, in the description of this video, we'll leave a link to the Figma document for both of these templates. So you can amend these and use them for your own podcast. We're going to be producing a bunch more videos on this YouTube channel about podcasting, video interviews, and more. So if you want to learn more about starting and growing a podcast, make sure you subscribe to the channel and turn on notifications so you don't miss an episode. Thanks for watching.

Ready to record your next video or podcast?

The next-gen audio/ video recording platform

Try for free