Designing a Date Picker Component for Chakra UI

Discover my design process behind designing a date picker component for Chakra UI in Figma, including defining component specifications, evaluating design principles, as well as every detail behind crafting the visual design ⚡️

This is the first video where I'm openly sharing some of my design process principles, in this case slightly more detail-oriented since we're talking about a very specific component within the context of design systems, but many of these still apply in my day-to-day as I reason through broader product design and user experience. I'm really glad that it's finally out!

I will be publishing this component as an open source design in the Figma Community later this week. Until then, connect with me on Twitter to receive an update once it's ready! I will also be updating this description with the Figma Community link, and if I haven't, please ping me in the comments section below and I'll get right to it.

I will also be publishing the full Chakra UI Kit soon with all the styles and components. At this point, we're just waiting on Figma to grant us (as Chakra) full community access to publish files. Once that's done, I'll provide a link to that resource below as well!

Was this video helpful? Do you have any questions about the design process that you'd like me to cover in future videos? Any suggestions for improvement? Please let me know in the comments section below 💬

If you are new to my channel, welcome! Don't forget to hit subscribe if you'd like to keep up with my weekly dose of product design videos and tutorials to help you build great products and bring your ideas to life.

Don't be a stranger and connect with me here 👋

Chapters:
0:00 - Welcome
0:29 - Design specs
1:59 - Inspiration & principles
4:12 - Visual exploration
7:04 - Date component
15:22 - Date range design
21:50 - Calendar design
35:30 - Prototyping
36:38 - Conclusion

[uxrkhan]

Just saw the work file on figma community, seems like month selection is missing when the year was there!

[rashmir]

Needed more info on the interactive components setup

[mdr]

Thanks a lot for a such cool video.
But I have a question: how to prototype date components in a way that will allow me to pick one day then click on another and the previous will not be active anymore? I have to turn each day in radio button?
Hope that makes sense😄

[vinhthekid_mt]

would you know how to make an event calendar?

[pjonesg]

Can you share that design spec doc, please?

[Letrasdesordenadas]

I just leave a comment on other video but you rock mate! Thanks for sharing this ⚡

[mpm]

Hi Javier, thank you for the tutorial. Do you have one where you share how to animate the calendar? (next step)?
Thank you

[EsakkiKrishnan]

Great walkthrough of your process loved it

[esequielalbornoz]

I'm not a designer and yet loved your video man, really sick.
Is there anyone working on implementing this feature?

[oussamasethoum]

Great thank you, please can you share the design file of the component ?

[irfanali-crup]

Did you work on multiple overlays ? I am facing an issue.

[florianvo]

I expected to see it get implemented in code.... Preferably with @chakra-ui/react. How is this design "for Chakra UI"? its just a Figma design, it leaves the implementation open. I am very disappointed tbh, 30 min wasted. The video title is missleading, if it said "how to create datepicker Figma design" I wouldn't have watched.

[BonClyful]

How do you add the fonts and colours to your library? I’m new to Figma 🫣

[zoharmoyal]

when i downloaded my date picker, it gave me a blanked Art Board with nothing in it. how can i solve that problem ? @javier alves