Last year, Figma announced they were creating a community where everyone can easily share their designs with the world.
Every member of the community also has a public profile where they can showcase their work. This profile has some options for customization such as an image banner that you can fully customize to your liking to make your profile more unique and memorable.
Figma Profile Banner Dimensions
The recommended thumbnail dimensions are 1680 x 240 but in most situations the thumbnail is cropped depending on your screen size. There is a 1024 x 240 “safe zone” which will always be displayed on any display bigger than 1024 pixels wide.
On screen sizes below 1024px a mobile version of the banner will be used which is just 120px in height. This version can scale all the way down to the smallest devices such as the iPhone SE so the safe zone for the mobile version is just 320 x 120.
Your profile picture is positioned on top of your profile banner and is always aligned to the left with 26px of padding the to left of it. The total dimensions of your profile picture are 124 x 124 and it's surrounded by a 4px wide white border making the total dimensions of your profile picture 128 x 128 pixels.
Free Template
As it's very difficult to create a profile banner that will be cropped and has a dynamically positioned profile picture on top of it, I created a template to make this easier for you.
The template has the correct dimensions recommended by Figma and transparent overlays and guides so you can be sure none of the important content will be cut off!
It also five different device previews for phones, tablets and a laptop so you can preview your new banner on different devices.
You can Download the template and use it for free, no attribution required.
How to Set a Custom Profile Banner
Once you're finished creating your custom profile banner you can update your profile.
- Navigate to your own Figma profile page, it's important that you are logged in.
- Hover your mouse over the profile banner and you'll see a pencil icon appear in the top right corner.
3. Click this icon and select the profile banner that you exported from Figma earlier.
4. When it's finished loading, reload the page and your new profile banner appears!
Unleash Your Creativity
Enjoy making your custom profile banner. They are a great way to express your creativity and make your profile more unique.
Don't forget to ping me with your creations on Twitter. I'd love to see what you come up with!