Это видео недоступно.
Сожалеем об этом.

Create responsive layout with Breakpoints in Figma

Поделиться
HTML-код
  • Опубликовано: 5 июл 2020
  • www.figma.com/community/plugi...
    Finally, the Breakpoints are here in Figma as a resizable native #frame. The plugin works even if you close the window. It also means that for all collaborators, Breakpoints work correctly.
    Part 2: Share animated prototypes with Breakpoints in Figma
    • Share animated prototy...

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

  • @uxniels
    @uxniels 3 года назад +58

    Awesome! This should be native in Figma 😀

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

      Yeah that's useless plugin prototyping

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

      I'm sure it will be at some point

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

      ​@@amitsinha5621 Now you can auto-create animation Figma prototypes from Breakpoints layout. Try it!
      ruclips.net/video/e6pT5nrIqiQ/видео.html

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

      ​@@floweare36after used this plugin, how can we generate a code for that responsive layout??

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

    Wow, this is what I was thinking about just today for magical responsive website creation and here I got your video. Thanks a lot man for sharing this. You are great!

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

    Totally killing the plugin game! Keep em coming!!

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

    Awesome work on this plugin. Thank you. Please keep it updated. I use it often.

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

    Love this! Can't wait to try it out.

  • @irynashkolna7606
    @irynashkolna7606 4 года назад +2

    It's amazing!!! Love it! Thank you 🙏

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

    This is amazing...! I really love it. I found many plugins but this plugin which I want to make design perfect. Thank you

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

    Awesome plugin!) Thank you a lot!

  • @Fabian-in3fx
    @Fabian-in3fx 2 года назад

    Thanks a lot for that awesome plugin!

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

    Beautiful! a game-changer indeed!

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

    Amazing work dude.

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

    This is amazing! Great work :)

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

    This is brilliant!

  • @ryzeonline
    @ryzeonline 5 месяцев назад

    Stunning. Thank you.

  • @OddityLemmur
    @OddityLemmur 4 года назад +2

    Totally genius!

  • @lijxse
    @lijxse 4 года назад +2

    I like this, Tank you.

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

    Unreal, thank you!!!!

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

    Absolutely fantastic!!!!!!!!!!!!!

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

    This is magical!

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

    wow that's amazing!!!

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

    That's awesome 🤩

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

    Thank you very much
    God bless you :))

  • @ania_bliznec
    @ania_bliznec 4 года назад +5

    Великолепно, спасибо!

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

    Awesomeeeee! :D

  • @Ahmad-dy8cp
    @Ahmad-dy8cp 3 года назад

    That is awesome... Question guys... how many breakpoints shall I create, and what are the widths of each one to design a web app that will work across all devices. I have read tons of articles and haven't been able to find a useful straightforward answer.

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

    wow, amazing

  • @kevinnl9637
    @kevinnl9637 3 года назад +12

    Wow, this might be a game-changer for me to switch to Figma. Would love to see a trigger to animate and resize the canvas while making a screen recording (and hides the cursor).

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

      1:21 he shows how to choose between them that would hide the cursor

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

      This would be the reason? What tool are you using? Sketch? Adobe XD? ....

  • @user-by2wo3gd8g
    @user-by2wo3gd8g Год назад

    How does this work if your artboards / frames are different heights? Or does it only work well if they all have the same height? Would love to know how to overcome that.

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

    Approve!! #UIlover

  • @martinui4892
    @martinui4892 4 года назад +6

    Te amo

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

    Лучший!

  • @svobodu-sibiri
    @svobodu-sibiri 2 года назад +6

    Do not understand goal. Either way, I have to define all the layouts in all sizes.
    How does your plugin make Designprocess oder Development easier? Visually looks good, but ... is that all?

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

      Same thought, when you've to define everything for each screen size, it is double work.

  • @caryldsouza
    @caryldsouza Год назад +2

    This is fantastic! I've purchased a licence. I can only seem to get it set up so it almost acts like a frame jump. I have responsive components within that I would like to see behave fluidly as you do in your video demo. Can you please show how those components are set up in the context of having them work in the prototype using your plugin?

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

      I was hoping that it was actual responsive frames, but yeah, it does seem like it's just jumping between frames that you pre-design. So you still have to create all the breakpoint designs and update all the copy and visuals in each frame.

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

    Can this be applied to website design?

  • @user-kg6cb1vh9x
    @user-kg6cb1vh9x Год назад

    Description of plugin is incomplete. It's work well with frames with equal height. I don't understand how use this plugin when I have frame with different heights of frames. expample: frame width 320px. It's height 10000p, but there is frame width 992px in my project and height 8000. And how can I use plugin when frames with different height? 🤔

  • @floweare36
    @floweare36  4 года назад +2

    www.figma.com/community/plugin/824289601590456356

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

    How long til release?

  • @jayft4591
    @jayft4591 4 года назад +5

    Ok that’s nice, but can you use it in the preview mode as well?

    • @floweare36
      @floweare36  4 года назад +2

      Unfortunately no. Figma prototypes do not support any responsive layouts for now. To present the solution to the developer, we thought about the option to automatically create a clickable prototype with all points. What do you think? But this feature is also limited by Figma api options for now (we sent a request to Figma)

    • @jayft4591
      @jayft4591 4 года назад +2

      Floweare To bad, still very helpfull though. Thank you!

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

      @@jayft4591 Temporarily, you can use Anima for your purposes.

  • @yammye
    @yammye 4 месяца назад

    how do I report a bug about this plugin? I have 3 frame sizes, and when I enabled prototype at the breakpoint window, it creates the first frames I defined under that, plus several other repeated frames. Also it's pointless, because it also shows the original frames, and it shows the original, plus the ones you generated.

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

    Great! Is that possible to export CSS code?

    • @floweare36
      @floweare36  2 года назад +2

      Not yet. But this is definitely a good point to work on

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

    I there a way to use this for presenting mode and prototyping?

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

      Would be great

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

      Great news! This feature was just released ​@​

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

      @@franco81111 It's possible now ​@​

  • @Backtrap1943
    @Backtrap1943 8 месяцев назад

    What's that accent? German, Chinese, Brazilian? Can't really put my finger on it.

  • @Alaguapatos02
    @Alaguapatos02 Год назад +1

    Why is this useful? (No hate intended)
    At a glance, this only features the ability to drag a frame that changes the content within to display one layout or another.
    Why this would be helpful in any way?
    Let me explain:
    The responsive layouts are already designed and well labeled.
    The plugin only adds the flavour to do a "drag-like" interaction that mimick what we would do on a browser, with a small difference:
    For Figma you have to carefully plan your production ahead of thinking to use this plugin. That means that your content must be perfectly constrained to be able to move, no matter how complex it is.
    To me that is a hell of an investment only to be able to "drag" a thing and mimic a behavior we have on a browser naturally*.
    *Keeping in mind that devs HAS to carefully place and constrain everything so it flows with the window. (Even do users do not tend to interact with window by dragging them all the time.)

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

    These directions make absolutely no sense.