Figma tutorial: Calendar / Date Range Picker 

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

Thank you, great video!!!

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

Thank you for this!

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

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.

~ 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

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.

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!

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

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

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!

wow