FIGMA - CREATING A TEMPLATE

Step By Step Beginner Friendly Figma Guide

Create your own Card Sorting Study Template on Figma

Below is a beginner-friendly, step-by-step Figma guide for first-time users, customized for an open card sorting study. Follow these instructions to create a professional, research-ready template.

Building A Template On Figma

Step 1: Create Your Figma File

1. Go to figma.com

2. Click Log in (or Sign up if needed)

3. On the homepage, click New design file

4. Rename the file (top-left):

   Eg: Open Card Sort – E-commerce Navigation

Step 2: Create the Instructions Page

1. Look at the left sidebar

2. Under Pages, click the + icon

3. Rename the page:

   Instructions
   

Create the Instructions Frame

4. Press F on your keyboard (Frame tool)

5. On the right panel, under Desktop, click Desktop (1440 × 1024)

6. Click anywhere on the canvas to place the frame

7. Rename the frame (top-left):

   Participant Instructions
   

Add Instruction Text

8. Press T (Text tool)

9. Click inside the frame

10. Paste your participant instructions text

11. Resize the text box by dragging the corners

12. Adjust font size if needed (right panel), but keep it simple

Step 3: Create the Participant Boards Page

1. In the Pages panel, click +

2. Rename the page:

   Participant Boards
   

Step 4: Create the First Participant Board

1. Press F

2. Choose Desktop (1600 × 1200)

3. Click on the canvas

4. Rename the frame:

   Participant 01 – Open Card Sort

Step 5: Create Item Cards (Sticky Notes)

Create One Item Card

1. Press R (Rectangle tool)

2. Draw a small rectangle

3. On the right panel:

   • Fill color: light gray or light blue

   • Corner radius: 8

4. Press T

5. Click inside the rectangle

6. Type:

   Computers & Accessories

7. Center the text:

   • Horizontal: center

   • Vertical: center

     
     

Duplicate Item Cards

8. Select both the rectangle and text

9. Press Cmd + D (Mac) or Ctrl + D (Windows)

10. Change the text for each item

11. Repeat until all 26 items are created

Step 6: Create Category Label Cards

1. Press R

2. Draw a slightly larger rectangle

3. Fill color: light yellow

4. Corner radius: 8

5. Press T

6. Type:

   Category Name

7. Increase font size slightly

8. Duplicate 6–8 times

9. Place them at the top or side of the frame

Step 7: Create “Doesn’t Fit” Area

1. Press R

2. Draw a large rectangle

3. Set Stroke only (no fill)

4. Press T

5. Type:

   Items That Don’t Fit Anywhere

6. Place this box in a corner of the frame

Step 8: Create the Optional Navigation Task

1. Press T

2. Type:

   Navigation Task (Optional)

3. Below it, add text boxes:

   • Product Chosen:

   • Navigation Path:

     Home → ___ → ___ → ___

   • Comments (Optional):

Step 9: Lock What Participants Shouldn’t Change

1. Select background boxes, headers, and instruction text

2. Right-click → Lock

3. Leave item cards and category labels unlocked

Step 10: Duplicate the Participant Board

1. Select the entire Participant 01 frame

2. Press Cmd + D / Ctrl + D

3. Rename duplicates:

   • Participant 02 – Open Card Sort

   • Participant 03 – Open Card Sort

   • Participant 04 – Open Card Sort

   • Participant 05 – Open Card Sort

Sharing the File

• Click Share (top-right)

• Under “Anyone with the link”:

  • Select Can edit

• Click Copy link

• Send each participant:

  • The same link

  • Their assigned participant number

Pre-Session Checklist

Figma Board Setup

• All item cards are already created

• All category label cards are pre-created with placeholder text

• Category labels are duplicable, Item cards are movable but not resizable

• Background elements are locked

• A clear area labeled “Doesn’t Fit” exists

• The Optional Navigation Task section is visible and labeled

Instructions & Clarity

• Instructions are visible on the first page

• No design terminology is used (e.g., “frames,” “components,” “layers”)

• No mention of fonts, colors, or styling

• Steps are written in plain, non-technical language

Permissions & Access

• Sharing set to “Anyone with the link can edit”

• Participants do not need a Figma account

• Each participant has their own board/frame

• Participant IDs are pre-labeled

Dry Run

• You tested the board using an incognito window

• Open the link in an incognito/private window

• You confirmed that items can be dragged easily

• You confirmed that text can be edited by double-clicking

• You confirmed that nothing substantial can be accidentally deleted

Participant Communication

Email includes:

• Purpose of the activity

• Estimated time (15–20 minutes)

• Link to the Figma board

• Reassurance that no design experience is required

Other Recommended Tools

Optimal Workshop

UXtweak

Maze