Building a portfolio on framer! 101👀

Documentation of my process, resources & the story behind it!

First things first, a mini plug to my portfolio, if you still haven’t checked it out! I trust you will like it🧋

---

It was always my dream to build a personal website, having a space of yours on the internet is like owning your shit. Also, no wonder what can it do to bring opportunities. I am really happy to see many designers reaching out on Twitter & LinkedIn to appreciate the thought that went behind creating this lil’ space of mine!

A lot of people also reached out to me asking about how did I build this website. I am writing this lil note as documentation for all of them. I’ll cover resources, observation & my process.

I built this website on framer.com, it’s a no-code tool which works like figma, wherein you can build website from scratch with zero code. You get a blank canvas just like you have on figma.

You should know how flex box & autolayout works to build something on framer.

To make it easy, there is a plugin called “figma to framer”, you can directly use that & copy-paste your autolayout designs of figma to framer and directly ship it after fixing the responsiveness.-

First few iterations of the website on Figma

Must know before starting!

1. Design first on figma with the auto layout! Don’t start directly on Framer.

2. I would recommend learning auto layout completely on figma, without that you won’t understand stacks on Framer.

3. Use figma-framer plugin

Framer Video Links

• Watch all videos on the official Framer youtube channel - you will learn a lot about adding motion to your websites. https://www.youtube.com/@Framer

• Watch this awesome video on how to take your designs from figma and bring it to life on Framer - Must Watch

---

Framer Resources - Highly recommend

• https://twitter.com/itsnotnabeel/status/1670480633460830209?s=20

• https://twitter.com/learnframer/status/1648238370597011457?s=20

• Look at these 2 threads to find all the links to premade framer code overrides & to explore what can you do on framer.

To explore framer capabilities - Gathering Inspiration

• Go to the official Framer website, and look at all the Framer award websites. They are all built on framer. - https://www.framer.com/awards/

---

---

Few observations & notes

Short points, but supremely important!

• I’ll say it again, design on figma first. Don’t directly jump to the framer.

• Use pre-made components for navigation, footer & all standard patterns on the website.

• Heavily customize premade components. Give your flavor always.

• Use high-quality images & mockups. Set image quality to Large or Full on Framer.

• Don’t make a new button every time on Framer, use variables for anything that is changing & not fixed.

• Variables are the tiny “+” icon use see beside the major properties in the component panel. Watch the video listed above.

• Keep publishing the website - view it on different devices. Check font sizes!

• Use inspect element on the browser to check where the website breaks.

• First, Make things responsive on figma → paste it on Framer.

• Use max-width smartly. Don’t let your cards reach 1440px on the desktop. Please.

• Don’t go overboard with animation on the framer. I know it’s tasty, but impacts performance. I will now drastically reduce motion on my website too.

• Animate tiny elements.

• Focus on details like shadow, borders, dividers, font, line height & graphics.

Don’t have a timeline…

Don’t constrain yourself with time when it comes to your portfolio. Okay, time for a story, I had tried developing a portfolio on Framer before too. I had quick & tight timelines in place, but that doesn’t work. You will just get frustrated with Framer, if you do so.

🌈 Just chill and create a portfolio, one day it will be done.

Reach out to me if you have any questions!

LinkedIn

Twitter

~ Priyansh Singara