Figma to Framer: How to Build a Live Portfolio Website

Поділитися
Вставка
  • Опубліковано 12 січ 2025

КОМЕНТАРІ • 76

  • @r.saranyadevi734
    @r.saranyadevi734 3 місяці тому +4

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

    • @DesignXstream
      @DesignXstream  3 місяці тому

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

  • @abelemmanuel8697
    @abelemmanuel8697 2 місяці тому +1

    Best Framer tutorial out here, Thank you so much!

    • @DesignXstream
      @DesignXstream  2 місяці тому

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

  • @Glitzviral
    @Glitzviral 2 місяці тому +1

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

  • @Kriti-fv2ys
    @Kriti-fv2ys 4 місяці тому +1

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

    • @DesignXstream
      @DesignXstream  4 місяці тому

      Glad you found it helpful! Cheers ✌🏼

  • @clasher3302
    @clasher3302 4 місяці тому +1

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

  • @shyasundar
    @shyasundar 2 місяці тому +1

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

    • @DesignXstream
      @DesignXstream  2 місяці тому

      Cheers! Glad you found it helpful ✌🏼

  • @petera1033
    @petera1033 4 місяці тому +1

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

    • @DesignXstream
      @DesignXstream  4 місяці тому

      Thanks! Happy to hear that ✌🏼

  • @nuradesignz
    @nuradesignz Місяць тому +1

    This is great! Thanks for this.

  • @malikamazhar267
    @malikamazhar267 9 днів тому +1

    Well explained MashaAllah

  • @ThinkingTamizha
    @ThinkingTamizha 4 місяці тому +1

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

    • @DesignXstream
      @DesignXstream  4 місяці тому

      Glad you found it helpful! Cheers ✌🏼

  • @sreevidhya6336
    @sreevidhya6336 11 днів тому +1

    Thank you it is very helpful

    • @DesignXstream
      @DesignXstream  10 днів тому

      Glad you found it helpful! Cheers ✌🏼

  • @SpankIEkzs
    @SpankIEkzs 5 місяців тому +1

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

    • @DesignXstream
      @DesignXstream  5 місяців тому

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

  • @ನವೀನ್ಗೌಡ
    @ನವೀನ್ಗೌಡ 5 місяців тому +4

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

    • @DesignXstream
      @DesignXstream  5 місяців тому

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

  • @Mixedit0
    @Mixedit0 18 днів тому +3

    Is it possible to import it back to the figma site after doing it on the framer site?

    • @DesignXstream
      @DesignXstream  10 днів тому +1

      There is no direct method but once you publish a framer website maybe the html to design plugin can help you take it back to Figma. But this is something I haven't explored.

  • @gardenia-teal
    @gardenia-teal 4 місяці тому +1

    Great video,love it💞

    • @DesignXstream
      @DesignXstream  4 місяці тому

      Glad you liked it!! Cheers! ✌️

  • @petermichael604
    @petermichael604 5 місяців тому +2

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

    • @DesignXstream
      @DesignXstream  5 місяців тому

      Glad you liked it! Cheers ✌️

  • @mrbl1986
    @mrbl1986 3 місяці тому +2

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

    • @DesignXstream
      @DesignXstream  3 місяці тому +1

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

  • @shivani2316
    @shivani2316 Місяць тому +1

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

    • @DesignXstream
      @DesignXstream  Місяць тому

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

  • @siri8782
    @siri8782 5 місяців тому +1

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

    • @DesignXstream
      @DesignXstream  5 місяців тому +1

      Glad you found it helpful! Cheers ✌️

    • @siri8782
      @siri8782 5 місяців тому

      @@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
      @DesignXstream  5 місяців тому +1

      @@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
      @siri8782 5 місяців тому

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

  • @rose.untalan
    @rose.untalan 3 місяці тому +1

    u made it look so simple..

  • @siddheshpatange213
    @siddheshpatange213 2 місяці тому +1

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

    • @DesignXstream
      @DesignXstream  2 місяці тому

      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
      @siddheshpatange213 2 місяці тому

      Thanks Bro ❤

  • @razern420
    @razern420 Місяць тому +1

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

    • @DesignXstream
      @DesignXstream  Місяць тому

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

  • @prasanthwarre
    @prasanthwarre 6 місяців тому +2

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

    • @DesignXstream
      @DesignXstream  5 місяців тому +2

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

  • @studydostudy
    @studydostudy 2 місяці тому +1

    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
      @DesignXstream  2 місяці тому

      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.

  • @ahmedyahya3593
    @ahmedyahya3593 4 місяці тому +1

    Thank you very very much ❤

  • @Village-Travel
    @Village-Travel 20 днів тому +1

    could we find clients for Framer after learning? it's scope?

    • @DesignXstream
      @DesignXstream  10 днів тому +1

      If clients come to you with a website requirement, learning Framer can be a great way to build it for them. However, you won't often find clients seeking a website specifically built with Framer.

    • @Village-Travel
      @Village-Travel 10 днів тому

      @@DesignXstream then how we can earn from framer?

  • @tlmk4439
    @tlmk4439 3 місяці тому

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

    • @DesignXstream
      @DesignXstream  2 місяці тому +1

      Its not automatic you need to add links.

  • @vargaswrld
    @vargaswrld 4 місяці тому +1

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

    • @DesignXstream
      @DesignXstream  4 місяці тому +1

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

  • @Dvm_11
    @Dvm_11 5 місяців тому +1

    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
      @DesignXstream  4 місяці тому +2

      • 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
      @Dvm_11 4 місяці тому

      @@DesignXstream thanks

  • @046_pankajverma6
    @046_pankajverma6 4 місяці тому +1

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

    • @DesignXstream
      @DesignXstream  4 місяці тому

      You can add your own breakpoints or modify the defaults.

  • @muhammadaazamshaik6123
    @muhammadaazamshaik6123 4 місяці тому

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

  • @NITESHVERMA-h6h
    @NITESHVERMA-h6h 5 місяців тому

    figma k animation framer me use kaise chalnge

    • @DesignXstream
      @DesignXstream  5 місяців тому

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

  • @saavan.
    @saavan. 4 місяці тому

    not able to manage the breakpoint

  • @prsna888
    @prsna888 6 місяців тому +1

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

    • @DesignXstream
      @DesignXstream  6 місяців тому +1

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

    • @kizuri1948
      @kizuri1948 5 місяців тому +3

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