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

Published: 20 April 2023
on channel: 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


Watch video How to Design a Time Picker Component in Figma | Material Design Time Picker Component Tutorial online without registration, duration hours minute second in high quality. This video was added by user Soren Iverson 20 April 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2,65 once and liked it 3 people.