Figma Tutorial - Interactive Component Calendar Design | MrSid

Figma is not only a platform to design, prototype, and collaborate on web and apps but it also has some great tools and features to help you craft your own vectors for your projects.

In this video, let's see how to create Calender UI using interactive component in Figma. If you want to see more Figma design videos or more complex element tutorials, let us know in the comments below.

Create amazing icons in Figma 👇🏼

Weather app design in Figma 👇🏼

Music: Royalty Free Music from Bensound 🎵

#mrsid #uidesign #figma #figmatutorial #webdevelopment #webdesign #adobeXd #figmatips #uidesigner #webdev #figmauidesign #mrsidverse #icondesign #uxui #userexperience #uidesigntutorial

---------------------------------------------------
Join us on 🤝

[BlackXSunlight]

9:29 instead of deleting the extra days, you can make the text invisible, that way there are still technically 7 components in that group, and if you change the calendar's width at any point in the future, all the components will still move correctly.

[wiktoriabartczak]

How to make to keep active state until you click in next date? Have no idea how to make it in prototype.

[mayadaabdelfattah]

Hello, Whenever i do it, so if the first number i write is 1 as a component then i keep getting 1 when i activate or hover over any other number and i don't know how to change it, so if you know what m, ight be the problem please tell me, thank you so much for your help

[KrimYT-]

Can you make a two month calendar design where when you choose the day of the next month, all of the previous days are automatically highlighted

[levonarmenian]

My question is once the date is selected, how can you close the calendar so that the date you selected appears ? Like making a dinner reservation, how can you close the calendar so the 14 appears so I can move on to the next task ( i.e., selecting a time, then number of people, etc. ) ?
Or is that a developer’s job ? Thanks !

[denanikolova]

Do I have to do every month individually? And how can I add the years too?

[pkyashaswini]

Can u share your figma link of this tutorial

[scutaripavel]

Awesome video, many thanks pal, subscribed to your channel, awesome stuff 👌 my only concern is that when I do the auto layout feature as you did at min 10:11 my dates do not align to be in the middle as days of the week. Is it because I need dates frame to be same width as days of the week frames ( my days are 32 width and days of week are 48 )

[ceciliamolnar]

I think without explanation it is really hard to follow for a beginner. Completely don't get the last part how to make it work. My figma looks different on the right side of my screen, have no idea what you were doing

[jaminizam]

Nice. Then how to create keyboard in figma?