Figma is gaining popularity for design portfolios as a free, web-published alternative to traditional no-code website builders. It has a wide range of design features and thousands of free templates, making it easy for designers to create professional-looking portfolio sites.
Most designers hate the same cookie-cutter portfolio templates offered by website builders, not to mention carrying the cost of $5 — $14 per month. These platforms can be infuriating to use and sometimes come with a steep learning curve. I’m looking at you Webflow, Editor X, Dorik, Squarespace, Adobe Portfolio, UXfolio, Wix, and Weebly…
Most no-code website builders inflict constrained templates on designers who try to wrestle them into decent-looking professional portfolios. In the course of doing portfolio reviews on MentorCruise, I have frequently heard designers express head-banging frustrations about these platforms. Many designers struggle with trying to pick a suitable template, adjust the layout, font size, alignment, padding, and spacing, as well as dealing with adding rich media and images at the right size and resolution.
In contrast, Figma allows unlimited creativity in online design portfolio creation. It’s a design tool with which designers are familiar. What’s more, the long Figma “sharing link” — generated when publishing a prototype — can be replaced with a shorter domain name and forwarding, or a URL shortener. Hiring managers only need your link, and a browser — no Figma account is required to view it. Here’s a design portfolio site built in Figma as an example.
Additionally, setting up an easily-shareable portfolio website using Figma costs about half as much as a website builder. Having said that, using Figma to create a website is not without its drawbacks, quirks, and limitations. Let me walk you through it.
I’ll be using a website I created with Figma as an example: uxwithmiklos.com
In stark contrast to building webpages with HTML, CSS, and Javascript or with no code website builders, Figma gives designers precise control over all design elements and interactions. Designers can add videos, animated GIFs, fancy microinteractions, and external web links (their PDF resume, LinkedIn, etc.). This is the good news. The bad news is that a Figma prototype is not responsive and comes with a long, cryptic URL that’s not easily shareable.
But, there are two solutions for this. One is easy, the other a bit more complicated. Designers must choose between two implementations with different pros and cons. A straightforward one would be a desktop-only version. (This is the cheaper option at about $12 per year for a “.com” domain name registration.)
A more complicated “quasi-responsive” one would mean creating two separate Figma files, one being a mobile version. One could argue that nobody wants to look at a designer portfolio on a mobile device! I certainly wouldn’t want to. However, it’s only prudent that at least some of your portfolio site shows up on mobile even if it’s just a “Hello!” with a brief intro. After that, you could politely ‘request to view’ the portfolio on the desktop.
A straightforward desktop-only Figma portfolio website
For a slick, branded yet simple Figma web portfolio, you only need a domain name ($12/yr with Google domains) and a simple forwarding routine to the Figma prototype sharing link. Or, go for the completely free, unbranded route and use bit.ly or any other link shortener like short.io and share their short URL as your portfolio link.
First, Figma needs to be set up correctly for the desktop website version. Start with a Figma “frame” (artboard) at the MacBook Air dimensions of 1280×832. All subsequent pages would also need to be set up the same width. (The 1280px width will fit most desktop browsers nicely.)
Second, once your portfolio is ready to go, its “playback” parameters must be set up so it displays clean and tidy in the browser, like a website. Launch the prototype by presenting the prototype (press the “play” triangle icon in the top right). Then, under “options” do the following:
- Select “Actual size (100%)”
- Deselect “Show hotspot hints on click”
- Deselect “Show Figma UI”
- Last, copy the URL from the snackbar button that says “Copy sharing link” (this is going to be your permanent prototype sharing link so save it somewhere safe)
To be clear, I’m not talking about sharing your Figma design file but the prototype published to the web. You don’t want to share the link to the original Fima work file!
Remember, you can update your portfolio at any time in Figma and the changes will appear instantly on the web. The “live prototype” updates immediately with any changes you make. This also calls for making your portfolio updates carefully because once you’ve shared the link, any changes you make will be seen instantly. I’d recommend duplicating your portfolio file, working on that, and then copy-pasting any changes into your “live” Figma portfolio outside normal business hours.
Here are the steps to set the site up under your domain name:
- Get your domain at Google Domains (i.e., “yourname.com”)
- Forward the domain at Google Domains to your Figma prototype URL (the sharing link you saved in the above step):
- Go to your domain on Google Domains and click on “Manage”
- Go to “Website” on the left-hand side navigation bar
- Select “Forward domain”
- In the field for “Forward to” paste in the Figma sharing link
- Under “Advanced options select “Permanent redirect (301)”
- Click the “Forward” button
Pros: Affordable and the most straightforward to set up. People don’t need a Figma account. It can be accessed with a browser like any other website.
Cons: Only works with desktop browsers, no mobile version. You also don’t get an email address with the domain name ([email protected]) — an additional perk when setting up a site with a web host. The site also won’t be indexed by search engines because it’s not a conventional HTML page.
Adding a mobile version — a more complicated process
If you’d like a mobile version as well you’d need to create another version of your site by creating a separate Figma file. The process is a bit more tricky to make it all work on the web with your domain name. However, if you can tinker with copying and pasting code into an HTML file it’s easy enough. Don’t fret, I’ll walk you through it.
After getting your domain name, you’ll need a low-cost website hosting service such as Hostgator (I’m not promoting them but they’re the host I use.) Hosting a single website is $2.75/month on a 3-year plan. When adding the cost of a Google domain name, it will cost about $45 per year in total.
(TIP: If you already have a web host, just grab another domain name and/or create a subdomain under an existing one at your web host to put your Figma portfolio under.)
The advantages of a hosted site include getting an email address with your domain name ([email protected]) and basic web analytics showing visitor data for your site. If you can fiddle with the code on your redirect page, you can also set up free Google Analytics for your site. It will offer a whole host of visitor data on your online portfolio, including how many visitors you had, from where, and on what device.
Pros: This system is still more affordable than website builders.
Cons: A bit fiddly to set up and test. Getting the portfolio indexed by search engines is tricky but there may be some workarounds—I’m still researching this. I’ll update the article when I have more info.
The steps to set everything up:
- Grab the sharing links for both the desktop and mobile Figma websites — after you’ve set up the “prototype settings” as explained above — and save them somewhere. These links are permanent.
- Grab the Google Analytics code for your site — a small snippet of Javascript.
- Create a basic HTML page and save it as “index.html.” Don’t bother adding a body or text, it will never show up because the redirect will trigger before it.
- Paste in the codes with your unique Google Analytics code (optional), the redirects, and URLs as shown in the attached doc (see below).
- Upload this “index.html” page to your web host.
- Test it on your desktop and mobile to make sure it works. You should be able to go to “yournameportfolio.com” and that’s the URL you can share with people. There’s no need to include the “index.html” in the URL — it happens automagically.
That’s it. You’re done!
I don’t want to take up precious space here with the code to copy and paste. You can access it here along with instructions.
Figma is increasingly being used as a platform for designers to build and publish their portfolios on the web. Designers couldn’t be more ecstatic because it gives them all the creative freedoms they crave. No more dealing with website builders and their clichéd, rigid templates. And, it doesn’t cost an arm and a leg.
We’re entering a different paradigm for designers showing their work on the web and Figma is the tool that makes it possible. Figma’s versatility and seamless integration with other tools and platforms make it a convenient choice for designers looking to streamline their workflow. Overall, Figma’s growing popularity as a tool for building designer portfolios highlights its versatility and potential as a go-to tool for the design industry.
Again, you can check out my one-page website in action created as a Figma website for desktop and mobile. It uses the exact methods I described above: uxwithmiklos.com