Figma Design for beginners: Advocate sidebar — Portfolio personalization

Introduction

This tutorial focuses on designing a sidebar for a portfolio using Figma, tailored for beginners. Kaitie and Lauren, Figma Advocates, share their insights and design choices that can help you personalize your portfolio effectively. Whether you're showcasing your work or enhancing your design skills, this guide will provide you with actionable steps to create an appealing sidebar.

Step 1: Brainstorm Your Sidebar Content

• Identify the key elements you want to include in your sidebar.
• Common sidebar elements may include:
  • Profile picture
  • Name and title
  • Contact information
  • Links to social media or other portfolios
  • Navigation links to different sections of your portfolio
• Consider the layout and how these elements will be visually appealing and functional.

Step 2: Set Up Your Figma File

• Open Figma and create a new frame for your sidebar.
• Follow these steps to create your frame:
  • Select the Frame Tool (F) from the toolbar.
  • Draw a vertical rectangle to represent your sidebar.
  • Set dimensions that suit your design (e.g., width: 250px, height: 100%).
• Choose a background color that complements your overall portfolio theme.

Step 3: Design the Sidebar Elements

• Use the Text Tool (T) to add your name and title.
  • Choose a font style that reflects your personal brand.
  • Adjust the font size and weight for emphasis.
• Add your profile picture:
  • Use the Rectangle Tool (R) to create a placeholder for the image.
  • Import your image by dragging it into the frame or using the Place Image option.
• Position your contact information and social media links below the profile picture.

Step 4: Create Navigation Links

• Design navigation buttons that lead to different sections of your portfolio.
  • Use the Rectangle Tool to create shapes for buttons.
  • Add text labels on top of each button.
• Consider incorporating hover effects or color changes to enhance user interaction.
• Group related items together for better organization.

Step 5: Add Visual Elements

• Include icons next to your social media links and navigation buttons for visual interest.
• Use the Icons Plugin in Figma to find suitable icons or create your own.
• Balance the design with spacing and alignment:
  • Ensure consistent margins between elements.
  • Use alignment tools to keep everything orderly.

Step 6: Review and Iterate

• Step back and review your sidebar design.
• Ask for feedback from peers or mentors to gain different perspectives.
• Make adjustments based on feedback, focusing on usability and aesthetics.

Conclusion

By following these steps, you can create an engaging and functional sidebar for your portfolio in Figma. A well-designed sidebar not only enhances the user experience but also adds a personal touch to your portfolio. As you become more comfortable with Figma, continue to explore and refine your design skills, experimenting with different layouts and styles for your portfolio. Happy designing!