Functional Calendar (Date picker) UI Design in Figma | Interactive Components

Подписаться 9 тыс.

Просмотров 40 тыс.

50% 1

Learn how to design an interactive calendar and date picker in figma with interactive components. from scratch to a functional calendar with prototyping.
Use figma to design this amazing calendar (+ free files 🎁)
👉 psxid.figma.co...
Get inspired and level up your UI/UX design skills today!
🎨 More design tutorials:
• Search Bar Design in figma: • Interactive Search Bar...
• Cake App Design in Figma: • Cake Ordering Mobile A...
• Fashion website design in figma: • Fashion Website Design...
• Food Order Mobile App Design in Figma: • Food Ordering Mobile A...
FREE resource file here
👉 bit.ly/22UITem...
Hit the like button if you find this tutorial helpful and subscribe for more UI/UX design tutorials, tips, and creative inspiration.
SUBSCRIBE to our channel: / dscodetech
🔔 Stay Connected:
Facebook - bit.ly/36KsK8X
Instagram - bit.ly/3xGDbXR
Have questions or suggestions? Drop them in the comments below!
--------------------------------------------------------------------------------
#calendardesign #FigmaTutorial #uidesign #figmadesign #datepicker #prototyping

Опубликовано:

10 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 41

@DSCodetech Год назад

What's today's date? 😉 Drop your answers below and let's see who's keeping their calendars close! 👇 Subscribe to our channel: ru-vid.com

@camilamarchantd 9 месяцев назад

OMG! This was exactly that I was looking for, your tutorial helped me a lot! I'm a beginner on Figma and I could understand every step. Thanks you so much :)

@DSCodetech 9 месяцев назад

You're very welcome!

@LilyCR11 6 месяцев назад

Thank you so much! it was awesome! much appreciated!

@DSCodetech 6 месяцев назад

You're welcome!

@sakura-mori 8 месяцев назад

please, learn to use styles and autolayout. It'll save you from having to use the color picker tool and copying and pasting the days/dates repeatedly. You can also make responsive buttons with autolayout.

@DSCodetech 8 месяцев назад

Good idea, I'll try!

@Ignacio.Ux-Ui 4 месяца назад

This tutorial helps me a lot! But i notice if a want to select for example one date en january and another in february, the day i select in january continue holding in february... how i can fix that ? TY !

@DSCodetech 4 месяца назад

You can do that using figma variables and components

@adamstuartclark 9 месяцев назад

It's a nice looking calendar to be sure. Be aware that the using the header controls to change the display on a month-by-month basis limits the usefulness of the calendar. Trying to pick a long-ago date, such as a date of birth (example; 01 Jan 1980), would be frustrating at best. An alternative to the header UI would be needed.

@DSCodetech 9 месяцев назад

Good point!

@mrinalsubash8358 8 месяцев назад

How do you create the component button for the colour change for any date number? I have used only 1 as the number and hence, the color switches to purple with 1 on any date I click.

@DSCodetech 8 месяцев назад

Please do as I do in the tutorial or get the free source file

@mrinalsubash8358 8 месяцев назад

I think I figured it out. I just changed the Pass Through button to 70% and it worked.@@DSCodetech

@DSCodetech 7 месяцев назад

Awesome! If you need more help, just let me know! 👍

@genysysthesaintii8034 11 месяцев назад

Could you explain a bit in depth or better what you are doing around the 4:07 mark. I don't understand what you are doing and why.

@DSCodetech 11 месяцев назад

At this point, I duplicated the elements in the components by holding the Alt key instead of designing them from scratch and hided the components. the reason I did it was to make them unfunctional (unclickable), if I use the same components it'll function the same as the other numbers. hope this will be helpful!

@uniqueshine95 5 месяцев назад

Hi, after selecting date it should change to required frame. How to do it?

@DSCodetech 5 месяцев назад

you can do it using figma components

@uniqueshine95 5 месяцев назад

@@DSCodetech could u make simply tuto shorts for it?

@DSCodetech 5 месяцев назад

Sure

@satoshiedits21 Год назад

Great tutorial! I am a bit confused around 4:08. I noticed you are dragging the text and rectangle out of the numbers instants without detaching the instance based on my observation. I can't seem to drag the text and shape out without detaching the instances. Could you please explain? Thank you!

@DSCodetech Год назад

Sure! you can't detach the text and shape because it's a component, in this case, I've just duplicated the text and shape by holding the 'Alt' key and dragged them out of the component (copy and paste) it's easier to do than creating text and shape from scratch.