How to Build a UX Design Portfolio Website with Framer

How to Build a UX Design Portfolio Website with Framer | 2024 Tutorial

Рет қаралды 13,100

Күн бұрын

Start your Framer UX Portfolio here: shorturl.at/cZxju
And use code ALIENA to get 25% off basic and mini sites
My example portfolio: alienacai.me
My product design course: fasttrackux.com
All projects, numbers, and figures in this video are fictional and for educational purposes only.
Timestamps:
Introduction and Overview: (0:00)
Creating a Portfolio Wireframe for Home Page and Case Studies: (0:12)
Designing Hi-Fi Responsive Pages in Figma: (3:00)
Exporting Designs from Figma to Framer: (6:04)
Responsive Design Basics: (9:28)
Responsive Design Example: (12:48)
Adding Links in Framer: (15:41)
Getting a Free Framer Domain: (16:59)
Setting a Custom Cursor: (17:24)
Adding Effects to Framer: (17:52)
Publishing Your Portfolio to a Custom Domain: (18:26)
Final Tips and Insights: (20:03)

Пікірлер: 48

@AlienaCai Ай бұрын

Start your Framer UX Portfolio here: shorturl.at/cZxju And use code ALIENA to get 25% off basic and mini sites My example portfolio is at: alienacai.me My product design course: fasttrackux.com *All projects, numbers, and figures in this video are fictional and for educational purposes only.*

@IStMl 13 күн бұрын

Tip: if you call your variants Desktp/Tablet/Phone, Framer will automatically pick the variant for each breakpoint

@tegar.nastar 18 сағат бұрын

Holy! I never thought about making portfolio with "trying to tell a story" in mind and you changed my perspective, thank you for sharing such great insights!

@crystalriveradesign 18 күн бұрын

Thank you so much for your always helpful videos! You really get into details that a lot of others tend to skip over.

@sungchristy6192 29 күн бұрын

Thank you for sharing! This is the most complete Framer tutorial I have ever seen.

@AlienaCai 28 күн бұрын

So glad to hear that! Worth all my effort then 😉

@aniruddhasainkar7347 29 күн бұрын

Was waiting for this, from a long time. Thank you!

@AlienaCai 28 күн бұрын

Thank you!!

@shubhraagarwal9250 29 күн бұрын

Awesome! Exactly what I needed right now.

@AlienaCai 28 күн бұрын

So glad to hear this 😍

@mhtwr2036 Ай бұрын

I'm really excited about this tutorial. Also you're helping me a lot with my UX studies, So a huge thanks to YOU.

@AlienaCai 29 күн бұрын

Just went live!

@emmanuelonuada3587 29 күн бұрын

Loved the step by step guide. Very insightful as always. And 'YES' room tour please 😁😅

@AlienaCai 28 күн бұрын

Okayyyyy 👑

@yzvisual 4 күн бұрын

I love your content Aliena, you are a smart Ux entrepreneur and I am looking forward to learning more from you!

@AlienaCai 3 күн бұрын

Thank you so much!

@yzvisual 2 күн бұрын

@@AlienaCai Hey, Aliena I used a presentation frame ratio of 4:3 according to 1024x768 But when I turn it into actual size on Figma it does not turn into full screen, And I also think that is kinda too small to fit in all my contents, would you suggest I change the proportion to 1920x1080

@anamafaldarochaferreira3316 Ай бұрын

Welcome 🎉

@bedirvicil 28 күн бұрын

Thank you for your nice and clear explanation! I also prepare my portfolio using figma and framer in my free time from work and school. Even if I master most of the processes, I think I will take my page one step further with this video. 🙏

@AlienaCai 27 күн бұрын

Glad it was helpful!

@dayomisiosisanya9234 25 күн бұрын

All I can say is thank you so much Aliena!

@AlienaCai 23 күн бұрын

No problem at all!! The pace in this video is a bit fast, pairing it with a nice dessert may help 😅

@StudioIjo 29 күн бұрын

Thank You 🤝

@AlienaCai 28 күн бұрын

Thank you 😊

@SSulleiman 29 күн бұрын

Lady Alienacai please we need more tutorial videos on framer...building websites and mobile from scratch using Framer. Thank you and God bless you

@AlienaCai 28 күн бұрын

Noted!

@itsDe0n 29 күн бұрын

Thank youuu

@AlienaCai 29 күн бұрын

No problemmmm

@gellirollz 21 күн бұрын

Yes come thru for us, ❤❤

@mussanadirjan2779 19 күн бұрын

you are officially an engineer now...

@SamarHayatOfficial 29 күн бұрын

Video is very informative but not sure that if it's beginner friendly but for me it's normal and can understand.😊

@AlienaCai 28 күн бұрын

As long as you can understand, I'm happy. Not a easy one for sure!

@maostudio6430 15 күн бұрын

Can you post about building portfolio with Google's sites?

@divyasrinivas8424 16 күн бұрын

Woww👏👏👏 after watching so many tutorials, this seems like the best tutorial of framer for beginners to build a portfolio

@AlienaCai 16 күн бұрын

Glad it was helpful! There was so much to cover so the pacing is a bit fast. I guess you are a fast learner.

@ShannonTheDesigner 22 күн бұрын

Amazing! I’ve been trying to figure out which platform to go to next because I’m tired of Wix!

@ejembiii 29 күн бұрын

Really nice, my head was spinning though, can you make a beginner-friendly version, please.

@AlienaCai 28 күн бұрын

This is definitely a more advanced one. I'll note that down.

@ejembiii 27 күн бұрын

@@AlienaCai Thank you

@Soumya_uiuxproductdesign 29 күн бұрын

Can you please make a portfolio building tutorial for wix studio specially for responsive design. Thx

@AlienaCai 28 күн бұрын

Noted!

@nidsssss1 28 күн бұрын

what is the font used in ur portfolio?

@AlienaCai 28 күн бұрын

It's Mulish

@AgniMJ 29 күн бұрын

This can be made with free Figma right?

@KOLearn 28 күн бұрын

Yes

@AlienaCai 28 күн бұрын

It can be made with Figma and Framer for free, if you don't mind a Framer badge and a framer domain. If you need your custom domain, there's a monthly Framer service fee.