How to Make a Branded Podcast Frame in Figma

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.

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.

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.

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.

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.