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.-
Must know before starting!
Design first on figma with the auto layout! Don’t start directly on Framer.
I would recommend learning auto layout completely on figma, without that you won’t understand stacks on Framer.
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!
~ Priyansh Singara
Hey, went through your portfolio and case studies. It's fire 🔥. A quick question, there is always this challenge where we add images in our case study like - charts, mockups with annotations etc., but since they are images, it is not readable on mobile devices. Although I see that even you have succumbed to this, what do you think everyone should do about this? Have you found any workarounds now?