How to make an Interactive Calendar in Figma in under 10mins

Подписаться 3,7 тыс.

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

50% 1

Try Figma today: psxid.figma.co...
willbrettdesig...
How to make an Interactive Calendar in Figma in under 10mins.
In this short tutorial, I will show you how to create an interactive calendar in Figma the correct way in under 10 mins.
This includes creating the interactive components, the calendar and the interactive prototype.
Use these Figma tips and tricks to create your very own UI calendar asset or apply these Design skills to many other User Interface assets.
Please like and subscribe to the channel to help it grow. Help me achieve my mission of giving back to the design community by sharing my Design top tips, Figma tutorials and skills with you for free. Let's work together and upskill the design community open source.
If you have a request for a video, whether it's a Figma tutorial, Design Thinking, Digital Product Design or even something like how to pass a design test let me know in the comments below. I have 10+ years of experience working as a Senior Product Designer for some of the biggest brands in the world.
Feel free to check out my website here: willbrettdesig...
I will do my best to respond to all comments.
#figma #figmatutorial #figmacalendar

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

10 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@WillBrettDesign 2 года назад

For a deep dive into Interactive Components check out this Figma tutorial. There are some brilliant examples with step by step guide on how to make them: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-lVmH5n0PDR8.html

@Kazoo2023 Год назад

I followed your tutorial and still the calendar I'm creating in Figma will not be Interactive

@blaghauss 2 года назад

I want to thank you for the great video. I'm currently enrolled in an UX course and just started playing around with Figma. This tutorial was very nicely done, I even took the extra step to add all the months and make it interactive and it actually worked. I hope your channel gains traction. Keep up the good work.

@WillBrettDesign 2 года назад

Great job! Love it when people expand upon an idea, means you’ve understood it and now have the skills 🙌

@OmolOlaYemi 2 года назад

Please how did you add the month and make it interactive?

@WillBrettDesign 2 года назад

Thanks so much for your kind comment. I have a favor to ask. I have been shortlisted for a design award and it's the last day of voting. I need to get as many votes as possible to win and would love it if you could help me out. creativepool.com/annual/2022/shortlist/#EmergingTalent

@aderonx 2 года назад

I cannot thank you enough for this - currently studying UX Design and new to Figma! I really needed this for my current assignment and it works perfectly! Thank you!!!

@aderonx 2 года назад

@Will Brett-Atkin Just also wanted to say that I expanded this to add the calendar months too, works like a dream! Thanks again 👌🏿

@WillBrettDesign 2 года назад

That's awesome! Great work

@WillBrettDesign 2 года назад

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

Thank you so much for this tutorial! It's super easy to follow and very detailed 👍🏾

@Upscent Год назад

Sir, thank you. I am currently studying UI and I needed a calendar and wondered how to make it. Thank you for the wonderful and easy-to-follow tutorial! best of luck to you!

@hritvikverma1916 2 года назад

Hey brother, use the plugin == Add numbers to texts

@dushicataseva4473 Год назад

A real hands-on tutorial! After watching it a couple of times, I actually feel that I am finally getting the hang of Figma. Thank you for sharing this⭐

@WillBrettDesign Год назад

Now that’s the feedback I like to hear! This was my entire intention and I’m so pleased it’s worked for you

@muckymedia8487 2 года назад

I hadn't thought about using it for calendars. Figma's amazin!

@WillBrettDesign 2 года назад

It’s certainly a great tool 🙌

@WillBrettDesign 2 года назад

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

that was in fact pretty useful :)

@meganswartwood9637 3 месяца назад

to make changing the numbers a bit faster, press tab and it should tab between the numbers so you don't have to click to change them

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

Thank you for this - so useful and easy to understand.

@thegrowtheffect 2 года назад

Thank you for making such a detailed video and saying everything you were doing (& why) as you were doing it. It was very easy to follow!🙂

@WillBrettDesign 2 года назад

Thank you and pleased you found the video helpful

@MargaretRose723 2 года назад

Thank you! this just made my prototype so much snazzier :)

@WillBrettDesign 2 года назад

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

Thank you so much for the step by step detailed explanation, it really helped me!

@k.angelova 9 месяцев назад

This was super helpful for my ui course project. Thank you!

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

Brilliant! Just what I needed and a lot simpler than I thought it would be. Thanks a lot!

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

Can anyone help me through this, I did the exact thing, But the calender prototype is just the thing and the hovering is not working. But everything is done like the same thing where you've create the hover elements separetly and calender seperately.

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

Much appreciated, thank you!

@SIKHGAL1 2 года назад

Thank you for the Tutorial, very helpful required this for my projects currently learning UX Design.

@WillBrettDesign 2 года назад

@Marta-hh7ev Год назад

Excellent tutorial, you explained easy and quick. Well done!Thank you!!

@elizabethbennet553 Год назад

