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

Подписаться 150 тыс.

Просмотров 102 тыс.

50% 1

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

Хобби

Опубликовано:

26 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 84

@nehasoni8504 Год назад

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

@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 9 месяцев назад

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 8 месяцев назад

Love your tutorials, thank you for sharing 💙

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

Lovely! Awesome! Thank you Man!

@farhana6583 Месяц назад

This is straight to the point! thankyou

@PunitChawla Месяц назад

Glad you liked it :)

@2wentyracks 9 месяцев назад

Thankyou for the info🙏🏻

@chandrashravani1723 3 месяца назад

actually I need this thanks a lot sir 😍

@PunitChawla 2 месяца назад

Glad you found it helpful :D

@Diyas_world 4 месяца назад

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

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

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

@LifeBouy1 Месяц назад

Where do you get those images from

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

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

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

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

@hibbanasim6514 Год назад

Can we export Working prototyper to framer

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

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

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

i want last website tutorial video bro

@et1555 4 месяца назад

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 Год назад

This is super insightful. Thank you and keep going!

@PunitChawla Год назад

Glad you found it useful

@drama.sreerama Год назад

This was super helpful! Thank you!

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

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

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

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

@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 Год назад

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♥️

@Gagan_salwan Год назад

Amazing as always, great video!

@workmenstudioinc1880 Год назад

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

@jesusavendano5261 Год назад

It's a little difficult but not impossible

@samyetism3492 Год назад

Amazing video! Keep it up!

@shubhiagrawal9885 Год назад

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

@AftarHussain-ml7hb Год назад

how to import it to WordPress elementor any idea?

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

can i expoert it into code?

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

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

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

can u?

@saurabhgupta5257 Год назад

Can framer replace frontend developer jobs ?

@eashwarkrishna7936 Год назад

Definitely not it’s will reduce time for developer

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

Nah lol all this shi just makes it easier 🎉

@strahilprimedivision8718 Год назад

You are a gem my friend!

@PunitChawla Год назад

Thank you my friend! :)

@ceriousx Год назад

Such an informative video😍

@ayushimishra8002 Год назад

Thank you so much for making this video. Super useful

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

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

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

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

@jesusavendano5261 Год назад

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

@kiexx Год назад

Very nice tutorial, thank you so much sir

@Saeed.... Год назад

Wow this is great features

@christophs.3869 Год назад

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

@bearduo Год назад

No you can’t

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

Yes

@cyrilignatius1784 Год назад

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

@caglisto Год назад

More videos like this please!!

@taimoorrasheed7532 Год назад

Owsumm..great 👍

@des7638 Год назад

Awesome demo

@SuperMoemedi Год назад

Amazing tutorial

@hellovenkee Год назад

wonderful

@petersonkariuki8300 Год назад

Thank you for your video.

@pavankshirsagar224 Год назад

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

@smartthemers7781 Год назад

Can we export these animation to code?

@aestheticaryan763 Год назад

yes, as a lottie file

@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 9 месяцев назад

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

@MrAstor69 Год назад

Nice video

@soypablocarballo Год назад

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

@tissoeh Год назад

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

@soypablocarballo Год назад

@@tissoeh Thanks for the answer! :D

@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

@basmaelhalabi1754 Год назад

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

@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?

@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

@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 ?

@dapsyculture907 Год назад

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

@nareshpalsingh3975 Год назад

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

@jesusavendano5261 Год назад

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

@tanimistiak 2 месяца назад

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

@PunitChawla 2 месяца назад

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

@satendrabais2806 Год назад

Your ux bubble is bursted now. 🤣

@creatorsshorts9227 Год назад

what you mean brother?

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

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

@krishsrivastava2145 Год назад

Bhai kuch Hindi me bhi bata diya karo

@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

@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??