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.
Watch video From Figma To 3D Website (Using Framer & Spline) online without registration, duration hours minute second in high quality. This video was added by user Tim Gabe 01 January 1970, don't forget to share it with your friends and acquaintances, it has been viewed on our site 63,396 once and liked it 2.6 thousand people.