Good work,thanks share it with us

@user-qr3dr5go1g Год назад

Thanks a lot! very useful

@samrose73 2 года назад

Thank you brother, very helpful and easy to follow!

@WillBrettDesign 2 года назад

Glad it helped! 🙌

@WillBrettDesign 2 года назад

@sahiljain1193 2 года назад

Always discovering new things from this channel! Amazing job!

@WillBrettDesign 2 года назад

Thanks for the kind words

@WillBrettDesign 2 года назад

@wongeubing 2 года назад

Thank you for this!

@WillBrettDesign 2 года назад

You’re welcome 🙌

@WillBrettDesign 2 года назад

@user-hd8uw4gj3o Год назад

This was so great, thanks! Can you please make a dropdown menu tutorial! Would soooo appreciate it!

@hnquran1002 Год назад

Thank you

@LeoToooth 2 года назад

You should do Crtl+D while repeating eg. I observed while you repeating dates and days

@WillBrettDesign 2 года назад

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

awesome worked for me.. thankyou

@yeaheiamahmudhridoy4590 2 года назад

thank you , you break em dowm nicely!

@WillBrettDesign 2 года назад

@sairatufail5062 2 года назад

Thank you so much! It really helped. How do we add more details like selecting months & years? and make them interactive?

@WillBrettDesign 2 года назад

Hey Saira, I would recommend watching a few of my other videos. They won’t give you this answer directly but hopefully you will learn the skills to figure this out yourself. The goal of this channel is to give others the skills to design their own ideas. However, if you are truly stuck then maybe we can do a live stream where we create your design?

@taisa_araujo Год назад

Thank you! It really helped. :)

@SantiagoPanero Год назад

works great! thanks

@gokcenurinan8492 Год назад

been very useful thanx!!

@Yan-pz1tl Год назад

wow, thank you!

@darialysak4591 Год назад

Thanks!!!

@levonarmenian Год назад

My question is once the date is selected , how can you close the calendar so that the date you selected appears ? Like when my next task is to make a dinner reservation after I choose a day , how can you close the calendar so that day appears ? Or is that a developer’s job ? Thanks !

@user-cw4ss3cy6h Год назад

Thanks!

@alexmora295 Год назад

I followed all the steps but once I reached the testing stage the functions I assigned to all the days in the calendar would not work. Where did I go wrong?

@charlieturner3891 10 месяцев назад

amazing!

@josephdaquila2479 Год назад

Its not letting me choose a change to interaction when I get to around 9:30 in this video. Any suggestions?

@kellyp509 Год назад

Thank you Will. How can I make it so that I can only activate 1 date at a time? I'd like the previous date selected to revert to default.

@evelynng8702 2 года назад

Thanks for this! Would appreciate it if you could go through the thought process too

@WillBrettDesign 2 года назад

Thanks Evelyn, please join my future live streams and you can ask me to go through this for you :D I have a favor to ask. I have been shortlisted for a design award and it's the last day of voting. I need to get as many votes as possible to win and would love it if you could help me out. creativepool.com/annual/2022/shortlist/#EmergingTalent

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

I did exacrly like you did but it does not work

@beatsbyshnzo 2 года назад

Thanks for another tutorial, I have one issue with my calendar that maybe someone can help with......the calendar works fine until I get to the double digit days. While hovering over the number (for example 10) the second digit lowers and the date looks like it says "1" I don't get how to fix it. Is there something wrong with the variant dimensions?

@WillBrettDesign 2 года назад

Hey Shnzo, Sorry for the slow reply. You can either change the text width, set the resizing to hug contents. It's a hard thing to solve without seeing how you've setup your file but it's also worth investigating the resizing settings on parent and child objects too. If you're still stuck make sure you join my next live stream and I can show you how to fix it live.

@andrewrio 2 года назад

How to make only specific date is able to click (active), and the rest only default+hover

@guzunivan1089 2 года назад

Very nice my Friend 👍

@WillBrettDesign 2 года назад

@instituteofaistudies Год назад

This is great, instant subscribe from me Will - I love your style of calm and informative. Only thing is for me - my date appeared with all the states in it, but I missed the step where that applies to the whole month / calendar?

@patomarin4753 2 года назад

Muchas gracias por el aporte!

@WillBrettDesign 2 года назад

@tolivich 2 месяца назад

can we scale the whole calendar ??

@CyphrSylph Год назад

Any tips for how to also incorporate a focused state into this?

@asheshroy5038 2 года назад

Thank you for the video. I have a question. In my desktop figma app enable interactive components not showing, What to do?

@WillBrettDesign 2 года назад

Unsure without looking but these tools are available on all plans. You may just need to enter prototype mode. Shift+E or click prototype top right of UI

@xiaoyihuang1789 Год назад

May I know how to make only one day to active state? 😭😭

@leylamusazade97 2 года назад

