How to Design a Time Picker Component in Figma | Material Design Time Picker Component Tutorial

Опубликовано: 04 Октябрь 2024
на канале: Soren Iverson
2,650
36

In this video, I walk through how to design a time picker 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/tim...

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

Music for this video is 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 are Time Pickers?
0:55 - Creating the Time Picker
1:15 - Creating the Bottom Button Section
2:33 - Creating the Top Section
3:32 - Creating the Time Section
6:00 - Creating the Picker
8:54 - Creating the Time Input
9:39 - Creating the Landscape Time Picker
11:10 - Creating the Components
11:40 - Wrapping Up

⁙ social media:
Twitter :   / soren_iverson  
Dribbble: https://dribbble.com/soreniverson
Gumroad: https://soreniverson.gumroad.com/
Website : https://soreniverson.com/

#uxdesign #materialdesign #ui #timepicker