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

Поделиться
HTML-код
  • Опубликовано: 15 ноя 2024

Комментарии • 92

  • @dyno2000
    @dyno2000 8 месяцев назад +4

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

  • @bensonmwaura9494
    @bensonmwaura9494 11 месяцев назад +15

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

    • @TimGabe
      @TimGabe  11 месяцев назад +1

      thanks a lot 🤩

  • @leslie8
    @leslie8 11 месяцев назад +2

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

    • @TimGabe
      @TimGabe  11 месяцев назад +1

      that's great to hear, thank you for the kind comment!! 😃

  • @ReadyDesignerOne
    @ReadyDesignerOne Год назад +5

    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

    • @TimGabe
      @TimGabe  11 месяцев назад +2

      framer is so freaking cool... did you see the new page transition update? so awesome!
      happy you liked it, friend!

    • @ReadyDesignerOne
      @ReadyDesignerOne 11 месяцев назад

      @@TimGabe page transitions is 💯

  • @puseletsomaraba1313
    @puseletsomaraba1313 Год назад +1

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

    • @TimGabe
      @TimGabe  11 месяцев назад

      so glad you liked it man!

  • @farukyurtseven7065
    @farukyurtseven7065 11 месяцев назад +1

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

    • @TimGabe
      @TimGabe  11 месяцев назад

      hahaha, right?! spline is awesome!!

  • @matts5289
    @matts5289 Год назад +4

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

    • @TimGabe
      @TimGabe  11 месяцев назад

      glad to help, matt!!

  • @taoufikbennachad7777
    @taoufikbennachad7777 11 месяцев назад +2

    Amazing!
    Thanks for sharing this!

    • @TimGabe
      @TimGabe  11 месяцев назад

      thank you for commenting!!

  • @charlesizdead4242
    @charlesizdead4242 Год назад +1

    This the one I’ve been waiting for 🙏

    • @TimGabe
      @TimGabe  11 месяцев назад

      hope it lived up to the expectations, charles!!

  • @MultiSciGeek
    @MultiSciGeek 6 месяцев назад

    Oh the end result is nice!

  • @nameislee
    @nameislee 8 месяцев назад

    Amazing tutorial 😮❤. Thanks for sharing, Tim ❤

  • @marimoviesinhindi
    @marimoviesinhindi 10 месяцев назад +1

    you deserve atleast 1M subs

    • @TimGabe
      @TimGabe  10 месяцев назад

      that's a really nice comment that makes me want to push harder!! thank you!

  • @orelhassid
    @orelhassid 8 месяцев назад

    Amazing, It's looks so easy

  • @SALAVEY13
    @SALAVEY13 11 месяцев назад +1

    noice! thanks!!! 500 is magic!

    • @TimGabe
      @TimGabe  11 месяцев назад

      500 is the magic number!

  • @doadesignz
    @doadesignz 8 месяцев назад

    Thanks for the tutorial

  • @RNGToyz
    @RNGToyz 7 месяцев назад +1

    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?

  • @levitikon1
    @levitikon1 4 месяца назад

    Nicely done

  • @ahmad_habbab
    @ahmad_habbab 10 месяцев назад +1

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

    • @TimGabe
      @TimGabe  10 месяцев назад

      more stuff like this hopefully coming in the future 🤩💜

  • @tanyameshram445
    @tanyameshram445 5 месяцев назад

    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?

  • @AbbasOmoloriMuhammad
    @AbbasOmoloriMuhammad 7 месяцев назад

    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

  • @prashlovessamosa
    @prashlovessamosa Год назад +1

    Noice.
    Thanks for sharing man.

    • @TimGabe
      @TimGabe  11 месяцев назад

      happy to share, friend! thanks for the comment!!

  • @abeblue
    @abeblue 11 месяцев назад +22

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

    • @TimGabe
      @TimGabe  11 месяцев назад +2

      hahaha, thank you so much my friend. i don't wanna become famous at all!! 😬

    • @abeblue
      @abeblue 11 месяцев назад +2

      @@TimGabe 53.5k sub in a year... with 20 videos, i think ur to smart to not be famous

    • @TimGabe
      @TimGabe  10 месяцев назад +3

      @@abeblueyou’re too nice! really appreciate this, thank you! 😃🙏

  • @rohitaggarwal6457
    @rohitaggarwal6457 5 месяцев назад

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

  • @niranjan07niran
    @niranjan07niran 9 месяцев назад +2

    I love your content, Tim ❤️🫀

    • @TimGabe
      @TimGabe  9 месяцев назад

      that's really great to hear, niran! 💜

  • @petermckinnon3104
    @petermckinnon3104 7 месяцев назад

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

  • @CARSSTREETNIGHTS
    @CARSSTREETNIGHTS 11 месяцев назад +1

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

    • @TimGabe
      @TimGabe  11 месяцев назад

      hey arda! i'm definitely planning on doing that 😃 thanks for the comment!

    • @CARSSTREETNIGHTS
      @CARSSTREETNIGHTS 11 месяцев назад

      @@TimGabe you are awesome 🥳🥳🥳

  • @nguyenvanmanh9635
    @nguyenvanmanh9635 6 месяцев назад

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

  • @VigneshwaranSourirajalu
    @VigneshwaranSourirajalu 7 месяцев назад +2

    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?

  • @fesmeldi
    @fesmeldi 8 месяцев назад

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

  • @rabbysingh190
    @rabbysingh190 7 месяцев назад

    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.

  • @simonpostle
    @simonpostle 6 месяцев назад

    wow amazing

  • @GraveRave
    @GraveRave 10 месяцев назад +1

    When does your Framer course release?

    • @TimGabe
      @TimGabe  10 месяцев назад

      i'm working super hard on it, still fingers crossed for end of January 🤞

  • @driss5321
    @driss5321 11 месяцев назад +1

    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

    • @TimGabe
      @TimGabe  11 месяцев назад +1

      hey friend!! more info coming in the newsletter this week, so stay tuned! 😃

  • @BartAndrzejewski
    @BartAndrzejewski Год назад +2

    Ur aware of any upcoming Spline BF deal(s) @Tim Gabe?

    • @worksmart8166
      @worksmart8166 11 месяцев назад

      ✋ same

    • @TimGabe
      @TimGabe  11 месяцев назад

      no idea 😫 will let you know if i know!

  • @truvak
    @truvak 7 месяцев назад

    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.

  • @des7638
    @des7638 10 месяцев назад +1

    fire!

    • @TimGabe
      @TimGabe  10 месяцев назад

      thanks friend!!

  • @Mark-ry9lu
    @Mark-ry9lu 8 месяцев назад

    love it

  • @skyyap4129
    @skyyap4129 7 месяцев назад

    I clicked the link to get the spline file but looks like the file is missing.

  • @JRipz
    @JRipz 11 месяцев назад +1

    How did you select 3 blurs without adding addtional elements. For instance like when holding the shift key

    • @TimGabe
      @TimGabe  11 месяцев назад

      i hold down CMD while doing it... not sure what the shortcut is on windows 😬

  • @Rio-by1eh
    @Rio-by1eh 7 месяцев назад

    What’s a definition of “structure” …within framer terminally … is it a DIV ?

  • @Seldoon182
    @Seldoon182 11 месяцев назад +1

    Can we integrate our 3d animated with state Spline model directly into a React or Next.js project?

    • @TimGabe
      @TimGabe  11 месяцев назад

      yes!! just export as React, you'll see the code option it in the export menu to the left!

  • @carolinadomenechreal7975
    @carolinadomenechreal7975 9 месяцев назад

    muchas gracias 🦄🦄🦄

  • @АннаРоманцова-й3у
    @АннаРоманцова-й3у 10 месяцев назад +1

    Woooow😍

    • @TimGabe
      @TimGabe  10 месяцев назад

      spline is awesome, right?!

  • @toretennfjord1896
    @toretennfjord1896 11 месяцев назад +2

    Hey, i love your videos and designs and i am really interested in joining your course. What is the price for joining it? :)

    • @TimGabe
      @TimGabe  11 месяцев назад +1

      hey my friend! ☺️ no price set yet, but i'll be posting more updates around the course beginning next week!

    • @toretennfjord1896
      @toretennfjord1896 11 месяцев назад

      @@TimGabe Wow, so generous!

    • @toretennfjord1896
      @toretennfjord1896 11 месяцев назад +1

      @@TimGabe Hey, i dont know if i did something wrong. Did you announce the price for the course?:)

    • @TimGabe
      @TimGabe  11 месяцев назад +1

      @@toretennfjord1896 Nothing announced yet, my friend ☺️🙏

  • @igormosijchuk6300
    @igormosijchuk6300 11 месяцев назад +1

    🔥🔥🔥🔥🔥

    • @TimGabe
      @TimGabe  11 месяцев назад

      thanks igor! 🙏

  • @terapeutstesti
    @terapeutstesti 7 месяцев назад

    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.

  • @geralddustinalbert2397
    @geralddustinalbert2397 11 месяцев назад

    GOOLLDDDD!!!!!!!!!!!!!

    • @TimGabe
      @TimGabe  11 месяцев назад +1

      thanks a lot, gerald!!

  • @pablovidal1912
    @pablovidal1912 9 месяцев назад +1

    the scroll works but just first section (hero section) it doesnt scroll down to anothers sections, how can i fix it?

    • @TimGabe
      @TimGabe  9 месяцев назад

      if you follow the tutorial step by step it should work fine! you probably missed something with the sticky container 🙏

    • @pablovidal1912
      @pablovidal1912 9 месяцев назад

      ye! i did it my mistake was the overflow was hidden instead visible

  • @VeronicaRrui
    @VeronicaRrui 11 месяцев назад

    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?

    • @TimGabe
      @TimGabe  11 месяцев назад

      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 😃

  • @doctor_diy_
    @doctor_diy_ 5 месяцев назад

    Why it's not working in my case i followed the whole video

  • @lucasoldera2947
    @lucasoldera2947 10 месяцев назад +1

    Why the dirty f* my height doesn't work when I write "300vh"?

    • @TimGabe
      @TimGabe  10 месяцев назад

      you might have to change it to viewport in the dropdown, sometimes it's bugging out 😫

  • @Abdullahfalah
    @Abdullahfalah 2 месяца назад

    Spline does not work with smartphones