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

Ойындар

Link to Part 2: kzread.info/dash/bejne/f3adtrShicXVlqw.html
Welcome to this exciting video where I'll be demonstrating the fantastic possibilities of using the latest Figma variables and advanced prototyping features to create some truly amazing games. Now, it's important to note that this is simply a fun experiment, but the real power of variables lies in their ability to enhance user experiences and facilitate user testing with advanced prototypes that feel incredibly realistic.
If you find this topic intriguing and would love to see more, I encourage you to let me know in the comments below. Your feedback is valuable to me, and if there's enough interest, I'll gladly plan a part 2 to delve deeper into this fascinating subject.
#Figma #AdvancedPrototyping #FigmaTutorialSeries
📄 Practice File here: bit.ly/TicTacToePracticeFile
⏱️Timestamps:
0:00 - Intro
0:55 - Getting Started
1:11 - Understanding the Game Logic
3:28 - Creating the Variables
7:08 - Adding the Interaction Logic/Expression
12:56 - Copy/Paste Interactions
15:37 - Final Output
🔴 Don't forget to Subscribe. Trust me it's absolutely FREE - bit.ly/SubToDesignXstream 😅
You have got some ideas or topics in mind? Please do comment below we will make sure to check it out and do it if possible 🥳
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🌍 Social Media:
↪︎ LinkedIn - www.linkedin.com/company/DesignXstream
↪︎ Instagram - DesignXstream
↪︎ Facebook - DesignXstream
↪︎ Twitter - DesignXstream
↪︎ Website - DesignXstream.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🏷 Tags: build tictactoe game in figma, game development in figma, figma game prototyping, advanced game logic in figma, figma for game creators, creating games on figma, figma game making, creating a game in figma, building a game on figma, creating game logic in figma, easy game prototyping in figma, figma advanced prototyping games, figma gaming, games figma, figma game creation, easy figma game prototype, fully working game on figma.

Пікірлер: 47

  • @winterassociation5739
    @winterassociation573911 ай бұрын

    Wow! Thank you so much ❤

  • @DesignXstream

    @DesignXstream

    11 ай бұрын

    You're welcome 😊

  • @maheshbiruduganti1718
    @maheshbiruduganti1718 Жыл бұрын

    Informative and fun-- thanks man

  • @DesignXstream

    @DesignXstream

    Жыл бұрын

    Glad you enjoyed it! 🤩

  • @Ujjwallive
    @Ujjwallive11 ай бұрын

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

  • @DesignXstream

    @DesignXstream

    11 ай бұрын

    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

    11 ай бұрын

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

  • @sachinkumart
    @sachinkumart Жыл бұрын

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

  • @DesignXstream

    @DesignXstream

    Жыл бұрын

    Glad you are here! Cheers bro ✌🏼 :)

  • @captteemo9133
    @captteemo9133 Жыл бұрын

    Thank you! :)

  • @DesignXstream

    @DesignXstream

    Жыл бұрын

    Cheers ✌🏼 :)

  • @vineethvinu4871
    @vineethvinu487111 ай бұрын

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

  • @DesignXstream

    @DesignXstream

    11 ай бұрын

    Google pay success animation?

  • @sanglohakare
    @sanglohakare9 күн бұрын

    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

    7 күн бұрын

    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.

  • @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.

  • @bertnik6621
    @bertnik66219 ай бұрын

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

  • @DesignXstream

    @DesignXstream

    9 ай бұрын

    Could be some issue in the layer ordering.

  • @cleberlimacls
    @cleberlimacls2 ай бұрын

    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

    2 ай бұрын

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

  • @taiwotalodabioluwa8270
    @taiwotalodabioluwa82706 ай бұрын

    How did you make the variable?

  • @DesignXstream

    @DesignXstream

    6 ай бұрын

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

  • @Abhishek-ps4sg
    @Abhishek-ps4sg11 ай бұрын

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

  • @DesignXstream

    @DesignXstream

    11 ай бұрын

    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

    11 ай бұрын

    @@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

    11 ай бұрын

    @@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 Жыл бұрын

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

  • @DesignXstream

    @DesignXstream

    Жыл бұрын

    Hey Hema, Sure will make a part 2 soon!

  • @nameislee
    @nameislee Жыл бұрын

    Awesomeee, can u make the tutorial pleaseee

  • @DesignXstream

    @DesignXstream

    Жыл бұрын

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

  • @nameislee

    @nameislee

    Жыл бұрын

    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.

  • @maheshbiruduganti1718
    @maheshbiruduganti1718 Жыл бұрын

    Waiting

  • @DesignXstream

    @DesignXstream

    Жыл бұрын

    thank you for waiting Mahesh.. 🙌🏼😁

  • @lissyjoy3424
    @lissyjoy3424 Жыл бұрын

    ✌👌

  • @DesignXstream

    @DesignXstream

    Жыл бұрын

    😁😁😁

  • @vartikaverma6188
    @vartikaverma61889 ай бұрын

    can we do this in Figma without a premium?

  • @DesignXstream

    @DesignXstream

    9 ай бұрын

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

  • @taiwotalodabioluwa8270
    @taiwotalodabioluwa82706 ай бұрын

    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

    6 ай бұрын

    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

    6 ай бұрын

    Can you please link the video here?

  • @DesignXstream

    @DesignXstream

    6 ай бұрын

    @@taiwotalodabioluwa8270 kzread.info/dash/bejne/f3eW0sWfddDQqLA.html

  • @RambutLebat
    @RambutLebatАй бұрын

    it is free, bro??

  • @DesignXstream

    @DesignXstream

    Ай бұрын

    No its possible only on the figma pro version.

  • @ghennmichaelclarito6134
    @ghennmichaelclarito61347 ай бұрын

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

  • @DesignXstream

    @DesignXstream

    7 ай бұрын

    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.