How to Design a Personal Portfolio Website in Figma | Design Tutorial ( Part 1)

Introduction

This tutorial will guide you through designing a personal portfolio website using Figma, a popular tool for UX/UI design. By the end of this guide, you will have a functional homepage layout that you can customize further.

Step 1: Set Up Your Figma Account

• Go to figma.com.
• If you don’t have an account, click on the sign-up button to create one.
• Log in to your account.

Step 2: Create a New Design File

• Once logged in, click on the option to create a new design file.
• Name your project (e.g., "Portfolio").

Step 3: Design the Header

• Use the text tool to create a title for your portfolio.
  • Center the text and choose a name that reflects your identity (e.g., "Your Name").
  • Change the font size to 24px and select a suitable font like "Rest Drastic."
• Create a menu in the header:
  • Add menu items (Home, About, etc.) by duplicating the text using Ctrl+C and Ctrl+V.
  • Set the font size to 16px and choose a font style like "Italina."
  • Underline the menu items for emphasis.

Step 4: Set the Background

• Select the rectangle tool and draw a rectangle to serve as the background.
• Choose a color for your background that fits your design aesthetic.
• Name this layer "Background" for organization.

Step 5: Add a Profile Photo

• Upload a profile photo that you have downloaded.
• Adjust the dimensions to fit your design, centering it appropriately.

Step 6: Add Introduction Text

• Use the text tool to introduce yourself (e.g., "Hi, I am Henrietta").
  • Set the font size to 48px and adjust letter spacing to 10px.
  • Center the text below your photo.

Step 7: Create a Button

• Use the shape tool to create a button labeled "About Me."
  • Change the button color to white.
  • Add an arrow icon (downloaded previously) next to the button text.
  • Adjust the text size and letter spacing as needed.

Step 8: Add Social Media Icons

• Download social media icons from resources like FlatIcon.
• Drag and drop the icons onto your design, ensuring they are uniform in size (28x28px).
• Group these icons by selecting them and naming the group "Social Media."

Step 9: Add Contact Information

• Below your social media icons, add your email address.
  • Use a font size of 16px and a simple font like "Rubric."
  • Ensure the email text is styled consistently with the rest of the layout.

Step 10: Organize Your Layers

• Group related elements for better organization.
  • For example, group all header items as "Header" and the button as "About Me Button."
• Name each group clearly for easy navigation.

Conclusion

You have successfully created the homepage of your personal portfolio website in Figma. This layout can serve as a foundation for additional pages. For further customization and to continue your design journey, check out part two of this tutorial on the channel. Be sure to like and subscribe for more design tips!