thank you it was my homework on my UX/UI course , so i will do it amaizing . Just i want to say a little thing. The teacher said us to change (_) colour oposity is not right thing because its problem on coding process but you changed oposity to make more lighter violet . what do you thing about this ? should we change oposity or no?

@WillBrettDesign 2 года назад

Glad I could help. Not sure why your teacher is saying you can’t change opacity? It’s very easy to change opacity in css and other languages so there shouldn’t be any issues. However, you can achieve the exact same thing by changing the colour. Top tip, is when working with developers is to work with them and not dictate to them. In a real world job you could speak to the developer about this and ask can we do it by an opacity change or does it need to be a solid colour change? What about transitioning between states? Working in tandem with a developer will often result in a better outcome. Another thing you could do is learn how to code this yourself. Then you would have first hand knowledge on how to create your design. So long answer short. I disagree with your teacher. Hope this helps

@WillBrettDesign 2 года назад

@bhargaviv9777 2 года назад

Hi Brett! Thanks for the video.. I have a doubt. how to make the selected date reflect in the date text field.

@WillBrettDesign 2 года назад

Hey Bhargavi, Apologies for the slow reply on this one. I had missed your comment. Can you clarify what you mean and I'll do my best to help you. I have a favor to ask. I have been shortlisted for a design award and it's the last day of voting. I need to get as many votes as possible to win and would love it if you could help me out. creativepool.com/annual/2022/shortlist/#EmergingTalent

@yaneznayuznat1100 2 года назад

Hello, thanks for the video. I can't seem to get the calendar itself to connect with the coloured boxes... what could I being doing wrong? I did the prototype states for each of the 3 boxes.

@WillBrettDesign 2 года назад

It’s hard to say without seeing how you’ve built it. Best thing to do would be to watch the video again carefully and make sure your following each step correctly. Once you get it right it’ll make sense and you’ll be able to do right every time 🙌

@yaneznayuznat1100 2 года назад

@@WillBrettDesign thanks for replying, perhaps it is because my free version does not have smart animate? I'll figure it out...

@petrakunner118 2 года назад

@@yaneznayuznat1100 Hi there! I have the same problem, have you figured out what went wrong?

@yaneznayuznat1100 2 года назад

@@petrakunner118 hi Petra, I haven't.

@WillBrettDesign 2 года назад

@myskinsecrets Год назад

How does the interactive prototype link to the frame with the calendar? did I miss a step?

@vivianzhou3352 Год назад

im stuck with the same problem, its not linking together

@zakeeahmad1032 Год назад

Same problem for me as well

@VijitaUdayabhanu Год назад

Hey, if you guys haven't figured it out, here's how you do it - You have to copy & paste the default component itself into your calendar as dates. And then you duplicate that copied date component and create more dates.

@briansimpson9818 2 года назад

Hey Brett, Great tutorial. Can i ask if there is absolutely anyway where we can prototype automated date and timestamp so when you actually select a field the date and time is automatically populated based on the users time zone? or will i have to get this done in my app builder?

@WillBrettDesign 2 года назад

Hi Brian, a prototype is just a representation of how it will work it’s not actually coded to work so this would not be possible. You would need to develop or work with a developer to actually create the code for the calendar but you can access the CSS (styles code) from the inspect tab in figma. Hope that helps. Thanks Will

@WillBrettDesign 2 года назад

@anthonythompson2825 2 года назад

thank you!! this was so helpful! Do you know if there's a way to unselect one date when another is selected? For example, you are selecting a delivery date, and want to switch from the 6th to the 7th--so you want the 6th to unselect when you click on the 7th. Not sure if that's possible at all currently

@WillBrettDesign 2 года назад

So you can create a prototype that shows this functionality but Figma doesn’t have a way for this to work using the interactive components out the box. Hopefully they will support this in the future but as Figma is intended for mock-ups, prototypes and design work I don’t think it’s a high priority. As a designer you would explain the functionality with handover notes, a specific prototype etc

@WillBrettDesign 2 года назад

@enableDeepak Год назад

is it possible to make this in XD?

@SamuelGarijo 2 года назад

Hi Will! Was great! Do you know perhaps how to build this in Webflow, to create a really usable calendar? It's because I'm trying to build this for an apartment rent website, and I need to know how to translate this "selected days" into a infomartion, like: "booked from 8 of May to 14"

@WillBrettDesign 2 года назад

Hi Samuel, unfortunately I can’t help you here as I don’t use webflow.

@SamuelGarijo 2 года назад

@@WillBrettDesign What platform can I use to build it?

@WillBrettDesign 2 года назад

I would have thought JavaScript would be your best bet. Not a platform but a developer language.

@SamuelGarijo 2 года назад

@@WillBrettDesign so good idea, I'm already on it, with this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-o1yMqPyYeAo.html

@WillBrettDesign 2 года назад