Functional Calendar (Date picker) UI Design in Figma | Interactive Components
Вставка
- Опубліковано 12 сер 2023
- 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.com/dkbklpwripx3
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/22UITemplate
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 - Навчання та стиль
What's today's date? 😉 Drop your answers below and let's see who's keeping their calendars close! 👇
Subscribe to our channel: ua-cam.com/users/dscodetech
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 :)
You're very welcome!
Thank you so much! it was awesome! much appreciated!
You're welcome!
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!
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.
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 !
You can do that using figma variables and components
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.
Good idea, I'll try!
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.
Good point!
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.
Please do as I do in the tutorial or get the free source file
I think I figured it out. I just changed the Pass Through button to 70% and it worked.@@DSCodetech
Awesome! If you need more help, just let me know! 👍
Hi, after selecting date it should change to required frame. How to do it?
you can do it using figma components
@@DSCodetech could u make simply tuto shorts for it?
Sure
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.
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!
Love the tut and the music. What song is this?
Thanks! Check the description
Nice video
Thanks
How to export this prototype?
You can export the design as a Jpg or png. Select the frame and go to the right bottom hand side then you can see export option
the link doesn't wrk anymore?
Check the description
Where ist the figma file?
Check the description
lost me at 4:08
Try speeding down the video, you can get the process
This is toooooo fast.
Try reducing the video speed and watch
Not understandable .
It's good to talk😢
Get the Figma file and try
Next time you your mouth to explain I don’t get it!!!
What part that you can't get? I can help you with that