Have you ever wanted a portfolio platform:
- Where you can design the site like a Figma prototype instead of coding it
- That’s free to host
- That’s easily updatable
- Is responsive to different screen sizes without you having to worry
- Has no learning curve
No, I’m not trying to sell you on Cargo, Square Space, or Semplice. I’m trying to tell you, you probably already have it downloaded!
That’s right, with a simple URL modification, Figma is that easy-breezy portfolio platform you’ve always wanted.
If you want an example here is my portfolio! This was built in Figma and my custom URL simply forwards you to a Figma prototype link.
There are some major downsides (mainly accessibility) to using Figma as your portfolio platform, but I’ll cover that at the end.
Without further ado, here is how to make your web portfolio using only Figma. I’ll be making a site along with you all and I’ll share the file at the end!
This step is pretty easy! Make your file, make your homepage frame, you’re done! The only thing to note is that the width has to be 1920, and the height should be at least 1080 but can go longer (this is when things will start to scroll!).
Now my homepage has a taste of me and my projects. When making your homepage I would encourage you to get more adventurous! Ask yourself if you are not only communicating your work well but if you are communicating who you are.
Adding site navigation can be really helpful for the viewers of your portfolio. Consider adding a header so that viewers can quickly navigate to different sections of your site.
It’s important to group your header as one and make sure you click fix position when scrolling. This will ensure that the header stays at the top!
Want to link to other sites? Go to the prototype tab and add an “on click” interaction to open a link!
A return to the top button can be helpful once your pages get long. If you create an on-click interaction you can have it scroll to the top of your site. This can be helpful for viewers reviewing your portfolio. Just make sure to add the animation to ensure a smooth experience for the viewer.
Go ahead and create a project page for each of your projects. You can copy over any universal elements (such as the return to top button and site header). I suggest creating one project at a time and then using that as a template for your other projects to maintain consistency.
Once you have created all your pages it’s time to go back into the prototyping tab and connect each project tab on your homepage to its respective project page. You can choose to have a return button on each project page or link back to your homepage through the header (as I’ve done with my name leading back to the homepage.
Congrats! You’ve made your portfolio, now for the easy part. Putting it on the web.
Once you’ve finished your site click on the play button in the top right corner.
This will put you into a tab in Figma that shows your prototype in action.
Click on the blue Share prototype button. Then, click on copy link.
Once you’ve copied the link it’s time to modify it.
Here is what the copied link looks like unmodified:
figma.com/proto/MKgRIa4yMVybfEET5JZilE/Build-a-Portfolio?node-id=1%3A2&starting-point-node-id=1%3A2
Now add this to the end:
%3A9&scaling=scale-down-width&hide-ui=1&hotspot-hints=0
The final link should be:
figma.com/proto/MKgRIa4yMVybfEET5JZilE/Build-a-Portfolio?node-id=1%3A2&starting-point-node-id=1%3A9&scaling=scale-down-width&hide-ui=1&hotspot-hints=0
Check it out for yourself!
If you have your own URL you can forward your custom URL to your modified Figma link. I have matthewaskari.com through google and set up link forwarding so that www.matthewaskari.com takes you to my modified Figma link.
If you don’t have a custom URL you can use a link shortener such as bit.ly to make your portfolio link simpler.
There are a few downsides to using Figma to host your portfolio
- Load times are dependent on Figma
- You can’t highlight text, making your portfolio not accessible (a potential red flag to your future employer)
- No custom tab image or title
- Resource intensive while viewing
- Easy to make
- Free to host
- Responsive
- Permenately updated to your design file
I hope you learned something! You’ll have to weigh the pros and cons yourself but for many (especially students) a free, easy-to-make portfolio site could be worth the downsides. For some, this could be a permanent home for your portfolio, and for others a temporary solution while you build out your portfolio elsewhere.
