Make a custom profile card – Figma Learn - Help Center

If you're using UI3, Figma's new design, some parts of this article might not match what you see in the product today. We appreciate your patience while we make updates. Learn more about Figma’s redesign →

Project overview

Product: Figma design
Topics: Adding and styling frames, shapes, text, and images
Length: 20 minutes

A complete rectangular profile card with an avatar, name, and description In this project, we’re going to build a custom profile card. You can make one just for yourself, or make a template so everyone on your team can introduce themselves.

To create a Figma design file, click on Drafts in the file browser. Then click the New design file tile. You can also type figma.new in your web browser to jump straight into a brand new file.

Build your layout with frames, shapes, and text

Let’s start by adding all our objects to the canvas, including:

A frame to contain the design
A rectangle to use as a color or image background
An ellipse to use as an avatar
Two text layers, for your name and some information about yourself

Don’t worry about how everything looks as we’re adding shapes to the canvas! We’ll get everything looking just-so when we start using the design panel to modify our objects.

Add a frame

What is a frame?

Frames are the main building blocks of Figma. A frame is a container that holds design elements such as shapes, text, and images. You can use them to organize and structure design elements on the canvas.

A frame can be any size and can contain any number of design elements. Frames can also be nested within other frames to create complex designs with multiple levels of hierarchy.

Let’s start by creating a frame and adding objects to it.

Click the Frame tool in the toolbar.
Click the canvas to create a 100 x 100 frame. Notice that when you make a frame, it gets added to the Layers panel in the left sidebar.
From the Design panel in the right sidebar, change the width to 390 and the height to 750.

A closeup of the right sidebar in Figma and changing number values of a frame's height and width.png

Tip: You can use the Hand tool to pan around a file without selecting or moving objects. You can also zoom in or out by pressing or on your keyboard.

Add a rectangle and ellipse

A screenshot of all the shapes contained within the shape menu Now, lets add one rectangle and one ellipse inside the frame:

To add a rectangle: Select the Rectangle tool and click inside the frame
To add an ellipse: Select the Ellipse tool and click inside the frame

Don't worry too much about the exact dimensions, we can tweak those later.

Add text

Click the Text tool in the toolbar.
Click inside the frame to create a text layer.
Write your name and click anywhere on the canvas once you’ve finished writing.
Create a second text layer and write a description.

Tip: Now is a good time to double check whether your objects are inside your frame. Take a look at the Layers panel in the following screenshot.

Your rectangle, ellipse, and text should be nested under the frame. If nothing is nested, you’ll need to select each object on the canvas and drag it into the frame. A screenshot of the left sidebar showing the objects nested under the frame

Use the design panel to modify objects

Every object on the canvas has properties that determine its position and what it looks like. When you click on an object to select it, the Design panel in the right sidebar updates to provide information about that object. In this section, we’re going to change the properties of our objects to make our design come together.

Create a nice background for the card

An animation showing the rectangle being dragged into the top left corner of the frame and then modifying the height and width in the right sidebar using number values

Drag the rectangle to the top left corner of the frame. When you see red lines, it means Figma is trying to align the rectangle with the frame.
In the Design panel, set the width to 390 and the height to 200.

Tip: You can manually resize an object by selecting it and grabbing the corners. As you resize or move objects, you’ll notice red guides appear on the canvas. These help you align the shape to other objects on the canvas.

Now, lets add a color to the rectangle:

With the rectangle selected, click the color value under Fill.
Use the color picker to try out a color. In our example, we used #FF567F.

Add your face to the circle avatar

Adjust the size and position

A screen recording of the ellipse getting resized and aligned

Set the height to 185 and the width to 185.
Drag the circle so half of it is on top of the rectangle and it’s in the horizontal center of the frame.

Add a stroke

With the circle selected, click the plus icon next to Stroke.
Change the stroke color to white, or #FFFFFF.
Set the stroke position to outside.
Change the stroke width to 8.

Add an image fill A screen recording showing the procedure to change the type of fill and insert an image

With the circle selected, click the color value under Fill.
Click Solid and change the fill type to Image
Hover over the black and white checkerboard in the overlay and click Choose image.

Tidy up the text

Turn your name into a heading A screen recording showing how to change text properties

Select the text layer with your name.
Click and drag one side of the text box to manually resize it and unlock the width and height properties. Set the width to 320.
Click Align horizontal centers.
Under Text, align the text to Center.
Change the font size to 32.
Change the font weight from Regular to Bold.
Drage the text layer underneath your avatar.

Adjust the width and alignment of the description

Select the text layer with your description.
Click and drag one side of the text box to manually resize it and unlock the width and height properties. Set the width to 320.
Click Align horizontal centers.
Change the font size to 16.
Drag the text layer underneath your name.

Round the card’s corners

A screenshot of the corner radius property in the top section of the design panel. As a final touch, select the frame and set the Corner radius to 24.

You’re done! Congratulations! 🎉

Feel like experimenting with what you’ve built? Here are some ideas:

Add an image fill to the rectangle to give your avatar a nice background
Turn the card into a component other people can use