Figma tutorial: Calendar / Date Range Picker

In this tutorial we'll create a scrollable calendar in Figma! We'll use variants, boolean component properties, and auto layout. This design is from a real app, Yandex Mail 💌

CHAPTERS
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

#figma #figmatutorial #autolayout

[emwyzed]

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

[RahulKumar-jnjr]

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

[TheMaroone]

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.

[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!

[alexzlatkus]

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.

[IVAN.Y.]

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!

[uniqueshine]

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-vhsy]

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

[mash]

~ 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