From Figma To 3D Website (Using Framer & Spline)

In this beginner tutorial we'll go from Figma to an animated Spline 3D Website in my favourite web design tool Framer.

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.

[dyno]

This is one of the best tutorials for Spline/Framer. Thanks, Tim!

[bensonmwaura]

Good stuff! This is a great inspiration for beautiful landing page designs.

[ReadyDesignerOne]

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

[leslie]

Looking forward to your course. I appreciate your teaching style and sense of humor.

[farukyurtseven]

Thank yo brother this video changed my looks the website design, I can't design without spline anymore lol.

[puseletsomaraba]

Mr Tim Gabe, thank you for this tutorial, been looking for how to use one item to move it throughout the pages

[matts]

This is awesome! Thank you for all that you do Tim!

[nameislee]

Amazing tutorial 😮❤. Thanks for sharing, Tim ❤

[ahmad_habbab]

Can you create more of this awesome Videos :D
Nice Videos and tutoriols hope you the best ❤️

[abeblue]

*This is were the money is. Please Tim. DONT BE TOO FAMOUS*

[petermckinnon]

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....

[AbbasOmoloriMuhammad]

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

[rohitaggarwal]

This is amazing! But was the design you published responsive?

[tanyameshram]

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?

[RNGToyz]

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?

[nguyenvanmanh]

Best Tutorials. But How to bring this 3d website from Framer back to Figma prototype?

[fesmeldi]

Amazing video!! it is full responisve on tablet / phone?

[CARSSTREETNIGHTS]

Thanks for this amazing video. Would you be open to creating more spline framer videos?

[truvak]

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.

[VigneshwaranSourirajalu]

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?