How we make beautiful cards fast with Figma + Google Sheets

We’ve been trying out different ways to prototype cards for years, and I wanted to quickly share the best thing we’ve found. When we prototype and test, we need to create and print components in a way that is:

  1. Fast

  2. Cheap

  3. Presentable (if not beautiful)

  4. Easy to update

Sample cards from Contingency Plan

Sample cards from Contingency Plan

There are obvious tradeoffs between these four requirements. Scribbling on note cards is fast and cheap, but it looks terrible and updating cards is tedious and time-consuming. Printing text on printer paper and taping it to old business cards looks slightly better, but it’s still amateurish and takes too long to update. The key to a great process is that we need to be able to make small changes to existing cards, and create wholly new cards very rapidly without sacrificing presentation or spending a lot of money.

The process in the video below is the best thing we’ve found for the following reasons:

  1. Fast: Figma is extremely user-friendly and easy to use.

  2. Cheap: This whole process uses free tools. Printing on cardstock can be pricey, but you can trim down costs by not using color, and using cheaper paper.

  3. Presentable: Figma makes it easy to make beautiful cards at scale. You don’t have to be a designer to make things look good there. Walter (Product Desginer at DropBox) and I (Product Manager at Binti) use it constantly for work. It works for designing software, it works for designing card games. It’s an amazing tool.

  4. Easy to update: The workflow with Google Sheets allows me to update the entire deck and create a new print file in seconds.

Here’s how it works:

You can see the detailed process in the video above, but the key steps are:

  1. Put all of your card information into a Google Sheet. Use the first row to name the different text fields on the cards (such as Title, Body, and Power). Make sure that your sharing settings on the sheet are set to “Anyone on the internet with this link can view.”

  2. Install Google Sheets Sync on your Figma account.

  3. Design a card in Figma, and name the different text fields using a # for the name of the column you want to reference in your Google Sheet.

  4. Create a Component by right-clicking on the card and selecting “Create Component”

  5. Create a Frame, and name it “// “ followed by the name of the tab in your Google Sheet

  6. Click on “Assets” in the top left of Figma, and drag and drop copies of your card component into your Frame.

  7. Right click on the frame, click Plug-ins, and run the Google Sheets Sync. Paste the link to your Google Sheet, and run.

  8. You can either download using “Export” in the bottom right of Figma. Depending what you want to do with the cards, you could either download individual cards and upload to something like Tabletop Simulator, or put them onto a 8 1/2” x 11” PDF to send to print on cardstock.

dev processCatacombian Gamescontingency plan