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: m2.material.io/components/date-picker

Figma file: www.figma.com/community/file/1203703753054458490

Music for this video is "Resplendence" by Cordio. You can learn more about their music here: youtube.com/@UClb_E9xtNgW...

New to Figma? Sign up here:
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 : twitter.com/soren_iverson
Dribbble: dribbble.com/soreniverson
Gumroad: soreniverson.gumroad.com/
Website : soreniverson.com/

#uxdesign #materialdesign #datepicker