Create a Design Portfolio Website with Figma

Create a Design Portfolio Website with Figma

If you’re feeling a bit daunted by getting started in Figma, you’re in the right place. We’re about to dive into this fantastic tool and design a simple portfolio website together. By the end of this guide, you’ll have a clear understanding of Figma and its powerful features. Let’s get started!

This post is based on my Figma Essentials Course. When you become a BYOL member, you gain access to this course as well as my 30+ additional courses on After Effects, Photoshop, Illustrator, Lightroom, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Head here to sign-up!

UI designers out there, time to activate responsive mode! 

What is Figma?

Figma is a leading UX design tool that’s revolutionizing how we approach website and mobile app design. Unlike traditional design tools, Figma is not just for mockups; it allows us to design, test, and iterate quickly before moving to the coding phase. Think of it as your digital design playground where you can experiment and refine your ideas.

Who Uses Figma?

Figma is used by a diverse range of professionals including UX designers, graphic designers, web designers, developers, marketers, product managers, entrepreneurs, and content creators. Whether you're crafting a brand new website or tweaking an app interface, Figma’s flexibility makes it a go-to tool for many.

Why Use Figma?

The beauty of Figma lies in its speed and efficiency. You can design, test, and adjust your ideas swiftly without needing to dive into code right away. This iterative process helps refine your design based on user feedback and testing before you hand it off to a developer or build it yourself in platforms like Webflow or WordPress.

Think of Figma as your architect, and coding as the builder. You wouldn’t build a house without blueprints, right? Similarly, Figma helps you create a detailed blueprint of your design, allowing you to make changes quickly before construction begins.

Getting Started with Figma

Before we dive into the nitty-gritty, head over to figma.com to sign up for a free account. The free version is packed with features that are more than enough for most UX design needs.

Pro Tip: There’s both a browser version and a desktop app. We’ll use the desktop version in this guide.

Setting Up Your First Project

1. Create a New File: Once you're logged in, click on “Design File” and then “Untitled” to rename your project. Call it something like “Portfolio V1” – professional naming conventions are key!

1. Create a Frame: In Figma, we use frames for everything, even for creating rectangles. Select the Frame Tool (F key) and choose a desktop preset from the design mode on the right. Name this frame “Homepage” in your Layers panel.

1. Color Your Frame: With the frame selected, click on the “Fill” option to change the color. Pick a color that suits your design. If you’re unsure, sites like Adobe Color can help you find the perfect palette.

1. Add Text and Images: Use the Text Tool (T key) to add your portfolio name. For fonts, try Google Fonts and Font Pair for inspiration. When it comes to images, use the Frame Tool again to create an image frame, and then fill it with an image from your collection.

1. Organize and Adjust: Use the space bar to navigate around your document and organize your elements. Ensure your text and images are properly aligned and styled.

Harnessing Figma’s Special Abilities

Figma isn’t just a design tool – it’s packed with powerful features:

1. Auto Layout: This feature makes your design responsive. For example, when you adjust the text in a button component, Auto Layout adjusts the button size accordingly. It’s perfect for creating flexible layouts that adapt to different screen sizes.

1. Components: Components are reusable elements that save you time. For example, if you create a navigation bar as a component, any changes you make to the main component will automatically update all instances of that component throughout your design.

1. Prototyping: With Figma, you can turn your designs into interactive prototypes. Link buttons to different pages and test the user flow directly within Figma. This allows you to gather feedback and make improvements before moving on to the development stage.

Next Steps

Curious to learn more about the power of Figma? When you become a BYOL member, you gain access to my Figma Essentials and Advanced course as well as my 30+ additional courses on After Effects, Photoshop, Illustrator, Lightroom, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Head here to sign-up!

See you in class! – Dan