- 36
- 250 661
Toni Järvinen - Design Tutorials
Switzerland
Приєднався 18 січ 2023
Framer and Figma tutorials, and design tips. 🪄
Build a Stunning Design Portfolio in 30 Minutes | No-code + Free Template
Get started with Lume Template: www.framer.com/marketplace/templates/lume/
Get the My Framer templates: www.framer.com/marketplace/creator/toni-jarvinen/
In this tutorial, I’ll guide you step-by-step to create a fully responsive portfolio website using my free Framer template, Lume. Whether you’re a UX/UI designer, a creative professional, or someone building your personal brand, this video is for you!
What You’ll Learn:
How to customize your homepage
Showcase your case studies
Design a professional contact form
Style navigation & footer
Update colors, fonts, and overall styles
Publish your site (in minutes!)
This template is designed to help you stand out as a designer, impress clients and recruiters, and show off your unique work on any device-desktop, mobile, or tablet.
🎨 Who Is This For?
UX/UI Designers | Product Designers | Freelancers | Creative Agencies
Video Chapters:
00:00 Introduction
00:45 Get Started & Edit the Home Page
12:08 Create Your Case Studies
23:05 Update Your Blog
25:18 Set Up Your Contact Form
27:56 Update Navigation & Footer
29:19 Adjust Colors & Fonts with Styles
31:21 Site Settings & Publishing
Like this video? Subscribe for more no-code web design tutorials!
Share your new portfolio in the comments-I’d love to see what you create. Let’s make something amazing together!
#UXUIDesign #Framer #PortfolioWebsite #NoCodeWebsites #FreeTemplate
_________________________________________________________
Find me on other channels:
Twitter/X: tonjrv
Instagram: tonjrv
Threads: www.threads.net/@tonjrv
________________________________________________________
If you have any questions or suggestions, please leave them in the comments section below. Let's dive into the world of interactive design with Framer!
Get the My Framer templates: www.framer.com/marketplace/creator/toni-jarvinen/
In this tutorial, I’ll guide you step-by-step to create a fully responsive portfolio website using my free Framer template, Lume. Whether you’re a UX/UI designer, a creative professional, or someone building your personal brand, this video is for you!
What You’ll Learn:
How to customize your homepage
Showcase your case studies
Design a professional contact form
Style navigation & footer
Update colors, fonts, and overall styles
Publish your site (in minutes!)
This template is designed to help you stand out as a designer, impress clients and recruiters, and show off your unique work on any device-desktop, mobile, or tablet.
🎨 Who Is This For?
UX/UI Designers | Product Designers | Freelancers | Creative Agencies
Video Chapters:
00:00 Introduction
00:45 Get Started & Edit the Home Page
12:08 Create Your Case Studies
23:05 Update Your Blog
25:18 Set Up Your Contact Form
27:56 Update Navigation & Footer
29:19 Adjust Colors & Fonts with Styles
31:21 Site Settings & Publishing
Like this video? Subscribe for more no-code web design tutorials!
Share your new portfolio in the comments-I’d love to see what you create. Let’s make something amazing together!
#UXUIDesign #Framer #PortfolioWebsite #NoCodeWebsites #FreeTemplate
_________________________________________________________
Find me on other channels:
Twitter/X: tonjrv
Instagram: tonjrv
Threads: www.threads.net/@tonjrv
________________________________________________________
If you have any questions or suggestions, please leave them in the comments section below. Let's dive into the world of interactive design with Framer!
Переглядів: 786
Відео
Create Interactive Card Slideshow in Framer | No-Code Tutorial for Beginners
Переглядів 1,7 тис.Місяць тому
Live demo: cardslideshow.framer.website/ Remix this project: framer.com/projects/new?duplicate=yPcpxXJqkyDUUqE15IuI&via=tonjrv Get the My Framer templates: www.framer.com/marketplace/creator/toni-jarvinen/ In this video, we'll guide you through the process of how to create interactive card slideshow that can make your website stand out from the rest. Whether you're a beginner or an experienced ...
Top 10 Widgets to Embed on Your Website | Framer Tutorial
Переглядів 3,6 тис.4 місяці тому
Get started with Framer: www.framer.com/?via=tonjrv Download my Free Framer Templates: tonjrv.lemonsqueezy.com/ Discover the best widgets to enhance your website's functionality and user experience! In this video, we'll explore the top 10 widgets to embed on your website. From social media feeds to interactive maps, these tools will help you engage your visitors, streamline operations, and boos...
Custom Video Player in Framer (No-code tutorial)
Переглядів 3,1 тис.5 місяців тому
Live demo: videocomponent.framer.website/ Remix this project: framer.com/projects/new?duplicate=nvHuC84wtejvEVGbGUMe&via=tonjrv In this video, we'll guide you through the process of how to create custom video player in Framer. You can use the video player to match with your unique site style. Whether you're a beginner or an experienced designer, this step-by-step tutorial will help you add a to...
Stacked Cards Effect in Framer (No-code tutorial)
Переглядів 4,5 тис.6 місяців тому
Live demo: stackedcards.framer.website/ Remix this project: framer.com/projects/new?duplicate=1uQdnzKCZHFiHwAw4LRP&via=tonjrv Get the Stacky Template for FREE: stacky.framer.website/ In this video, we'll guide you through the process of how to create stacked cards effect in Framer when you are scrolling the page. Whether you're a beginner or an experienced designer, this step-by-step tutorial w...
Show & Hide Navigation bar on Scroll - Framer no-code tutorial
Переглядів 9 тис.7 місяців тому
Create your free Framer account: www.framer.com/?via=tonjrv Get the Appverse template for free: tonjrv.lemonsqueezy.com/ In this video, we'll guide you through the process how you can show and hide navigation bar on scroll. Making your website interactiveengaging. Whether you're a beginner or an experienced designer, this step-by-step tutorial will help you add a touch of interactivity to your ...
Interactive Navigation Menu in Framer (No-code tutorial)
Переглядів 27 тис.7 місяців тому
Live demo: interactivenavigation.framer.website/ Remix this project: framer.com/projects/new?duplicate=osR2BQpWVnOmZAG9Sf3D&via=tonjrv Get the Appverse template for free: tonjrv.lemonsqueezy.com/ In this video, we'll guide you through the process of how to create interactive navigation menu that is interactive and updates based on the scroll sections. Whether you're a beginner or an experienced...
Fixed Side Navigation Bar in Framer | Step-by-Step No-code Tutorial
Переглядів 3,9 тис.8 місяців тому
Live demo: fixednavigation.framer.website/ Remix this for free: framer.com/projects/new?duplicate=jyqT4bShSCnNXZy7DSTP&via=tonjrv In this video, we'll guide you through the process of how to create a fixed side navigation bar in Framer. Whether you're a beginner or an experienced designer, this step-by-step tutorial will help you add a touch of interactivity to your website. Chapters: 00:00 Pre...
Circular Progress Bar Animation | Figma for Beginners (Part 2 - Timer in Figma)
Переглядів 5 тис.8 місяців тому
See the first tutorial on counting timer: ua-cam.com/video/w3Z3rQD2qQk/v-deo.html In this video, you'll learn how to create a circular progress bar animation in Figma. Whether you're a beginner or an experienced designer, this step-by-step tutorial will help you add a touch of interactivity to your prototypes. Chapters: 00:00 Preview 00:38 Circular Animation Basics 01:30 Creating Animation 04:1...
Interactive Pricing Section - Framer No-Code Tutorial
Переглядів 2,4 тис.8 місяців тому
Live demo: interactivepricing.framer.website/ Remix this project: framer.com/projects/new?duplicate=KmkoeKkLsPvyzJ9oQWA1&via=tonjrv In this video, we'll guide you through the process of how to create interactive pricing section using Framer. Whether you're a beginner or an experienced designer, this step-by-step tutorial will help you add a touch of interactivity to your website. Chapters: 00:0...
Text Animation & Scroll Animation - Framer for Beginners | No-code Tutorial
Переглядів 14 тис.9 місяців тому
Live demo: textanimation.framer.website/ Remix this project: framer.com/projects/new?duplicate=GHMfqhxxzPPhcD3zb1Ev&via=tonjrv In this video, we'll guide you through the process of how to create text animations and scroll animations using Framer. Whether you're a beginner or an experienced designer, this step-by-step tutorial will help you add a touch of interactivity to your website. Chapters:...
Best Figma Plugin for Landing Page Animation - Figma & Framer Tutorial (No-code)
Переглядів 6 тис.10 місяців тому
Best Figma Plugin for Landing Page Animation - Figma & Framer Tutorial (No-code)
Card Animation in Framer with Scroll Variants | No-Code Tutorial
Переглядів 4,6 тис.10 місяців тому
Card Animation in Framer with Scroll Variants | No-Code Tutorial
Best Design Tools To Learn in 2024
Переглядів 2,8 тис.10 місяців тому
Best Design Tools To Learn in 2024
Spline x Framer: 3D Websites with real objects using Gaussian Splatting | No-code Tutorial
Переглядів 14 тис.11 місяців тому
Spline x Framer: 3D Websites with real objects using Gaussian Splatting | No-code Tutorial
Animated Rainbow Button Component in Framer | Step-by-Step No-code Tutorial
Переглядів 3,9 тис.11 місяців тому
Animated Rainbow Button Component in Framer | Step-by-Step No-code Tutorial
Interactive Buttons in Framer | Step-by-Step No-code Tutorial
Переглядів 24 тис.Рік тому
Interactive Buttons in Framer | Step-by-Step No-code Tutorial
Responsive Card Section in Framer | Step-by-Step No-code Tutorial
Переглядів 6 тис.Рік тому
Responsive Card Section in Framer | Step-by-Step No-code Tutorial
Animated Hue Cards in Framer | Step-by-Step No-code Tutorial
Переглядів 7 тис.Рік тому
Animated Hue Cards in Framer | Step-by-Step No-code Tutorial
Rolling Text Animation in Figma | Step-by-Step Prototype Tutorial
Переглядів 1,8 тис.Рік тому
Rolling Text Animation in Figma | Step-by-Step Prototype Tutorial
Rolling Text animation in Framer | Step-by-Step No-code Tutorial
Переглядів 42 тис.Рік тому
Rolling Text animation in Framer | Step-by-Step No-code Tutorial
Framer tutorial: Interactive Tooltip in under 2 minutes (No-code)
Переглядів 4 тис.Рік тому
Framer tutorial: Interactive Tooltip in under 2 minutes (No-code)
Learn Figma: Animated Border in Figma for Beginners
Переглядів 5 тис.Рік тому
Learn Figma: Animated Border in Figma for Beginners
Framer tutorial: Animated Border in 2 minutes (No-code)
Переглядів 10 тис.Рік тому
Framer tutorial: Animated Border in 2 minutes (No-code)
Creating an Interactive Menu Button in Framer | Step-by-Step No-code Tutorial
Переглядів 11 тис.Рік тому
Creating an Interactive Menu Button in Framer | Step-by-Step No-code Tutorial
Learn Figma: How to do timer animation in Figma for beginners
Переглядів 31 тис.Рік тому
Learn Figma: How to do timer animation in Figma for beginners
on mobile view, how do you collapse an expanded navbar when scrolling away? currently it's just hiding when scrolled away, when you scroll back up the expanded navbar appears and you'll have to close the navbar manually
is there a way of making it responsive? i´ve been trying but i havent been lucky, thanks for the content!! i have learned lots from u
Loved the tutorial! How can I make this component responsive though? The moment I add layout properties the design breaks :(
Great video! Loved setting it up. Any chance this could be done with the option to expand and compress the side bar? If so, how would that work with the padding to enlarge when the side navigation is compressed?
Super useful tutorial. Straightforward and to the point! Thanks a lot.
Thank you
Thank you so much!!
No worries at all! 🙌
Hi bro! Can you help me with this issue - *I need the pricing to be a one time payment [Not a monthly subscription plan] for my course. Is there any way to change the pricing section as such?* Please help me bro! Any documentation or even a reply would be very helpful ✨✨
Hi mate! Would it work if you'd just change the copy to indicate clearly that the pricing would be one time payment? E.g. Pay once: $99 - Access the course forever with one-time payment.
@tonjrv ohh I'm so dumb... It did work bro! Thanks alot 🙌🏻😭
why white rectangles appear on top of my cards after I Aadded the animation ?
Good question! If you want you can send me a screen recording or link to your site on Twitter/Instagram, and I can try to help you 🙌
Hey from Finland! thanks for the video! Can you please share a link to the program that you use to make such a cool screen recording? The cursor zoom is very cool looking.
Moikka! And no worries at all, the screen recording tool is called Screen Studio, you can check it out here: screenstudio.lemonsqueezy.com?aff=zXV1p (I love it)
Thanks Tony, you have helped me a lot. I appreciate the quality of the content you create. You explain things very well, even though I don't speak much English 😂, but you do it in a relaxed and unhurried way...thank you so much 🙏👋👋
Awesome to hear that mate! 🔥 Let me know if you ever face any issues and I'm happy to help
Thanks a lot
No worries, happy to help! 🔥
what if I wanna make this gradient thing corresponding to page scroll? kinda like serving as a reminder of how long this article is. Thanks!
Good question, I'm not sure if you can apply this directly to it. But here's at least one resource that could help you out: framer.university/resources/scroll-progress-bar-override
Thank you, sir!
No worries at all mate! 🔥
After a long time bro. Where you were? I missed you a lot :(
Thanks bro! I've been busy with all the other projects, but I'll try my best to be more active here 🔥
Can you make a tutorial on how to make this responsive for mobile?
Great idea! i'll put that to my backlog! Easiest way would be perhaps to create separate variants with smaller font and spacing to make it fit mobile.
@hoopercraig I think i've found the fix for this! It's not ideal as the animation is not that smooth but at least it doesn't jump around. What i did is i removed links inside the navbar component so when we click the buttons it doesnt trigger the variant change, but i left the scroll variant option on. So when we click on a button in the navbar it scrolls to our desired section and the scroll variant changes the highlight on the navbar. I hope that helps
That sounds awesome solution, thanks a lot! 🔥
funny how you just predicts all the possible doubts that may appear about framer 😪 amazing
Hahah I'm happy to help! 🔥
Hi. My scroll variant transition is instant, instead of smooth like yours. Does anybody have an idea on how to fix that?
Hey! Check the animations and whether you have set them to be instant. Playing around with the settings there could help!
my man i think i have seen your unique template. one of the most awesome looking hero section is none other than Appverse.
Great tutorial, thanks. The only issue with this is, that it behaves awkward when not clicking the next or previous item, but e.g. the last one when on top of the page. Because then, the hover state interferes with the variations that are set when sections appear. Anyway to prevent this?
how to connect it with a button ??
You have to create another artboard that has button, and then with prototpying tools connect the button to screen that has the progress bar start state.
is it possible to do it in framer> i saw it on the framer website saying their seo optimisation with this circle animation
Great question! I haven't tried it but it should be possible. I can look into it 🙌
@@tonjrv great. I think this method eith the rectanhles and half circle rotatikn is possible. Need to see if the 2 half circles can be sunced one after the other to do the zero to 100 rotatjon otherwise u have to do only partly ankmated circle i gjess
I still don't get it.
What part you are facing issues with, I can try to help :)
Excellent tutorial! Thank you so much for keeping it straight to the point!
Thanks a lot, I'm glad that you liked it!🔥
Thanks a lot
No worries!
where is part 1?
Great question! You can find it here: Learn Figma: How to do timer animation in Figma for beginners ua-cam.com/video/w3Z3rQD2qQk/v-deo.html
thank you for this tutorial! I've gotten up to creating the hover variant, but when I select the text layer and press 'bring to front', the layers move in the left panel but the text still remains hidden behind the ellipses. Do you know why this is?
Guys... It's Toni.... And he's just awesome 😎
Hahah thanks mate! Let's stay awesome! 🔥
Looks really nice
Thanks mate! 🙌
yo so it works but anything that i have linked in my navigation bar like a drop down menu or a word linked i can click it even tho its invisible
Hey, send me a message in Twitter or in Instagram, and I can try to help you out!
Unable to create the Variable and even can't modify the TabName after converting the text to create plain text variable : 2:48 to 4:40
Awesome
Thanks mate! 🙌
amazing video ty ❤
No worries! 🙌
thanks for the tutorial! i have a question though, is there a way for it to only start rolling when layer/section comes into view? because im trying to apply it to my 2nd section
You helped me a lot thank you! this is exactly what I wanted to achieve
Awesome to hear that! 🔥
Great
cool!!
Hey, had a doubt once, I move the side bar to the main frame , the fixed position is disabled for me. what am i doing wrong?
Excellent thank you so much!! :)
This was great. However, I found once I added the scroll variant as the last step, and followed everything you did, clicking the tabs in the menu now causes the bg element to jump around while it scrolls from section to section.
Having the same issue. Did you find a solution? At what point should we add the sections and set up the scroll variants?
Actually it's jumping around in his live link as well that is in the description. If you don't go in order and click the 3rd item when on home it behaves erratically which is exactly the problem I'm facing.
@@kinoomalta I didn't, it jumps all over the place for me.
I change the interaction in the menu and up the delay to 0.5. Fix the problem. 7:05
@@magatsu3642 doesnt work either
This was great, thank you!
likeee!! i want
can you make a guide on making this menu responsive on mobile
You can use the same method, but making it smaller! Also it is possible to make it scrollable, but that would require bit more work. But that could be a great idea for a video!
Awesome 👌. Very creative
i love you man
Hahah thanks a lot! 🔥