Crafting Your Figma Portfolio

1. Setting the Stage: Your Portfolio File

First, let's get our Figma file ready. A well-organized file is the mark of a professional. We will create a single file that contains all the pages of our portfolio.

For this initial setup, we'll watch a short segment from a great beginner's tutorial. It will guide you through creating the file and setting up the very first page—your homepage.

You should now have a Homepage frame with a 12-column grid ready to go. You can create two more frames for the Case Study and About pages later by simply copying this one, ensuring your grid is consistent.

2. The Power of Components: Build Once, Use Everywhere

Before we start adding content, let's learn about one of Figma's most powerful features: Components.

A component is a reusable design element. You create a "main" component, and then you can use "instances" (copies) of it throughout your design. When you update the main component, all instances update automatically. This is perfect for elements that appear on every page, like your navigation bar and footer.

This will save you an enormous amount of time and ensure your portfolio is consistent.

Your Turn: Create a Navigation and Footer Component

Now, apply what you just saw.

1. Navigation Bar: On your canvas (outside the Homepage frame for now), create a navigation bar.
   • Use the Frame tool to draw a long rectangle (e.g., 1440px wide, 80px high).
   • Place the personal logo you designed in the last lesson on the left.
   • Add text links for "Work," "About," and "Contact" on the right.
   • Select the entire frame and click the "Create Component" icon (the four diamonds) at the top.
2. Footer: Do the same for a footer.
   • Create another frame.
   • Add your name, email address, and links to any professional social media (like LinkedIn or Behance, which we'll cover later).
   • Turn this into a component as well.

You'll now see these in the 'Assets' panel on the left.

3. Assembling Your Homepage

With your reusable components ready, let's build the homepage. This page needs to grab a visitor's attention and give them a quick overview of your work.

1. Drag in Components: Drag an instance of your Navigation and Footer components from the Assets panel into your Homepage frame. Position the navigation at the top and the footer at the bottom.
2. Create a Hero Section: This is the first thing visitors see. Add a large, welcoming headline (e.g., "Hi, I'm [Your Name]. I design brands and digital experiences.") and a brief 2-3 sentence introduction about yourself and what you do. Place this content near the top, right below the navigation.
3. Create a Project Grid: Now for the main event—your projects. We will create a grid of thumbnails for the 4-6 projects you've curated. To do this efficiently, we'll create one more component: a Project Card.
   • Design a simple card containing an image placeholder (use a Frame and set the Fill to 'Image') and a text box for the project title.
   • Turn this card into a component.
   • Drag 4-6 instances of your Project Card component onto your homepage, arranging them neatly on your 12-column grid. For a three-column layout, each card would span 4 columns of the grid.

The Figma help article "Assemble your portfolio pages" provides a great text-based walkthrough of this process, reinforcing the drag-and-drop nature of building with components.

4. Assembling Your Case Study Page

The homepage gets visitors interested; the case study page is where you convince them of your skills. This page will be a template that you can duplicate and customize for each project. It tells the story of how you tackled a design challenge from start to finish.

Let's see a real-world example of how a designer lays out a case study in Figma before we build our own.

Inspired by that example, let's create our case study template.

1. Create a New Frame: Duplicate your Homepage frame and rename it Case Study. Delete the project grid from the middle. You should be left with your navigation and footer.
2. Structure the Content: Based on the case study structure you outlined in a previous lesson (Problem, Process, Solution), add placeholders to your frame:
   • Project Title & Hero Image: A large title and a full-width image placeholder at the top.
   • Project Overview: Text blocks for the brief, your role, and the project goal.
   • The Process: A mix of text blocks and smaller image placeholders to show your design process (sketches, wireframes, mood boards).
   • The Solution: Large, polished mockups of the final design. Use Frames with image fills as placeholders.
   • Final Touches: Add a concluding paragraph summarizing the outcome.

5. Assembling Your About/Contact Page

Finally, let's create a simple page for your bio and contact information.

1. Create the Frame: Duplicate your Homepage frame again and name it About. Remove the project grid.
2. Add Your Bio: This is a chance to tell your story. Add a placeholder for a professional photo of yourself. Write a few paragraphs about your background, your passion for design, and the kind of work you're looking for.
3. Add Contact Info: Make it very easy for potential clients to reach you. Include your email address and a link to your LinkedIn profile. You can also add a simple contact form design (you don't need to make it functional in Figma).

The article "Steal my portfolio" has some excellent advice on how to write a compelling introduction, which you can apply here.

Conclusion

Congratulations! You have successfully assembled a full, 3-page portfolio structure in Figma. You've combined your knowledge of grids, layouts, and now components to create a professional and scalable foundation for showcasing your work.

Key Takeaways:

• A portfolio in Figma is built using Frames for each page (Homepage, Case Study, About).
• Components are essential for creating reusable elements like navigation and footers, ensuring consistency and saving time.
• The Homepage acts as a gallery, using Project Card components to display your work.
• The Case Study page is a template to tell the story of each project, combining images and text.
• Your portfolio is a living document. Using components makes it easy to update and add new projects as your skills grow.

Up Next:

You now have a portfolio ready to be shown to the world. But when a client asks, "How much do you charge?" you need to be prepared. In our next lesson, you will learn how to describe different pricing strategies for freelance design work, empowering you to value your skills and get paid fairly.