From Figma To 3D Website (Using Framer & Spline)
Вставка
- Опубліковано 9 лип 2024
- In this beginner tutorial we'll go from Figma to an animated Spline 3D Website in my favourite web design tool Framer.
🔴 Framer Course Waitlist: timgabe.com/framer-course
💜 Working Files: timgabe.com/resources/scrollable-3d-website
Timecodes
00:00 - Intro to tutorial.
00:17 - Starting with converting Figma designs to a Framer website.
00:25 - Exporting from Figma to Framer using the Framer plugin.
00:52 - Importing and arranging elements in Framer.
01:01 - Adjusting navigation and hero section in Framer.
01:16 - Adding and positioning blur effects in Framer.
01:48 - Dragging images into Framer and setting their position.
01:59 - Customizing color and layout settings in Framer.
02:26 - Setting max width for sections in Framer.
02:48 - Completing the initial export for the website in Framer.
03:00 - Introduction to creating 3D objects with Spline.
03:14 - Starting a new project in Spline and preparing the workspace.
03:47 - Exporting shapes from Figma to use in Spline.
04:05 - Importing and adjusting shapes in Spline.
04:18 - Customizing the 3D cube in Spline.
05:00 - Adjusting cube color and lighting in Spline.
05:22 - Enhancing cube appearance with material settings in Spline.
06:01 - Fine-tuning lighting and shadow effects in Spline.
06:35 - Adding bloom effects to enhance the 3D cube in Spline.
07:00 - Creating different states for the cube animation in Spline.
07:23 - Setting up cloner and adjusting cube states in Spline.
08:02 - Animating the cube with scroll interactions in Spline.
09:09 - Export settings and finalizing the 3D element in Spline.
09:32 - Adding Hollywood camera effects in Spline.
10:37 - Adjusting camera states for different cube animations in Spline.
11:49 - Implementing scroll interaction with the camera in Spline.
12:01 - Adding levitation effect to the cube in Spline.
12:42 - Creating a slide-up animation for the cube in Spline.
13:47 - Preparing Framer for 3D element integration.
14:25 - Setting up embed and scroll container in Framer.
15:05 - Configuring layout and visibility settings in Framer.
15:52 - Adjusting section heights and z-index in Framer.
16:35 - Adding scroll animations to text fields in Framer.
17:30 - Applying custom 3D animations to elements in Framer.
18:59 - Finalizing animations for all sections in Framer.
19:25 - Exporting the 3D animation from Spline to Framer.
20:00 - Embedding the 3D animation in Framer and final review.
20:17 - Conclusion.
![ОРБАН приехал к ПУТИНУ и "отчитался" о поездке в Киев 😁 [Пародия]](http://i.ytimg.com/vi/_0ukDovOWq8/mqdefault.jpg)
This is one of the best tutorials for Spline/Framer. Thanks, Tim!
Amazing tutorial 😮❤. Thanks for sharing, Tim ❤
Oh the end result is nice!
This is awesome! Thank you for all that you do Tim!
glad to help, matt!!
Looking forward to your course. I appreciate your teaching style and sense of humor.
that's great to hear, thank you for the kind comment!! 😃
This the one I’ve been waiting for 🙏
hope it lived up to the expectations, charles!!
Amazing, It's looks so easy
Thanks for the tutorial
Amazing!
Thanks for sharing this!
thank you for commenting!!
Good stuff! This is a great inspiration for beautiful landing page designs.
thanks a lot 🤩
Nicely done
Nice, Framer is also one of my favourite tools. I've created mockups with Spline but haven't used it with Framer yet, so thanks for sharing
framer is so freaking cool... did you see the new page transition update? so awesome!
happy you liked it, friend!
@@TimGabe page transitions is 💯
wow amazing
Noice.
Thanks for sharing man.
happy to share, friend! thanks for the comment!!
noice! thanks!!! 500 is magic!
500 is the magic number!
love it
Mr Tim Gabe, thank you for this tutorial,been looking for how to use one item to move it throughout the pages
so glad you liked it man!
Thank yo brother this video changed my looks the website design, I can't design without spline anymore lol.
hahaha, right?! spline is awesome!!
fire!
thanks friend!!
Woooow😍
spline is awesome, right?!
muchas gracias 🦄🦄🦄
GOOLLDDDD!!!!!!!!!!!!!
thanks a lot, gerald!!
you deserve atleast 1M subs
that's a really nice comment that makes me want to push harder!! thank you!
Can you create more of this awesome Videos :D
Nice Videos and tutoriols hope you the best ❤️
more stuff like this hopefully coming in the future 🤩💜
This is a great tutorial. Thank you!
I have a question though - why do we use a rectangle SVG file in the beginning to create the cube rather than building the cube on Spline directly?
Hi Tim, first of all thanks a lot for this tutorial. I am facing an issue where i created a cube as shown in the video but suddenly its not showing in the canvas when i accidentally cut the layer and re-pasted it and also i am not able to see the cube when i open the file u gave in the description (encountering the same problem in both the cases ie not visible in canvas) but when i am exporting then its visible in framer.
This is amazing! But was the design you published responsive?
🔥🔥🔥🔥🔥
thanks igor! 🙏
Hi tim, I love your video its easy to follow. Can you please make a video on how to include chat systems and game integrations( maybe chess) and video calls using framer and firebase. This will mean alot thanks
Amazing video!! it is full responisve on tablet / phone?
Nice video, but if I use the free version of Spline, will there be a Spline watermark on the page, does anyone know about it? Do you, Tim?
Hey Tim I have a question, what's the difference between just using the cube tool and using rectangle with extrusion to create a cube in Spline?
it's actually no difference, but i wanted to illustrate that you can import any shape from figma straight into spline and work with it 😃
With regards to your new Framer zero to hero course, you should introduce Spline & the new craze Bento Grid within your course mate just like Flux academy as they are also launching a new Framer masterclass around the same time as your course. If Spline & Bento Grid was initiated into your course I would enrol but Flux academy is my choice at the momment....
Best Tutorials. But How to bring this 3d website from Framer back to Figma prototype?
I did everything exactly according to the instructions, but when I preview the page, the grow state always appears and the page stops scrolling after the first VH section. Your remix file doesn't work properly either.
I love your content, Tim ❤️🫀
that's really great to hear, niran! 💜
How did you select 3 blurs without adding addtional elements. For instance like when holding the shift key
i hold down CMD while doing it... not sure what the shortcut is on windows 😬
Can we integrate our 3d animated with state Spline model directly into a React or Next.js project?
yes!! just export as React, you'll see the code option it in the export menu to the left!
What’s a definition of “structure” …within framer terminally … is it a DIV ?
This is awesome, and I learned a lot, but I am starting with figma so it is not quite useful, why not change the name to: from framer to 3d? Thanks.
*This is were the money is. Please Tim. DONT BE TOO FAMOUS*
hahaha, thank you so much my friend. i don't wanna become famous at all!! 😬
@@TimGabe 53.5k sub in a year... with 20 videos, i think ur to smart to not be famous
@@bigdaddyproduction7266you’re too nice! really appreciate this, thank you! 😃🙏
Hello Tim, ur value work is incredible ! thanks !
Can u give us more info for the Framer course u will propose on ur website ? :P
hey friend!! more info coming in the newsletter this week, so stay tuned! 😃
the scroll works but just first section (hero section) it doesnt scroll down to anothers sections, how can i fix it?
if you follow the tutorial step by step it should work fine! you probably missed something with the sticky container 🙏
ye! i did it my mistake was the overflow was hidden instead visible
Thanks for this amazing video. Would you be open to creating more spline framer videos?
hey arda! i'm definitely planning on doing that 😃 thanks for the comment!
@@TimGabe you are awesome 🥳🥳🥳
I clicked the link to get the spline file but looks like the file is missing.
one thing that I couldn't able to replicate is, it takes a lot of scrolling to animate, whereas the tutor just scrolls a bit it animates faster in my case its slower, what am I missing here?
8:40
When does your Framer course release?
i'm working super hard on it, still fingers crossed for end of January 🤞
Ur aware of any upcoming Spline BF deal(s) @Tim Gabe?
✋ same
no idea 😫 will let you know if i know!
Hey, i love your videos and designs and i am really interested in joining your course. What is the price for joining it? :)
hey my friend! ☺️ no price set yet, but i'll be posting more updates around the course beginning next week!
@@TimGabe Wow, so generous!
@@TimGabe Hey, i dont know if i did something wrong. Did you announce the price for the course?:)
@@toretennfjord1896 Nothing announced yet, my friend ☺️🙏
Why it's not working in my case i followed the whole video
Why the dirty f* my height doesn't work when I write "300vh"?
you might have to change it to viewport in the dropdown, sometimes it's bugging out 😫