Build TicTacToe Game in Figma | Advanced Prototyping In-depth Tutorial

Поделиться
HTML-код
  • Опубликовано: 13 дек 2024

Комментарии • 49

  • @Ujjwallive
    @Ujjwallive Год назад +2

    Hey how did you create the interaction between selecting X and O in the first screen?

    • @DesignXstream
      @DesignXstream  Год назад

      Hey Ujjwal, I cut of this part of the video by mistake while editing 🤦🏻‍♂️
      So in the first frame when you click X you need to do two things:
      1. set currentPlayer Variable to 'X'
      2. Navigate to next game frame.
      Likewise same with O just set player to O and navigate.
      I'll be dropping a part 2 soon and cover this part as well.

    • @Ujjwallive
      @Ujjwallive Год назад

      @@DesignXstream Thanks a lot! That's how I thought it would work. Thanks for making these videos, cheers!

  • @cleberlimacls
    @cleberlimacls 8 месяцев назад +1

    If I may, Can you update this tutorial including a scoreboard on top? Like: "X = 4 O = 4 " while we are still playing. Great Content btw

    • @DesignXstream
      @DesignXstream  7 месяцев назад +1

      That'll be a good update of having a scroeboard. I will think about it.

  • @winterassociation5739
    @winterassociation5739 Год назад +2

    Wow! Thank you so much ❤

  • @maheshbiruduganti1718
    @maheshbiruduganti1718 Год назад +1

    Informative and fun-- thanks man

  • @sachinkumart
    @sachinkumart Год назад +1

    You are legend bro, Thank you for this, new sub here

    • @DesignXstream
      @DesignXstream  Год назад

      Glad you are here! Cheers bro ✌🏼 :)

  • @captteemo9133
    @captteemo9133 Год назад +1

    Thank you! :)

  • @nameislee
    @nameislee Год назад +1

    Awesomeee, can u make the tutorial pleaseee

    • @DesignXstream
      @DesignXstream  Год назад +1

      It's Live now, you can check it :)

    • @nameislee
      @nameislee Год назад +1

      Damn…. It’s awesome and mind blown 🤯 at the same time.. I’m a designer and this is just beyond all the things I know in Figma. Thanks 🙏 a lot for the hard work putting it together and explain it very well.. will try out and let u know.

  • @orjiperpetua8135
    @orjiperpetua8135 5 месяцев назад +1

    Lovely 🤩🤩

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

    how do you stop plaer from interacting if the winner is declare before filling all the cells... so if all sells are filled and winner is not declare the game is draw.. but if all cells are not filled and winner is declared how do we stop player from interacting with untouched cells??

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

      If we need to address that scenario then we need to add that condition to cells saying if winner declared then on click add nothing (neither X nor O) then it should work.

  • @vineethvinu4871
    @vineethvinu4871 Год назад

    hey can you do google pay animation . I cant hide the more and less option. The frames both top and bottom are being trimmed.

  • @bertnik6621
    @bertnik6621 Год назад

    I get Cell/ state 12 when i drag the first square i don't get the cell state options

    • @DesignXstream
      @DesignXstream  Год назад

      Could be some issue in the layer ordering.

  • @Abhishek-ps4sg
    @Abhishek-ps4sg Год назад

    I had some issues with the first frame can you please explain what we need to do in first page

    • @DesignXstream
      @DesignXstream  Год назад

      I cut of this part of the video by mistake while editing 🤦🏻‍♂️
      So in the first frame when you click X you need to do two things 1. set currentPlayer Variable to 'X' and 2. Navigate to next game frame. Same with O just set player to O and navigate.

    • @Abhishek-ps4sg
      @Abhishek-ps4sg Год назад

      @@DesignXstream 😂😂 im kinda confused
      If currentPlayer == ?? Can you write full expressions . We only created variable for c1 -9 and current player, winner not “O”

    • @DesignXstream
      @DesignXstream  Год назад +1

      @@Abhishek-ps4sg in the first frame: On click of "X" button do a 'Set Variable' for currentPlayer to "X" (so basically you are assigning "X" to currentPlayer

  • @hemapriyau1924
    @hemapriyau1924 Год назад

    I have doubt so in first prototype we setting the conditional logic as if
    C1 == “c1”
    Then change the value of C1 to current player
    In the first screen you have created two frames that is x and o. What interaction should I give to the first frame that when I click x or o then the current player takes that value in and moves to second screen ?

    • @hemapriyau1924
      @hemapriyau1924 Год назад

      Also in the reels there is interaction where when x or o wins there is a signifier line. How to do that

    • @DesignXstream
      @DesignXstream  Год назад

      Oops looks like I cut of this part of the video by mistake while editing 🤦🏻‍♂️
      So in the first frame when you click X you need to do two things 1. set currentPlayer Variable to 'X' and 2. Navigate to next game frame. Same with O just set player to O and navigate.

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

    How did you make the variable?

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

      You can create 'Local Variables' on the panel at the right side.

  • @maheshbiruduganti1718
    @maheshbiruduganti1718 Год назад +1

    Waiting

    • @DesignXstream
      @DesignXstream  Год назад

      thank you for waiting Mahesh.. 🙌🏼😁

  • @hemapriyau1924
    @hemapriyau1924 Год назад

    Can you please make a video on how to add that line

  • @vartikaverma6188
    @vartikaverma6188 Год назад +1

    can we do this in Figma without a premium?

    • @DesignXstream
      @DesignXstream  Год назад

      Hey Vartika, This includes Advanced prototyping so you will need a pro plan to do this.

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

    What if you want to create the frames yourself? You just started with the variables you didn't explain how you created each boxes and the X and O

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

      This is an advanced concept so its difficult to explain each and every concept. You can look at the UI kit series on this channel to understand how to use frames and other tools to create the basic layouts. Then it will be easier to understand these advanced concepts.

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

      Can you please link the video here?

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

      @@taiwotalodabioluwa8270 ruclips.net/video/MCbpcfEmjxM/видео.html

  • @lissyjoy3424
    @lissyjoy3424 Год назад +3

    ✌👌

  • @harrycillian
    @harrycillian 6 дней назад

    I was already halfway doing the tutorial, thinking this was free : (

    • @DesignXstream
      @DesignXstream  3 дня назад

      Ah! I thought i mentioned that in the video. My bad!

  • @ghennmichaelclarito6134
    @ghennmichaelclarito6134 Год назад

    cant understand how you replace the cells. if you dont want to teach something dont teach

    • @DesignXstream
      @DesignXstream  Год назад

      I did not want to teach 'how to replace the cells' so I did not teach 🤷🏻‍♂️
      sorry, jokes apart! 😂
      Shift + Control + R is the shortcut to replace an object with something that is on your clipboard.