Design and Launch a Portfolio Website in Framer (No Code)
53.5K views · 2026-03-25
Interaction & UXUI Design
In this video, I’ll show you how to design and launch a portfolio landing page in Framer, all in one tool. We’ll go from idea → design → live website using Framer’s visual canvas, so you can turn your designs into real, interactive websites. Get started with Framer: https://framer.link/Yobi and use code YOBI to get one month of Framer Pro for free.
You’ll learn how to:
- Design a portfolio layout using Design Pages
- Create key sections like hero and project showcase
- Turn your design into a responsive web page
- Add animations and interactions
- Use CMS to manage your portfolio projects
- Publish your website directly from Framer
Timestamps:
00:00 Intro
00:36 Framer
01:16 Design Pages
07:02 Create web page
08:07 Animations
10:11 Templaets
12:27 CMS
15:35 Publishing
16:33 Learning resources
17:21 Final thoughts
Please subscribe, like and comment to support my channel, so I can keep creating content for you. 💕
-- --
ABOUT ME
I'm a UX Designer based in the San Francisco bay area. I am passionate about helping people break into tech and grow. Let's connect!
-- --
CONNECT & LEARN
Client-Ready Website Checklist: https://www.shujdesign.com/product-page/client-ready-website-checklist-2026
Helpful resources: https://www.shujdesign.com/resources
Coaching: https://www.shujdesign.com/coaching
Instagram: https://instagram.com/yobi321
-- --
WATCH NEXT:
How to get into UX: https://youtu.be/GK884zYcMhg
How to Nail Your UX Resume: https://youtu.be/77Pzjg0VKH4
5 tips for creating a UX design portfolio: https://youtu.be/iF-X8ZjALbQ
Top AI Tools for Designers: https://youtu.be/inXy99aSL2M
3 Tips of Mastering AI for UX Designers: https://youtu.be/CoQMFkDvr_c
How to Prepare for a UX job interview: https://youtu.be/WL_jQ80vaMU
How to prep for whiteboard challenges: https://youtu.be/eTTSCl6Va6U
Disclaimer: This video is sponsored by Framer. Some of the links are affiliated. My opinions are my own and they do not represent my employer in any way.
#ux #portfolio #webdevelopment #webdesign #uxui #uxdesign #uxdesigner #freelancedesigner #userexperience #productdesign #productdesigner #interactiondesign #interactiondesigner #framer
You’ll learn how to:
- Design a portfolio layout using Design Pages
- Create key sections like hero and project showcase
- Turn your design into a responsive web page
- Add animations and interactions
- Use CMS to manage your portfolio projects
- Publish your website directly from Framer
Timestamps:
00:00 Intro
00:36 Framer
01:16 Design Pages
07:02 Create web page
08:07 Animations
10:11 Templaets
12:27 CMS
15:35 Publishing
16:33 Learning resources
17:21 Final thoughts
Please subscribe, like and comment to support my channel, so I can keep creating content for you. 💕
-- --
ABOUT ME
I'm a UX Designer based in the San Francisco bay area. I am passionate about helping people break into tech and grow. Let's connect!
-- --
CONNECT & LEARN
Client-Ready Website Checklist: https://www.shujdesign.com/product-page/client-ready-website-checklist-2026
Helpful resources: https://www.shujdesign.com/resources
Coaching: https://www.shujdesign.com/coaching
Instagram: https://instagram.com/yobi321
-- --
WATCH NEXT:
How to get into UX: https://youtu.be/GK884zYcMhg
How to Nail Your UX Resume: https://youtu.be/77Pzjg0VKH4
5 tips for creating a UX design portfolio: https://youtu.be/iF-X8ZjALbQ
Top AI Tools for Designers: https://youtu.be/inXy99aSL2M
3 Tips of Mastering AI for UX Designers: https://youtu.be/CoQMFkDvr_c
How to Prepare for a UX job interview: https://youtu.be/WL_jQ80vaMU
How to prep for whiteboard challenges: https://youtu.be/eTTSCl6Va6U
Disclaimer: This video is sponsored by Framer. Some of the links are affiliated. My opinions are my own and they do not represent my employer in any way.
#ux #portfolio #webdevelopment #webdesign #uxui #uxdesign #uxdesigner #freelancedesigner #userexperience #productdesign #productdesigner #interactiondesign #interactiondesigner #framer