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