Fantastic video Detour. Taught me a lot, especially with the Google Sheets integration -- I would never have thought to check for that plugin! Only suggestion I might make would be to fast-forward through the bits where we don't hear your voice. Very much looking forward to another tutorial from you mate!
Wow! To echo what others have said, this sounds like exactly what I've long searched for. Two quick questions you might know the answers to. 1. Can you input text upside-down or at least rotate the text box after it pulls from Sheets? My prototype would require that. 2. Can you drag and drop images locally (vs importing via the online links) I'd be much more comfortable with this method, albeit slower.
1. yes, all layers in Figma have an angle, set this to 180 to flip text upside down. 2. yes, you can import image manually, templating is not required to use images.
@@scrapbots A solo card game! A nice mix of exploration and combat. Trying to make as many multi-use cards as possible. It's been on my mind for a few years and I finally decided it needs to get out onto the table.
Hi ! This is an incredibly helpful video. I've tried nandeck once and I couldn't make it work. This method ? A quick and easy tool for prototypes. Thanks a lot for this !!
@@scrapbots I'm working on a TTRPG with card game and deck building mechanics :D And yes, I've came accross something strange. The order in which the cards appear wihin the card grid seems "randomised". Is that normal? Also, is there a way to make the grid expand itself automatically depending on the number of lines in the Gsheet? Again, your tutorial really helped me gain time for my playtests!
@@gatesoftruth6161 there is a fix for this issue though it involves a few steps. First, to explain what's happening here; Google Sheets Sync plugin is populating relevant components in the order they appear. You could carefully rearrange them but that's a ton of work. Instead we can use a plugin called Sort Layers. This plugin rearranges and orders your components. You can also use a feature of Google Sheets Sync to help with this issue. If you name a component .1, .2, etc it will populate "component .1" with the values from row 1 and so on. Figma makes it very easy to bulk rename layers, just highlight them all, right-click and rename, the pattern you want will look something like "component .$n". Now when you sync again, things should be in the order you expect.
yes if you need to make edits to a single card, just click into the generated card, it won't update any others. Just know that if you're using the Google Sheets automation those changes will be wiped out if you run an update. You might also consider creating a variant, for example, if you have another card type that is similar to your base card template but needs to add/remove certain elements. Then you just need to set those cards to the variant and they'll update as expected.
Thank you very much! Now, thanks to you, I can quickly and easily make prototypes for my desktops :D Please tell me, is there an opportunity in Figma to export these maps as a single pdf document?
yes. highlight all of the images, right-click, select Group, select the newly created group, right panel -> Export, click plus (+), select PDF. However, I assume you're trying to do a print-and-play. The way I usually do that is to export the individual cards and then use this free tool called TCG Proxy Generator: andymakes.itch.io/tcg-proxy-generator
Hello, great video! Is there a way to specify colors that differ by card? For instance, if the border of the card would change colors, could I put an RGB hex value in a Sheets field and link that to a component somehow? Or would I have to create a .png of the borders and overlay those images? Thanks a ton and well done
you guessed it, if the value in your spreadsheet starts with a # followed by a color hex value, the plugin will set the fill to that color. See the docs on that and more special values here: docs.sheetssync.app/special-data-types#fill-colour
specifically when i export the dimensions are 825x1125 and when it exports they are 833x 1133. I tried exporting as jpg and then white bars appeared on 3 sides. 1 of my cards did not do this no matter what, every time i export 1 is fine, 52 are wrong lol i cannot figure this out.
@@MURD3R3D usually when this happens to me its because one of my layers extends beyond my background. I'd suggest highlighting each of your layers and making sure the bounding box falls completely within your background.
@@MURD3R3D That might happen if you have some kind of shadow, any other effect layer or thing going out of the frame and it's not selected the "clip content" option. Figma will try to export everything on the frame, and if there are any of these things i mentioned then it will calculate the bounding box sorrounding all of it. Now, JPGs do not work with transparent layers and by default the area will be filled with white (That's why a soft shadow might have been the thing causing you problems because it goes off the sides) I advice to change the export options to SVGs, which also have better compression and will not lose that much quality, it's a win win
hmm, do you have the "Update current selection" option selected? try changing that to "Update current page" (or make sure your cards grouped and select the group)
Okay.. but your video doesn't say anything about the fact that your measurements are for 300dpi and figma exports to 72dpi and when exporting to pdf, you cannot change this.
Yes sorry for any confusion, its fairly common when working with graphics to start at double your intended resolution because you can always scale down but cannot scale up (without artifacts). I typically output the card images individually then scale them down as needed to create a printable grid rather than try to create a grid and output from Figma. I use a free tool called TCG Proxy Generator: andymakes.itch.io/tcg-proxy-generator
@@scrapbots oh nice, I will have to give this a look. I did find that printing at 85% got me pretty close to the correct size. The text is now a little small, but at least I have a path forward.
This is legit EXACTLY what I was looking for, thank you so much for the perfect explaination!
Fantastic video Detour. Taught me a lot, especially with the Google Sheets integration -- I would never have thought to check for that plugin! Only suggestion I might make would be to fast-forward through the bits where we don't hear your voice.
Very much looking forward to another tutorial from you mate!
This looks great, I look forward to trying it as I attempt to revise Star Trek Ascendancy with TONS of new cards!
Wow! To echo what others have said, this sounds like exactly what I've long searched for. Two quick questions you might know the answers to. 1. Can you input text upside-down or at least rotate the text box after it pulls from Sheets? My prototype would require that. 2. Can you drag and drop images locally (vs importing via the online links) I'd be much more comfortable with this method, albeit slower.
1. yes, all layers in Figma have an angle, set this to 180 to flip text upside down.
2. yes, you can import image manually, templating is not required to use images.
@@scrapbotsTY so much! And CG on hitting your Kickstarter goal!
@@Xammblu_Games thanks! reminds me I need to go post an update :D. What are you working on?
@@scrapbots A solo card game! A nice mix of exploration and combat. Trying to make as many multi-use cards as possible. It's been on my mind for a few years and I finally decided it needs to get out onto the table.
@@Xammblu_Games very cool, lmk if you need a playtester, you can hit me up on Discord.
Amazing. Thank you!
Wow nice tutorial!
Great tutorial - super helpful!
Hi ! This is an incredibly helpful video. I've tried nandeck once and I couldn't make it work. This method ? A quick and easy tool for prototypes. Thanks a lot for this !!
Awesome glad you found it useful! What are you working on? If you run into any problems or have any questions feel free to hit me up
@@scrapbots I'm working on a TTRPG with card game and deck building mechanics :D
And yes, I've came accross something strange. The order in which the cards appear wihin the card grid seems "randomised". Is that normal?
Also, is there a way to make the grid expand itself automatically depending on the number of lines in the Gsheet?
Again, your tutorial really helped me gain time for my playtests!
@@gatesoftruth6161 there is a fix for this issue though it involves a few steps. First, to explain what's happening here; Google Sheets Sync plugin is populating relevant components in the order they appear. You could carefully rearrange them but that's a ton of work. Instead we can use a plugin called Sort Layers. This plugin rearranges and orders your components. You can also use a feature of Google Sheets Sync to help with this issue. If you name a component .1, .2, etc it will populate "component .1" with the values from row 1 and so on. Figma makes it very easy to bulk rename layers, just highlight them all, right-click and rename, the pattern you want will look something like "component .$n". Now when you sync again, things should be in the order you expect.
@@scrapbots Thank you, I finally made it work!
is there a way to only focus on one "card template" with out having to edit all the other iterations
yes if you need to make edits to a single card, just click into the generated card, it won't update any others. Just know that if you're using the Google Sheets automation those changes will be wiped out if you run an update. You might also consider creating a variant, for example, if you have another card type that is similar to your base card template but needs to add/remove certain elements. Then you just need to set those cards to the variant and they'll update as expected.
Thank you very much! Now, thanks to you, I can quickly and easily make prototypes for my desktops :D Please tell me, is there an opportunity in Figma to export these maps as a single pdf document?
yes. highlight all of the images, right-click, select Group, select the newly created group, right panel -> Export, click plus (+), select PDF.
However, I assume you're trying to do a print-and-play. The way I usually do that is to export the individual cards and then use this free tool called TCG Proxy Generator: andymakes.itch.io/tcg-proxy-generator
@@scrapbots ty mate
Hello, great video! Is there a way to specify colors that differ by card? For instance, if the border of the card would change colors, could I put an RGB hex value in a Sheets field and link that to a component somehow? Or would I have to create a .png of the borders and overlay those images? Thanks a ton and well done
you guessed it, if the value in your spreadsheet starts with a # followed by a color hex value, the plugin will set the fill to that color. See the docs on that and more special values here: docs.sheetssync.app/special-data-types#fill-colour
@@scrapbots Perfect! I didn't realize the plugin had all this documentation alongside it. This is a huge help, appreciate the quick response
im having trouble exporting, its adding pixels
specifically when i export the dimensions are 825x1125 and when it exports they are 833x 1133. I tried exporting as jpg and then white bars appeared on 3 sides. 1 of my cards did not do this no matter what, every time i export 1 is fine, 52 are wrong lol i cannot figure this out.
@@MURD3R3D usually when this happens to me its because one of my layers extends beyond my background. I'd suggest highlighting each of your layers and making sure the bounding box falls completely within your background.
@@MURD3R3D That might happen if you have some kind of shadow, any other effect layer or thing going out of the frame and it's not selected the "clip content" option. Figma will try to export everything on the frame, and if there are any of these things i mentioned then it will calculate the bounding box
sorrounding all of it.
Now, JPGs do not work with transparent layers and by default the area will be filled with white (That's why a soft shadow might have been the thing causing you problems because it goes off the sides) I advice to change the export options to SVGs, which also have better compression and will not lose that much quality, it's a win win
Thank you guys for the replies, I'm gonna have to spool that project back up and figure out what I was doing wrong with it someday lol
Couldn't get the plug in to work for a chuck of time messed around and then it populated the 6th... But only the 6th card lol
hmm, do you have the "Update current selection" option selected? try changing that to "Update current page" (or make sure your cards grouped and select the group)
Okay.. but your video doesn't say anything about the fact that your measurements are for 300dpi and figma exports to 72dpi and when exporting to pdf, you cannot change this.
Yes sorry for any confusion, its fairly common when working with graphics to start at double your intended resolution because you can always scale down but cannot scale up (without artifacts). I typically output the card images individually then scale them down as needed to create a printable grid rather than try to create a grid and output from Figma. I use a free tool called TCG Proxy Generator: andymakes.itch.io/tcg-proxy-generator
@@scrapbots oh nice, I will have to give this a look. I did find that printing at 85% got me pretty close to the correct size. The text is now a little small, but at least I have a path forward.