How to make an Interactive Calendar in Figma in under 10mins
Вставка
- Опубліковано 16 лис 2021
- Try Figma today: psxid.figma.com/4z5lcs9ss512
willbrettdesign.co.uk
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: willbrettdesign.co.uk
I will do my best to respond to all comments.
#figma #figmatutorial #figmacalendar - Навчання та стиль
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: ua-cam.com/video/lVmH5n0PDR8/v-deo.html
I followed your tutorial and still the calendar I'm creating in Figma will not be Interactive
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!
Brilliant! Just what I needed and a lot simpler than I thought it would be. Thanks a lot!
Excellent tutorial, you explained easy and quick. Well done!Thank you!!
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⭐
Now that’s the feedback I like to hear! This was my entire intention and I’m so pleased it’s worked for you
Thank you so much for the step by step detailed explanation, it really helped me!
Thank you so much for this tutorial! It's super easy to follow and very detailed 👍🏾
Thank you for this - so useful and easy to understand.
This was super helpful for my ui course project. Thank you!
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.
Great job! Love it when people expand upon an idea, means you’ve understood it and now have the skills 🙌
Please how did you add the month and make it interactive?
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
Much appreciated, thank you!
Thank you! this just made my prototype so much snazzier :)
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
Good work,thanks share it with us
Thank you! It really helped. :)
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
Thanks a lot! very useful
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!!!
Glad I could help! Best of luck with your studies
@@willbrett-atkin4312 Just also wanted to say that I expanded this to add the calendar months too, works like a dream! Thanks again 👌🏿
That's awesome! Great work
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
been very useful thanx!!
Thank you for the Tutorial, very helpful required this for my projects currently learning UX Design.
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
thank you , you break em dowm nicely!
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
works great! thanks
awesome worked for me.. thankyou
wow, thank you!
that was in fact pretty useful :)
Always discovering new things from this channel! Amazing job!
Thanks for the kind words
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
amazing!
Thanks!!!
This was so great, thanks! Can you please make a dropdown menu tutorial! Would soooo appreciate it!
Thank you
I hadn't thought about using it for calendars. Figma's amazin!
It’s certainly a great tool 🙌
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
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!🙂
Thank you and pleased you found the video helpful
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?
Thank you brother, very helpful and easy to follow!
Glad it helped! 🙌
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
Hey brother, use the plugin == Add numbers to texts
Muchas gracias por el aporte!
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
Any tips for how to also incorporate a focused state into this?
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.
Thank you for this!
You’re welcome 🙌
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
Very nice my Friend 👍
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
How to make only specific date is able to click (active), and the rest only default+hover
Thank you so much! It really helped.
How do we add more details like selecting months & years? and make them interactive?
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?
Its not letting me choose a change to interaction when I get to around 9:30 in this video.
Any suggestions?
can we scale the whole calendar ??
Thanks for this! Would appreciate it if you could go through the thought process too
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
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.
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?
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 !
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?
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
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
is it possible to make this in XD?
Hi Brett! Thanks for the video.. I have a doubt. how to make the selected date reflect in the date text field.
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
You should do Crtl+D while repeating eg. I observed while you repeating dates and days
I prefer to just use the Alt key.
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
Thank you for the video. I have a question. In my desktop figma app enable interactive components not showing, What to do?
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
May I know how to make only one day to active state? 😭😭
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
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
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
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?
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.
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?
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
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
I did exacrly like you did but it does not work
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"
Hi Samuel, unfortunately I can’t help you here as I don’t use webflow.
@@WillBrettDesign What platform can I use to build it?
I would have thought JavaScript would be your best bet. Not a platform but a developer language.
@@WillBrettDesign so good idea, I'm already on it, with this video: ua-cam.com/video/o1yMqPyYeAo/v-deo.html
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
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.
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 🙌
@@WillBrettDesign thanks for replying, perhaps it is because my free version does not have smart animate? I'll figure it out...
@@yaneznayuznat1100 Hi there! I have the same problem, have you figured
out what went wrong?
@@petrakunner118 hi Petra, I haven't.
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
How does the interactive prototype link to the frame with the calendar? did I miss a step?
im stuck with the same problem, its not linking together
Same problem for me as well
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.
I still don’t under 😂
Already knew of figma, but have you heard of ligma?
The Fortnite disease?
You are going way too fast for someone trying to learn something from this video. frustrating!
Thanks!