Figma tutorial: Calendar / Date Range Picker

แชร์
ฝัง
  • เผยแพร่เมื่อ 31 ม.ค. 2025

ความคิดเห็น • 22

  • @mash312
    @mash312  ปีที่แล้ว +1

    UPDATE for 13:10! You can now use Calendar Data Generator plugin to select month/year and fill out your calendar :) www.figma.com/community/plugin/1329228807242129260/calendar-data-generator

  • @petryyy333
    @petryyy333 3 หลายเดือนก่อน +1

    Thank you, great video!!!

    • @mash312
      @mash312  3 หลายเดือนก่อน

      thank you :)

  • @emwyzed6336
    @emwyzed6336 5 หลายเดือนก่อน

    Thanks for this super helpful video! You describe the steps very well, keep up the good work and making our lives easier :')

    • @mash312
      @mash312  5 หลายเดือนก่อน +1

      thank you so much! happy it's helpful :)

  • @TheMaroone
    @TheMaroone 8 หลายเดือนก่อน

    Hey Masha, thanks for this article. This is exactly what I was looking for. But it was hard to find as this is actually the only "date range picker" video I could find. And this is so much better than another calendar tutorial. Maybe you could put that in the title so it's easier to find.

    • @mash312
      @mash312  8 หลายเดือนก่อน

      so glad it was helpful! and thank you for the suggestion, i added it to the title :)

  • @KelvinChiuFilms
    @KelvinChiuFilms ปีที่แล้ว +1

    Thank you for this!

    • @mash312
      @mash312  ปีที่แล้ว

      Happy it’s helpful! :)

  • @RahulKumar-jn4jr
    @RahulKumar-jn4jr 2 ปีที่แล้ว

    can't wait to use this in my next project thank you

  • @mash312
    @mash312  2 ปีที่แล้ว

    ~ hop around
    00:24 Setup
    00:45 Card header and dimmer
    03:32 Week top bar
    04:54 Single day component ⭐
    11:32 Month component
    13:10 Adding real days to months with Google Sheet Sync plugin
    16:37 Vertical scroll
    18:21 Button component
    19:44 Prototype
    22:46 Clean up and wrap up

  • @alexzlatkus7057
    @alexzlatkus7057 ปีที่แล้ว

    Preserve scroll position is always a game changer :)
    The only rec I'd make would be to make the entire Filter drawer/card a component, so that you can fix the `card-header` and `week` components within that component and then not have to manually adjust the `dimmer` and `StatusBar` components.

    • @mash312
      @mash312  ปีที่แล้ว +1

      👀 should try that, thank you 😁

  • @IVAN.Y.
    @IVAN.Y. ปีที่แล้ว +1

    Hi, I tried the Google Sheet Sync plugin, but the day order went from top to bottom, then to the right, do you know how to solve it?, Many Thanks, Cheers!

    • @mash312
      @mash312  ปีที่แล้ว +1

      hey! for your calendar view, did you do rows or columns? (if columns, then that could be the reason)
      also, feel free to share your file with me if you'd like mash [at] hey [dot] com

  • @TranquilBird
    @TranquilBird ปีที่แล้ว

    06:58 is there a reason why you make a union instead of just rounding the corner of the square? Thank you for your video!

    • @mash312
      @mash312  ปีที่แล้ว +1

      you're welcome and thank you :)
      And I think rounding the corners totally works in this case and is much simpler too!
      (I'd like to say that I had a reason for making a union, but looking at it now I have no idea why I did that)

    • @TranquilBird
      @TranquilBird ปีที่แล้ว

      haha thank you for the quick response! I did your full tutorial (implented in my design) and i'm sooo thankful for it! i did search quite a bit for something like this. keep it up! :D@@mash312

  • @uniqueshine95
    @uniqueshine95 10 หลายเดือนก่อน

    Hi, Like date filter, after selecting dates the current page should go to required page. How to achieve? or atleast share any tutorial name pls

  • @HemanthKumar-vh3sy
    @HemanthKumar-vh3sy 4 หลายเดือนก่อน

    I miss the "Preserve Scroll" Feature. Auto preserve scroll doesn't work well with large number of layers and with minor differences between frames

    • @mash312
      @mash312  4 หลายเดือนก่อน

      hopefully it’ll get ironed out in the future 🙏

  • @designaddict-l2x
    @designaddict-l2x ปีที่แล้ว

    wow