Figma for your Design Portfolio, Part 1: Designing a Portfolio with Modern Day Tools

Since I graduated from design school in 2009, expectations surrounding my personal brand and portfolio have drastically changed. From mailing out portfolio teasers to resumes on certain paper stock, the way designers got their name out in the world was a much more labor-intensive process. Some designers may recall this process:

1. Design each artboard of your portfolio.

2. Export each artboard small enough that it will be able to print, yet large enough that the resolution is clear.

3. Go to the print shop.

4. Select your perfectly weighted and textured paper stock (also ensuring that it doesn’t break your wallet).

5. Print each artboard.

Oh no! The colors are different on paper than they are on screen!

6. Go back to your files and adjust the colors.

7. Reprint.

Ugh! The printer is low on toner now.

8. Ask an associate to change out the toner.

9. Reprint.

10. Crop each artboard.

11. Place each page carefully into a portfolio book.

Need to make any updates? Repeat steps 1-5 (and hopefully not run into steps 6 or 8).

Thankfully, these laborious and cumbersome tasks have slowly fallen by the wayside as the digital age matured and rooted itself in our everyday lives.

Easy is not always ideal.

From Coroflot, Wix, Squarespace, Behance, Dribbble, and the like, there are a number of off-the-shelf solutions for designers who are looking to host their portfolio online. But as simple and easy as these sites claimed to be, what I found most challenging was the lack of creative freedom and storytelling these design sites offer. Many of these sites provide templates that force your portfolio to take on a generic, predefined look with a one size fits all approach. A template that may work for one aspect or project of your portfolio may not necessarily apply to another.

The breadth of a designer’s work can be very wide and almost always multi-dimensional. So what options do designers have to showcase their unique body of work and support their storytelling? The answer may actually be right under our nose in a tool some designers use daily: Figma.

There are four key benefits building a portfolio in Figma.

I found there are four keys benefits to utilizing Figma when creating your portfolio.

1. Time

If you are someone who is proficient or even mildly familiar with the tool, you’re already near the finish line. One of the biggest barriers to entry I found with other portfolio sites is understanding the platform itself.

  • What format and size do my images need to be?
  • How do I navigate and use the site?
  • Are there terms and conditions I need to know before using this site?
  • Does the site own my content once I go live?
  • What makes this site different than all the others?

These are just a few questions that take a generous amount of time to explore when using an off-the-shelf option. It’s not uncommon for people to find themself in a time crunch, needing to pull together an updated portfolio whether for a client or job interview.

By building your portfolio in Figma, you’re already familiar with the key functions of the app, where your tools live, how to navigate the layers tree, prototyping essentials, etc. This familiarity allows users to be efficient with their time and move at a much quicker pace. When you’re under the pressures of the clock, being comfortable in a tool provides peace of mind.

2. Cost

A number of these sites (not all) will market themselves as a free service. But, after signing up and getting into the platform, there will oftentimes be hidden fees. Whether it’s a subscription after a free 30-day trial or a charge once your URL is live, there is, more often than not, a hit to your wallet. Honestly, this is completely understandable given the nature of these portfolio builders and the benefits of using their platform.

Figma, too, offers a premium subscription model should you need more file space. But, using their freemium offerings, you can permanently hold up to three files without ever needing to upgrade your membership. I have my design portfolio tucked away in my personal Figma account and have no intent to upgrade anytime soon. The beauty of Figma is that even with the standard (free) account, all the design tools within the app are at your disposal.

3. Showcasing Your Figma Skills

A quick keyword search for “Product Designer” resulted in 72,571 job results on LinkedIn. The top three job openings had these requirements listed verbatim:

  • 1: Experience with Figma, Adobe CS, JIRA, Confluence, as well as prototyping, and expert at adapting to a variety of software
  • 2: Experience with UI design software – Adobe Xd and Figma
  • 3: Proficient in Figma along with the Adobe Creative suite

If it’s not so already, Figma is becoming an essential tool in any designer’s toolkit. What better way to show a future employer your Figma acumen than with your very own portfolio? Figma’s rich prototyping capabilities can behave so realistically that even clients have a hard time differentiating between a live site and a Figma prototype.

A key benefit of using Figma is that your portfolio doubles as a vehicle for conversation during your interviews. You can show more than just your body of work; you can show them your working process. By taking your audience out of your prototype and “under the hood” of your file, you can show employers how you organize, plan, and execute from a file management perspective all the way down to your component level. This is a crucial value add that is available when you build your portfolio in Figma.

4. Nimbleness

One of the best things about building your portfolio in Figma is your ability to be quick and nimble with your work. You can quickly change or adjust any part of your prototype, and anyone who has your link will immediately see the update. This ability to update on the fly provides an immense value. As a designer, you can add, remove, tweak and customize your portfolio for your intended audience as you see fit.

Additionally, Figma allows you to create as many prototype flows as you want, meaning each individual flow can have its own unique URL. This allows you to showcase different sides to your portfolio. For instance, you can create a flow that focuses more heavily on research and discovery, while in that same file, you can have a flow that showcases your visual design and concepting skills. The possibilities are truly endless.

Figma isn’t a silver bullet.

Now, all that said, Figma has its limitations and isn’t entirely perfect. Figma prototypes do not have mobile responsive capabilities. This means that if your file is intended to be viewed on a desktop, you may want to include a “best viewed on” note when sending out your prototype link. Also, depending on how many interactions and animations you have within your file, you can actually cause your prototype to have a substantial lag time when moving from page to page. Therefore, it’s always best to pressure test your prototype to ensure your viewers are having the experience you intend.

Even given these minor drawbacks, Figma is a reliable and promising option for any designer looking to create their portfolio efficiently. Stay tuned for part two as I walk you through how to set your Figma file up for success.

Conversation
  • Thanks for creating this article. Very relatable and informative!

  • Comments are closed.