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

Поділитися
Вставка
  • Опубліковано 2 лют 2025

КОМЕНТАРІ • 46

  • @DSCodetech
    @DSCodetech  Рік тому +3

    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

  • @camilamarchantd
    @camilamarchantd Рік тому +11

    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 :)

  • @jaysonmei1789
    @jaysonmei1789 12 днів тому +1

    Ngl I took at least an hour n a half to do everything. LOL tysm.

  • @LilyCR11
    @LilyCR11 11 місяців тому +3

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

  • @Ignacio.Ux-Ui
    @Ignacio.Ux-Ui 9 місяців тому +3

    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
      @DSCodetech  9 місяців тому +1

      You can do that using figma variables and components

  • @sakura-mori
    @sakura-mori Рік тому +3

    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.

  • @mrinalsubash8358
    @mrinalsubash8358 Рік тому +1

    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
      @DSCodetech  Рік тому +1

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

    • @mrinalsubash8358
      @mrinalsubash8358 Рік тому +1

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

    • @DSCodetech
      @DSCodetech  Рік тому +1

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

  • @JustinRocket28
    @JustinRocket28 Рік тому +1

    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
      @DSCodetech  Рік тому +1

      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.

  • @genysysthesaintii8034
    @genysysthesaintii8034 Рік тому +2

    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
      @DSCodetech  Рік тому +1

      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
    @uniqueshine95 10 місяців тому +1

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

    • @DSCodetech
      @DSCodetech  10 місяців тому +1

      you can do it using figma components

    • @uniqueshine95
      @uniqueshine95 10 місяців тому +1

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

    • @DSCodetech
      @DSCodetech  10 місяців тому +2

      Sure

  • @adamstuartclark
    @adamstuartclark Рік тому +1

    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.

  • @nickpaz9113
    @nickpaz9113 Рік тому +1

    Love the tut and the music. What song is this?

    • @DSCodetech
      @DSCodetech  Рік тому +1

      Thanks! Check the description

  • @MyloMusica
    @MyloMusica 9 місяців тому +1

    the link doesn't wrk anymore?

    • @DSCodetech
      @DSCodetech  9 місяців тому +1

      Check the description

  • @susanagomes7173
    @susanagomes7173 10 місяців тому +1

    Where ist the figma file?

    • @DSCodetech
      @DSCodetech  10 місяців тому +1

      Check the description

  • @Shegzlearn01
    @Shegzlearn01 9 місяців тому +1

    Nice video

  • @komalkk2145
    @komalkk2145 Рік тому +1

    How to export this prototype?

    • @DSCodetech
      @DSCodetech  Рік тому +1

      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

  •  2 місяці тому +1

    Where is january 31 ? 😁

    • @DSCodetech
      @DSCodetech  2 місяці тому +1

      Oh, we missed that 😉

  • @thecombatceo
    @thecombatceo 9 місяців тому +1

    lost me at 4:08

    • @DSCodetech
      @DSCodetech  9 місяців тому +1

      Try speeding down the video, you can get the process

  • @qicaoviolin
    @qicaoviolin Рік тому +5

    This is toooooo fast.

    • @DSCodetech
      @DSCodetech  Рік тому +1

      Try reducing the video speed and watch

    • @AndreaBarnes-b3z
      @AndreaBarnes-b3z 2 місяці тому

      And has no voice over explanations therefore very unreliable lol

  • @roselinennomo5601
    @roselinennomo5601 Рік тому +2

    Not understandable .
    It's good to talk😢

  • @Kosaphoreva
    @Kosaphoreva Рік тому +1

    Next time you your mouth to explain I don’t get it!!!

    • @DSCodetech
      @DSCodetech  Рік тому +2

      What part that you can't get? I can help you with that