Figma to Framer: How to Build a Live Portfolio Website

[@r.saranyadevi734]

Thank you so much! I was searching KZbin to find the right video to make a design portfolio. Finally found one! So helpful!

[@DesignXstream]

Glad you found it helpful... Cheeers! ✌🏼

[@Glitzviral]

I love the way you teach so much! this is what I was looking for.

[@DesignXstream]

Glad you liked it....Cheers! ✌️

[@abelemmanuel8697]

Best Framer tutorial out here, Thank you so much!

[@DesignXstream]

Glad you found it helpful... Thanks ✌🏼😄

[@clasher3302]

Man your way of teaching is on another level 🎉, I learnt framer by watching other videos on KZbin but if I find your video earlier it will be easier for me to learn framer quickly btw You are doing a great job.❤

[@DesignXstream]

Thanks! Cheers ✌🏼

[@Kriti-fv2ys]

One of the best videos i have encountered. Everything is explained in simple steps and its quite practical.Thanks

[@DesignXstream]

Glad you found it helpful! Cheers ✌🏼

[@shyasundar]

you are a life saver, best and precise explanation. spot on. you earned a sub.

[@DesignXstream]

Cheers! Glad you found it helpful ✌🏼

[@petera1033]

Thank you for being an excellent high signal to noise presenter - subscribed. atb Pete

[@DesignXstream]

Thanks! Happy to hear that ✌🏼

[@nuradesignz]

This is great! Thanks for this.

[@DesignXstream]

Cheers! ✌️

[@SpankIEkzs]

You are awesome my man! All the Best to you from Serbia 💥✨👍👍👍👑

[@DesignXstream]

Cheers! I'm glad you found it informative 🙌🏼

[@ThinkingTamizha]

Thank you ...bro....I just confuse to use framer ...bt now i am very clear...

[@DesignXstream]

Glad you found it helpful! Cheers ✌🏼

[@siri8782]

Really this video is so much helpful!! Thanks a ton

[@DesignXstream]

Glad you found it helpful! Cheers ✌️

[@siri8782]

@@DesignXstream Could you please make videos on how to convert wire frames into final web sites with proper spacing and alignment, your help will really mean a lot..

[@DesignXstream]

@@siri8782 So a video on spacing and alignment? I think this could be part of a larger playlist. I'll try to plan something.

[@siri8782]

@@DesignXstream Thank you so much!! I'll be very glad when the playlist is out..

[@shivani2316]

a very helpful video. sir can you make a video on how to find a problem statement for your first project

[@DesignXstream]

Hey Shivani, That's an interesting topic I'll keep that noted and try making a video of it.

[@mrbl1986]

thank you Sir, Can I copy/export created animations in Figma to Framer? Are they also visible in the mobile phone view?

[@DesignXstream]

No Figma animations dont export to framer. You need to redo it on Framer.

[@gardenia-teal]

Great video,love it💞

[@DesignXstream]

Glad you liked it!! Cheers! ✌️

[@studydostudy]

Can anyone tell me how, to the auto layout so it shows stack I tried my best to the auto layout thing and them paste it in framer and adjust it to fill container but still nit changing!

[@DesignXstream]

In Figma, apply Auto Layout to your elements and set the direction (vertical or horizontal) as needed. Copy and paste into Framer, then select "Fill Container" to make it responsive. Adjust padding and spacing in Framer if needed for fine-tuning.

[@ನವೀನ್ಗೌಡ]

Really it was an best tool for a beginnerz also make an more videos related framer tutorial and it's animations...

[@DesignXstream]

Glad you found it useful! I'll try to add more videos on this tool.

[@razern420]

Can u show me the workflow from where u import figma prototype into framer instead of directly showing framer from the beginning?

[@DesignXstream]

Figma prototype cannot be imported. Only designs can be. You need manually add the interactions in Framer.

[@petermichael604]

thankyou for the tips sir!! cheers from Philippines! more videos bout framer pls!!

[@DesignXstream]

Glad you liked it! Cheers ✌️

[@ahmedyahya3593]

Thank you very very much ❤

[@DesignXstream]

Glad you liked it! Cheers ✌🏼

[@tlmk4439]

Hello. Thank you for the video. The prototype also works automatically, when pressing bottoms to other pages, for example?

[@DesignXstream]

Its not automatic you need to add links.

[@Dvm_11]

I'm having trouble creating interactions between pages in Framer. When I select an element and look for the "Interactions" option in the right-hand panel, it doesn't appear. I've tried different types of elements but I still can't find a way to link pages with transitions. Could you please assist me in locating the interactions feature or guide me on how to link pages with transitions

[@DesignXstream]

• Select the element you want to use as a link (e.g., a button or text). • In the right-hand panel, look for a section called "Navigate To" or "On Click" (the exact name may vary). • Click on this option and select the page you want to link to. • Once you've set up the link, you should see an option to add a transition. This might be labeled as "Transition" or "Animation." • Click on this to choose the type of transition you want (e.g., slide, fade, etc.) and adjust its parameters.

[@Dvm_11]

@@DesignXstream thanks

[@siddheshpatange213]

Great explaination❤.. how many pages I can create in free plan

[@DesignXstream]

There’s no page limit on Free plan. You can have as many page as you want. Can use cms also. There are other limitations like, you can’t use custom domain, will have ‘Made with Framer’ tag, there’s visitors limit and more.

[@siddheshpatange213]

Thanks Bro ❤

[@vargaswrld]

We can't do prototyping in framer like in Figma ?

[@DesignXstream]

Yah the animations part work slightly different from Figma. There is not Smart animate but you can achieve a lot of it in framer.

[@rose.untalan]

u made it look so simple..

[@DesignXstream]

I hope that's a good thing 😅

[@046_pankajverma6]

mt desktop tab is not working it gets open from tablet then phone not showing the desktop ....what to do???????????

[@DesignXstream]

You can add your own breakpoints or modify the defaults.

[@prasanthwarre]

looks like a great tool for portfolios. can we also put it on our domain name?

[@DesignXstream]

Yes you can publish the website to your custom domains with the Mini & Basic plans.

[@muhammadaazamshaik6123]

sir..can you please tell the resume for UI/UX for the freshers..

[@DesignXstream]

You want like a template for freshers?

[@muhammadaazamshaik6123]

Yes​@@DesignXstream

[@NITESHVERMA-h6h]

figma k animation framer me use kaise chalnge

[@DesignXstream]

That is not possible. Only design from figma can be imported.

[@saavan.]

not able to manage the breakpoint

[@DesignXstream]

Whats the issue you are facing?

[@prsna888]

Bro, your accent is super artificial, instead try speaking in a normal tone.

[@DesignXstream]

Yah, I can try speaking in a normal tone... probably just needs some practice.

[@kizuri1948]

@@DesignXstream Great video! and There's no problem with your accent.