How to Design a Date Picker UI in Figma | Material Design Date Picker Component Tutorial

New to Figma? Sign up here:

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:

#uxdesign #materialdesign #datepicker

[SarahCooper-UVUX]

Hi! Super helpful video :) Thank you! Would you be able to make a version of this where you prototype the calendar? In present mode, I want to show how a user can select one date or select a date period by selected start and end date with the selected between dates in a lighter color