Figma To Real Animated Websites Magically! - No Code Needed | Figma To Framer Sites

Тәжірибелік нұсқаулар және стиль

Today we are converting a Figma ui design to a complete animated website using Framer and it's cool design features. Framer animations are super easy to implement and look amazing.
Check out framer: www.framer.com/ (not sponsored)
Grab framer premium discount: www.framer.com?via=punitweb
Video chapters
0:00 Introduction
0:18 Convert Figma To Framer Instantly
2:18 Amazing Appearance Animations
3:53 Scroll Transitions & Effects
4:46 Copy Animations Quickly
5:24 3D Animations & Effects
6:33 Animations Libraries
8:20 Ultimate Animated Components
9:33 Free Animated Templates
Get the equipment I use:
1. Mic: amzn.to/3b2OQa5
2. Camera: amzn.to/3rJzPj6
3. Macbook Pro: amzn.to/3aYeD30
4. Asus Gaming Laptop: amzn.to/2Mj4cN7
5. Pop filter: amzn.to/3aYfReC
For Sponsorship: punitwebdeveloper@gmail.com
Follow Me on Twitter:
/ punitweb
Follow me on Medium:
/ punitweb
My Behance Profile:
www.behance.net/punitweb
#figma #webdesign #uidesign

Пікірлер: 84

  • @nehasoni8504
    @nehasoni8504 Жыл бұрын

    Tutorial is Crisp and to the point, loaded with information ♥

  • @hemisgio18
    @hemisgio18Ай бұрын

    That's the first time I understand how Framer works and how I can paste things from Figma! Thank you so much for the video!

  • @ujjawalaggarwal9610
    @ujjawalaggarwal96109 ай бұрын

    Amazing man! I was searching for this exact tutorial but all I was getting was how to use framer for UI screens. Thanks a lot!

  • @sophie-you
    @sophie-you8 ай бұрын

    Love your tutorials, thank you for sharing 💙

  • @RaihanUddinSuman
    @RaihanUddinSuman6 ай бұрын

    Lovely! Awesome! Thank you Man!

  • @farhana6583
    @farhana65832 ай бұрын

    This is straight to the point! thankyou

  • @PunitChawla

    @PunitChawla

    Ай бұрын

    Glad you liked it :)

  • @2wentyracks
    @2wentyracks9 ай бұрын

    Thankyou for the info🙏🏻

  • @chandrashravani1723
    @chandrashravani17234 ай бұрын

    actually I need this thanks a lot sir 😍

  • @PunitChawla

    @PunitChawla

    2 ай бұрын

    Glad you found it helpful :D

  • @cybyr_
    @cybyr_ Жыл бұрын

    How do I import multiple screen sizes from Figma to Framer?

  • @Diyas_world
    @Diyas_world5 ай бұрын

    is it possible for us to host the webiste in a custom domain?

  • @kuntaldey4471
    @kuntaldey44719 ай бұрын

    If I want to host the website on my own personal server, can I export the code in the free version?

  • @MixLife96
    @MixLife969 ай бұрын

    what if we want to make webapp on framer without code, using no code tool like zapier and airtable

  • @hibbanasim6514
    @hibbanasim6514 Жыл бұрын

    Can we export Working prototyper to framer

  • @a_clairexr4467
    @a_clairexr446710 ай бұрын

    Can I use 2d art with figma on my website do I need coding 😔

  • @LifeBouy1
    @LifeBouy1Ай бұрын

    Where do you get those images from

  • @dharanidharank3030
    @dharanidharank30306 ай бұрын

    i want last website tutorial video bro

  • @et1555
    @et15554 ай бұрын

    All that is fine but can you please tell how to actually publish this, what all is required. I mean that has to be the whole point of this massive endeavour in the first place.

  • @SyahidinaAlif
    @SyahidinaAlif Жыл бұрын

    This is super insightful. Thank you and keep going!

  • @PunitChawla

    @PunitChawla

    Жыл бұрын

    Glad you found it useful

  • @drama.sreerama
    @drama.sreerama Жыл бұрын

    This was super helpful! Thank you!

  • @Gagan_salwan
    @Gagan_salwan Жыл бұрын

    Amazing as always, great video!

  • @satheeshkumar3770
    @satheeshkumar37707 ай бұрын

    Can I copy my prototypes from my figma design to framer without losing it?

  • @PunitChawla

    @PunitChawla

    7 ай бұрын

    Unfortunately animations and interactions are not all transfered. However, do try a small prototype and see how much gets converted.

  • @OrensteinDsouza
    @OrensteinDsouza Жыл бұрын

    Hi Punit, thank you for your video! :) I need your advice. I have learnt a bit of Webflow to build my Portfolio website and I need to add more projects. After watching this video I am considering trying out framer to make my process easier as the process on webflow is taking me time i.e Designing on Figma and translating those designs to Webflow. Do you think this would be worth the switch considering Webflow follows a practice on generating clean code?

  • @not_just_nik

    @not_just_nik

    Жыл бұрын

    I won't say to switch! Webflow is lot powerful at it's point, but for a portfolio website or simple landing pages, you must should give a try to Framer. Don't switch, keep both♥️

  • @workmenstudioinc1880
    @workmenstudioinc1880 Жыл бұрын

    I like this and think it would be cool if Figma and Framer worked together to create Shopify themes.

  • @jesusavendano5261

    @jesusavendano5261

    Жыл бұрын

    It's a little difficult but not impossible

  • @samyetism3492
    @samyetism3492 Жыл бұрын

    Amazing video! Keep it up!

  • @saurabhgupta5257
    @saurabhgupta5257 Жыл бұрын

    Can framer replace frontend developer jobs ?

  • @eashwarkrishna7936

    @eashwarkrishna7936

    Жыл бұрын

    Definitely not it’s will reduce time for developer

  • @chadmoschino2607

    @chadmoschino2607

    10 ай бұрын

    Nah lol all this shi just makes it easier 🎉

  • @ayushimishra8002
    @ayushimishra8002 Жыл бұрын

    Thank you so much for making this video. Super useful

  • @panhakim3479
    @panhakim347911 ай бұрын

    can i expoert it into code?

  • @shashanksoni2821

    @shashanksoni2821

    8 ай бұрын

    please let me know if you have found the solution for this.

  • @matthewgibson6013

    @matthewgibson6013

    6 ай бұрын

    can u?

  • @ceriousx
    @ceriousx Жыл бұрын

    Such an informative video😍

  • @shubhiagrawal9885
    @shubhiagrawal9885 Жыл бұрын

    Finally😍 thanku so much you made it so easy now I can use this for my projects🤓

  • @AftarHussain-ml7hb

    @AftarHussain-ml7hb

    Жыл бұрын

    how to import it to WordPress elementor any idea?

  • @strahilprimedivision8718
    @strahilprimedivision8718 Жыл бұрын

    You are a gem my friend!

  • @PunitChawla

    @PunitChawla

    Жыл бұрын

    Thank you my friend! :)

  • @jesusavendano5261
    @jesusavendano5261 Жыл бұрын

    This is magic, i hope to learn framer in the next year

  • @kiexx
    @kiexx Жыл бұрын

    Very nice tutorial, thank you so much sir

  • @digitalsketchguy7844
    @digitalsketchguy78446 ай бұрын

    Why bother with Figma. Framer started off as a prototyping tool. Do it all in Framer.

  • @Saeed....
    @Saeed.... Жыл бұрын

    Wow this is great features

  • @cyrilignatius1784
    @cyrilignatius1784 Жыл бұрын

    the one which I stucked to how to do?...luckily you had helped me on correct time ! thank you so much man

  • @christophs.3869
    @christophs.3869 Жыл бұрын

    Hey man....can i export code from framer and move my project to webflow?

  • @bearduo

    @bearduo

    Жыл бұрын

    No you can’t

  • @Mememaxing

    @Mememaxing

    7 ай бұрын

    Yes

  • @tsdonalds1668
    @tsdonalds16689 ай бұрын

    I tried dora being a devloper and proved to use less 😢can any one help this poor dev

  • @caglisto
    @caglisto Жыл бұрын

    More videos like this please!!

  • @des7638
    @des7638 Жыл бұрын

    Awesome demo

  • @taimoorrasheed7532
    @taimoorrasheed7532 Жыл бұрын

    Owsumm..great 👍

  • @SuperMoemedi
    @SuperMoemedi Жыл бұрын

    Amazing tutorial

  • @petersonkariuki8300
    @petersonkariuki8300 Жыл бұрын

    Thank you for your video.

  • @pavankshirsagar224
    @pavankshirsagar224 Жыл бұрын

    can you please tell me how to host this site made in framer?

  • @hellovenkee
    @hellovenkee Жыл бұрын

    wonderful

  • @soypablocarballo
    @soypablocarballo Жыл бұрын

    I loved it. But... how you convert this to a real site with CSS for publishing?

  • @tissoeh

    @tissoeh

    Жыл бұрын

    You have to take a monthly subscription, you'll get a domain name and hosting from Framer themselves

  • @soypablocarballo

    @soypablocarballo

    Жыл бұрын

    @@tissoeh Thanks for the answer! :D

  • @JaganNethula

    @JaganNethula

    Жыл бұрын

    @@tissoeh heyy, dude I'm just learning ux design in figma, after watching this i got confidence that i can create great ui. My question here is 1. How can I convert from this framer design to figma? Is it needed? 2. I'll be grateful if there is something that can convert this whole great design with animations into code without hiring any middle man to convert into code bcoz I don't know any bit of coding Please reply me

  • @MrAstor69
    @MrAstor69 Жыл бұрын

    Nice video

  • @Milanv0908
    @Milanv0908 Жыл бұрын

    Can you publish the site to something like google woth just framer? Also if possible is it then possible to lets say have a form that sends me an e-mail if filled in? Or some sort like that?

  • @basmaelhalabi1754
    @basmaelhalabi1754 Жыл бұрын

    Thanks 🙏🙏 We need how use mona sans font please 🥺❤️

  • @smartthemers7781
    @smartthemers7781 Жыл бұрын

    Can we export these animation to code?

  • @aestheticaryan763

    @aestheticaryan763

    Жыл бұрын

    yes, as a lottie file

  • @JaganNethula

    @JaganNethula

    Жыл бұрын

    @@aestheticaryan763 heyy, dude I'm just learning ux design in figma, after watching this i got confidence that i can create great ui. My question here is 1. How can I convert from this framer design to figma? Is it needed? 2. I'll be grateful if there is something that can convert this whole great design with animations into code without hiring any middle man to convert into code bcoz I don't know any bit of coding Please reply me

  • @tsdonalds1668

    @tsdonalds1668

    9 ай бұрын

    ​​@@aestheticaryan763what are they,new in here and want to know this before learning 😊

  • @leonide2906
    @leonide2906 Жыл бұрын

    Thank you fr your helpful video. But the question is : how to export your Framer code to host on internet, especially on headless CMS and Vercel or Netlify ? Is this like Webflow which is useless as you cannot export all features to deploy on your current customer's tools ?

  • @adied7725
    @adied7725 Жыл бұрын

    is there any free plugin inside framer that could be used to build animations?, please .....mots plugins need need to export, this is time consuming

  • @dapsyculture907
    @dapsyculture907 Жыл бұрын

    everday keep learning and making coding easy....what abt the javascript pls

  • @nareshpalsingh3975
    @nareshpalsingh3975 Жыл бұрын

    The new Framer has a lot of potential!! Framer > figma now

  • @jesusavendano5261
    @jesusavendano5261 Жыл бұрын

    What is your tip for search job in the next year?

  • @satendrabais2806
    @satendrabais2806 Жыл бұрын

    Your ux bubble is bursted now. 🤣

  • @creatorsshorts9227

    @creatorsshorts9227

    Жыл бұрын

    what you mean brother?

  • @satendrabais2806

    @satendrabais2806

    Жыл бұрын

    @@creatorsshorts9227 it means the hype was created by these people that there is a huge scope of ui ux just to sell their courses. But reality is way different.

  • @tanimistiak
    @tanimistiak3 ай бұрын

    Framer is a trash in terms of usability. I can only host website on their server. I cant even export the codes lol.

  • @PunitChawla

    @PunitChawla

    2 ай бұрын

    Well, their business depends on that tbh. It's the same with some other no-code tools.

  • @krishsrivastava2145
    @krishsrivastava2145 Жыл бұрын

    Bhai kuch Hindi me bhi bata diya karo

  • @adied7725
    @adied7725 Жыл бұрын

    Wish there was something like this free?... Actually to use inside framer, always have to export or use something else which never is free

  • @kimbapslayer1995
    @kimbapslayer1995 Жыл бұрын

    This is great for designers but as a coder, id rather just use html, cue or jsx templates. Then throw in framer motion or another animation library. Plus no bloatware in the code.

  • @meghanaGG
    @meghanaGG Жыл бұрын

    Whom to contact. Design wings Mail id on the web site is incorrect. Contact number is incorrect. You don't reply on LinkedIn/insta. Completed the course in Oct still haven't received course completion certificate. Whom to contact??

Келесі