Figma tutorial: Calendar / Date Range Picker
Вставка
- Опубліковано 8 лют 2023
- 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 💌
Demo file: www.figma.com/community/file/...
✨ New to Figma? Get started here: letsbuild.click/figma
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
iOS kit for Figma: www.figma.com/community/file/...
iPhone 14 mockups: www.figma.com/community/file/...
Google Sheets Sync plugin: www.figma.com/community/plugi...
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
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.
so glad it was helpful! and thank you for the suggestion, i added it to the title :)
can't wait to use this in my next project thank you
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.
👀 should try that, thank you 😁
Thank you for this!
Happy it’s helpful! :)
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
wow
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!
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
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!
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)
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
~ 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