Responsive Web Design Tutorial by Figma Breakpoints Plugin - Figma Responsive Web Design Tutorial

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

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

  • @essentialwebapps
    @essentialwebapps  Год назад

    🎯 Check out our latest Ultimate Figma Mega-Course ➡️ rb.gy/odk72

  • @Blaqcrystal
    @Blaqcrystal 3 года назад +2

    I think this is the most understood video I have watched on responsive designs, I love it

  • @陳雅芳-v2g
    @陳雅芳-v2g 3 года назад +10

    You just solved the mysteries that had been making me doubt my own existence for the last two days. You're wonderful!

    • @essentialwebapps
      @essentialwebapps  3 года назад

      Thanks for your kind words and we really happy to know that you solved your issue. Please don't forget to share our videos if you like and keep in touch :)

  • @Niarmessayu
    @Niarmessayu 2 года назад

    I love this tutorial. Thanks You So much....

    • @essentialwebapps
      @essentialwebapps  2 года назад

      Thanks a lot for watching the video. I hope you will subscribe 😊

  • @creatoratplay
    @creatoratplay Год назад

    This was really helpful. Thank you!!

    • @essentialwebapps
      @essentialwebapps  Год назад

      Thank you so much for your feedback. Please keep in touch for more videos 🙏

  • @TomHermans
    @TomHermans 3 года назад

    Finally I find out how it's done. Bought the plugin immediately. Thanks.

  • @jayminmaheta8253
    @jayminmaheta8253 3 года назад +1

    Yes Please Create one Video on Typography

    • @essentialwebapps
      @essentialwebapps  3 года назад

      Thanks a lot for your reply. Here's the link of the Typography video, 😊
      ruclips.net/video/y5cfHgucdUI/видео.html

  • @kamlasingh2421
    @kamlasingh2421 2 года назад +1

    Yes we want a detailed typography video

    • @essentialwebapps
      @essentialwebapps  2 года назад

      Thanks a lot for your comment. Here is the Typography video link for you,
      ruclips.net/video/y5cfHgucdUI/видео.html
      I hope you will subscribe for future videos. 😊

  • @gopalgouda17
    @gopalgouda17 2 года назад

    thank you very much! you cleared my doubt, thank you... thank you... thank you

    • @essentialwebapps
      @essentialwebapps  2 года назад

      Thanks a lot for your good words. glad that our video helped you. Please subscribe for future videos 😊

  • @suyashhandke
    @suyashhandke 3 года назад +3

    i love your channel ! Really Good Content ! Pls Make Video on TYPOGRAPHY .

    • @essentialwebapps
      @essentialwebapps  3 года назад

      Thanks a lot for your kind words and feedback 🙏. I'm putting your suggestions on todo list. Please keep in touch, like and share 🙂.

  • @pheyie
    @pheyie 3 года назад +4

    Thanks for this. Please make a typography breakdown video

    • @essentialwebapps
      @essentialwebapps  3 года назад

      Thanks for your Feedback. We are putting your suggestions on our todo list 🙂. Please share our videos with your friends and inspire us 🙏.

  • @productdesignerdavid4068
    @productdesignerdavid4068 3 года назад +1

    Great and Perfect Teacher OF WEB DESIGN ! ! your skilled and technique is so beautiful !! we are so proud about your technique ! please upload more videos !

    • @essentialwebapps
      @essentialwebapps  3 года назад

      Thanks a lot for your comment. Please keep in touch for our future Tutorials 🙏

  • @adiliqbal7222
    @adiliqbal7222 3 года назад +1

    Thank you for solving adoptive design issue. It was great a help and big relief for me as a designer.

  • @IsraelAnibal
    @IsraelAnibal 3 года назад +2

    I watched it just for the stuff at the end, but hey! I learned some interesting things by watching the whole video. I'm glad to have seen it all, great work!

    • @essentialwebapps
      @essentialwebapps  3 года назад

      Thanks a lot for your lovely comment. Really appreciated ...

  • @paulussihombing6922
    @paulussihombing6922 3 года назад +2

    The best Figma tutorial ever. Thanks, man. You're the hero.

    • @essentialwebapps
      @essentialwebapps  3 года назад

      Your words means a lot to us. You are most welcome. Please keep in touch and do not forget to share our videos with your friends 🙏

  • @emilywong1231
    @emilywong1231 2 года назад

    This helps a lot! Thanks a lot and look forward to more of your videos!

  • @hafeez3824
    @hafeez3824 2 года назад

    Awesome video thank you very much🔥❤️

    • @essentialwebapps
      @essentialwebapps  2 года назад

      Glad that you liked our video. I hope you will subscribe 😊

  • @adepurnama1642
    @adepurnama1642 2 года назад

    Thanks a lot for your explanation on Figma Auto Layout and Reaponsiveness! It really helps me understand it better.

    • @essentialwebapps
      @essentialwebapps  2 года назад

      You are most welcome, keep in touch and don't forget to Subscribe and share our videos 🙏

  • @aqua-marine-
    @aqua-marine- 2 года назад

    Many thanks.

    • @essentialwebapps
      @essentialwebapps  2 года назад

      Glad that you liked our video. I hope you will subscribe 😊

  • @yoyoiziah
    @yoyoiziah 3 года назад

    You just made my life soo much easier!!

    • @essentialwebapps
      @essentialwebapps  3 года назад

      Glad that it helped🙌. Many thanks for staying with me. Don't forget to share our videos with your friends 🙏

  • @rukminikotamraju
    @rukminikotamraju 3 года назад

    Very useful. Thank you.

  • @romangrechylo1821
    @romangrechylo1821 3 года назад

    Thank you for such a nice tutorial.
    Like and comment for YT algorithm

  • @memoinanci5984
    @memoinanci5984 2 года назад +1

    Nice video. what if you have multiple webpages? Do you do all of this for each page?

    • @essentialwebapps
      @essentialwebapps  2 года назад +1

      In case of multiple page, you just have to convert that into components and use the child element. I hope this helped and hope you will subscribe 😊

  • @PeterSierra
    @PeterSierra 3 года назад

    Thank you!!!

  • @SonuKumar-ll2en
    @SonuKumar-ll2en 3 года назад

    Best Figma Tutorial, It's very useful

    • @essentialwebapps
      @essentialwebapps  3 года назад

      Thanks for your word. Keep in touch for future videos 😊

  • @mandysaikia6984
    @mandysaikia6984 3 года назад +2

    Yes , we want a detailed video on typography..

    • @essentialwebapps
      @essentialwebapps  3 года назад +1

      Thanks a lot for your feedback. A video on typography is already on our to-do list. Please stay with us for that video.

  • @zincshane5066
    @zincshane5066 2 года назад

    Amazing...

    • @essentialwebapps
      @essentialwebapps  2 года назад

      Thanks a lot that you liked our video. I hope you will subscribe for videos 😊

  • @shamsbt
    @shamsbt 2 года назад

    Just discovered your account and I love it! Thank you so much for your quality videos. I would like to learn about how to resize/format my website mockup so that it looks nice when i use the view tool on figma. At the moment, it's way too big for my screen

    • @essentialwebapps
      @essentialwebapps  2 года назад

      Thanks a lot for your good words. I hope below video will help you to understand that,
      ruclips.net/video/T--XhPdO_yA/видео.html
      ruclips.net/video/WTNDJtjRQNc/видео.html
      Hope this helps, and please subscribe 😊

  • @mehboobulhaq4337
    @mehboobulhaq4337 2 года назад +1

    How I can apply hoover effects etc on website design in Figma??

    • @essentialwebapps
      @essentialwebapps  2 года назад

      Thanks for your comment. Here's a video for you,
      ruclips.net/video/v3WmuiDCrrA/видео.html
      I hope this will help. And please subscribe 😊

  • @marketinginhouse
    @marketinginhouse 2 года назад +1

    Hi, Is there any way to be able to export everything to a html and css file quickly with some plugin?

    • @essentialwebapps
      @essentialwebapps  2 года назад

      Thanks a lot for your comment. Well it is possible, and there are few plugins for this too, like Anima or Quest. But these are not perfect. You still have to do adjustments manually. I hope this helps and you will subscribe 😊

  • @HiepTran-fh2jz
    @HiepTran-fh2jz 3 года назад +1

    Thanks for your great video, I have a question I hope you answer. All three types of devices have to do 3 different design systems and auto layout for components. So is this plug-in really necessary?

    • @essentialwebapps
      @essentialwebapps  3 года назад +1

      Thanks a lot for your comment. Well, these types of plugins exist because of clients and clients only. Sometimes, clients might want to see close to the real site prototype, before development. And, only then you might have to use this kind of prototyping.

  • @MOHAMEDHASSAN-fk9jv
    @MOHAMEDHASSAN-fk9jv 3 года назад

    Fantastic.

  • @PhantomHarlock78
    @PhantomHarlock78 3 года назад +3

    Great videos. Please make one about large desktops using all 1920px but scalling down to 1280 or something in that range. I always feel confuse on how to approach full 1920 layouts.

    • @essentialwebapps
      @essentialwebapps  3 года назад +1

      Thank you for the feedback. I am putting your feedback on the future todo list :) . Keep in touch 🙏

  • @venkateshkomera6023
    @venkateshkomera6023 3 года назад

    exellent !

  • @booster_design
    @booster_design 2 года назад +1

    interesting !!!
    how can i export this design adaptive and have code for implamentation ?

    • @essentialwebapps
      @essentialwebapps  2 года назад +1

      Thanks a lot that you liked the video. Well, to be honest there is no good way to export the design to code. There are few Figma plugins for this. But it's better to code from scratch. I hope you will subscribe 😊

    • @booster_design
      @booster_design 2 года назад

      @@essentialwebapps yes i can code it from scratch thank

  • @carolloiola_
    @carolloiola_ 3 года назад

    Hi! Loved the video, thank u very much. I was wondering if the plugin changes do code too? The one that figma provides

    • @essentialwebapps
      @essentialwebapps  3 года назад

      Thanks for your comment. If I understand your question correctly, then the answer is no. The plugin is a separate application that works with the Figma application. I hope this helps. 😊

  • @GraveRave
    @GraveRave 3 года назад +3

    I really like this tutorial, a question I have is when would it be a good time to use auto-layout, should all elements in the design have them?

    • @essentialwebapps
      @essentialwebapps  3 года назад +2

      Thanks a lot for your comment. I use it all the time. The auto-layout really helps you to edit your design afterward without worrying about the numbers and alignment. But, this is just my opinion. There are lots of designers who never use this. So, it's totally up to you and your comfort.

    • @GraveRave
      @GraveRave 3 года назад +1

      @@essentialwebapps I understand, thanks for the feedback.

    • @eu.guilhermehorcades4892
      @eu.guilhermehorcades4892 3 года назад

      @@essentialwebapps
      Nicr

    • @Franbua
      @Franbua 2 года назад

      @@essentialwebapps Is it possible? I mean not using auto-layout at all. How does it become responsive then?

  • @marwamahmoud9844
    @marwamahmoud9844 Год назад

    great.. so how do we convert it to html ... and what page we should convert

    • @essentialwebapps
      @essentialwebapps  Год назад

      Good question Marwa. The best to way to convert it manually so it will pixel perfect. That being said, you need to know HTML and CSS to convert this.

  • @rdnblg
    @rdnblg 3 года назад

    Thank you ☺️

    • @essentialwebapps
      @essentialwebapps  3 года назад +1

      You are welcome! Please keep in touch for our future Tutorials 🙏

  • @yamilafritzler9607
    @yamilafritzler9607 3 года назад

    where is the grid information (columns,gutter, margin, etc) of the desktop frame? thanks!

  • @canersanli
    @canersanli 3 года назад +1

    Great video! Is there a simple way to implement this responsiveness with coding?

    • @essentialwebapps
      @essentialwebapps  3 года назад

      Thanks a lot. For your comment. You can use Bootstrap for that.

  • @danielmbazu367
    @danielmbazu367 3 года назад +1

    This is soo fantastic 😍
    However, can you please make it more detailed, I'm kinda new to auto layout and constraints, I don't mind even if the video is long.
    I'll still watch, thank you.

    • @essentialwebapps
      @essentialwebapps  3 года назад +2

      Thanks a lot for your comment. We have two other videos on auto layout and constraints for responsive design. Here's the link for you,
      ruclips.net/video/zYpYax-M4co/видео.html
      ruclips.net/video/FQXi15Ihoqw/видео.html
      I hope you will subscribe for our future videos 😊

    • @danielmbazu367
      @danielmbazu367 3 года назад +1

      @@essentialwebapps
      Sure I will, your videos are mind blowing. 😊

  • @victoralidu7669
    @victoralidu7669 3 года назад +1

    Interesting

  • @renatahiguti8092
    @renatahiguti8092 2 года назад

    Downloading this WordPress theme do I get access to the Figma file?

    • @essentialwebapps
      @essentialwebapps  2 года назад

      No, this Figma design is done during the theme UI development process and in house use only. But this is great premium WordPress theme.

  • @prakashanuvadia8870
    @prakashanuvadia8870 2 года назад +1

    without plugin how it's should be done ?

    • @essentialwebapps
      @essentialwebapps  2 года назад +1

      Thanks a lot for your comment. But there is no other ways to achieve this without the plugin. I hope this helps and hope you will subscribe 😊

  • @MiLino.o
    @MiLino.o 3 года назад

    niceeeeeeeeeeee

  • @hussainsalih3520
    @hussainsalih3520 3 года назад

    We need typography, thanks 😊

    • @essentialwebapps
      @essentialwebapps  3 года назад +1

      Thanks a lot for your comment. This topic is already in our todo list. Keep in touch with us by subscribing to our channel.

    • @hussainsalih3520
      @hussainsalih3520 3 года назад

      @@essentialwebapps of course I’m ready

  • @Anthonyanderson075
    @Anthonyanderson075 3 года назад +1

    how do you undo or remove a breakpoint

    • @essentialwebapps
      @essentialwebapps  3 года назад

      Thanks a lot for your comment. Breakpoint plugin creates a totally new frame for the adaptive response. Your original design is intact in three separate frames. This plugin does not merge those. And, if you change anything on those three frames, you will see the change in the adaptive frame also. But, you can always delete the adaptive frame to create a new one.

  • @revaclay2734
    @revaclay2734 2 года назад

    I am doing the free trial version, and whenever I convert my frames into breakpoints, it doesn’t let me preview it at all it just shows the little purple box and I don’t know how to fix that

    • @essentialwebapps
      @essentialwebapps  2 года назад

      Thanks a lot for your comments. If it is something caused because of trial version. Then maybe you might have to purchase it. But if not, just remove and reinstall the plugin. I hope that will fix. I hope you will subscribe 😊

  • @clementborisov7050
    @clementborisov7050 2 года назад +1

    Hey. Thanks for the tutorial as it helps me make my designs responsive in Figma also. Do you happen to use components by chance? Shouldn't these fonts you declared as the headings and the paragraphs be components? It makes sense to me.

    • @essentialwebapps
      @essentialwebapps  2 года назад

      Thanks for your comments and yes you are right. It's very handy if you declare the full font family in Text Style. In that way it will much easier to implement as well as change the font family. I hope you will subscribe 😊

    • @clementborisov7050
      @clementborisov7050 2 года назад

      @@essentialwebapps I did. I find I like your design tutorials as I want to improve my own designs. I'm more of a back-end web developer, want to step up my UX/UI game also.

  • @santhoshkumars1116
    @santhoshkumars1116 3 года назад

    hi this santhosh i tried with breakpoints by seeing your video and getting as expected but after some period of time the trail version got expired and asking to upgrade to pro so i couldn't able to use breakpoint plugin please give me some suggestion Thank you

    • @essentialwebapps
      @essentialwebapps  3 года назад +1

      Thanks for your comments. We looked up, and unfortunately there is no alternative to this plugin yet.

    • @santhoshkumars1116
      @santhoshkumars1116 3 года назад

      @@essentialwebapps thanks for your response

    • @santhoshkumars1116
      @santhoshkumars1116 3 года назад

      @@essentialwebapps is there any other alternative plugin

    • @essentialwebapps
      @essentialwebapps  3 года назад +1

      As far as I know, there is none yet. But if any, we will make a video on that too... 😊

    • @santhoshkumars1116
      @santhoshkumars1116 3 года назад +1

      Thank you man

  • @chuyencuaandy
    @chuyencuaandy 3 года назад +1

    can you give me the figma file in the video? Pls

    • @essentialwebapps
      @essentialwebapps  3 года назад +1

      Thanks a lot for your comment. We are preparing all the files of our all Figma videos. Within a short time, we will release the Figma files for all. Thanks for staying with us.

    • @chuyencuaandy
      @chuyencuaandy 3 года назад

      @@essentialwebapps yes, thank you very much! I'm looking forward to being able to learn from real projects, just watching videos makes it difficult for me to absorb.

  • @bflynn02035
    @bflynn02035 2 года назад

    The typo "Dispaly" is a turn-off. Does anyone proof-read this stuff before you publish it?

    • @essentialwebapps
      @essentialwebapps  2 года назад

      Yes, our big mistake. We will be careful in the future. Other than the typo, did you find the video useful?