How to Design a Date Picker UI in Figma | Material Design Date Picker Component Tutorial
In this video, I walk through how to design and prototype a date picker component in Figma. This is a component used in Google's material design system, which you can learn more about here: https://m2.material.io/components/dat...
Figma file: https://www.figma.com/community/file/...
Music for this video is "Resplendence" by Cordio. You can learn more about their music here: / @uclb_e9xtngw. .
New to Figma? Sign up here:
https://psxid.figma.com/xogqvqq7ah54
0:00 - Intro
0:08 - What You'll Design
0:21 - About Date Pickers
0:34 - Designing the Date Picker Header
2:16 - Designing the Month Component
2:51 - Creating the Date Component
3:55 - Making Weeks and Months from Dates
4:15 - Making the full Calendar
4:33 - Making the Selected & Date Range Component Set
7:19 - Making Date Ranges in the Calendar View
7:55 - Finalizing the Design
8:20 - Wrapping Up
⁙ social media:
Twitter : / soren_iverson
Dribbble: https://dribbble.com/soreniverson
Gumroad: https://soreniverson.gumroad.com/
Website : https://soreniverson.com/
#uxdesign #materialdesign #datepicker