FigJam for brainstorming in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a new sticky note in FigJam.

Figma

figma.currentPage.appendChild(figma.create[1]())

Drag options to blanks, or click blank then click option'

AStickyNote

BRectangle

CText

DFrame

Attempts:

3 left

💡 Hint

Common Mistakes

Using createRectangle instead of createStickyNote

Trying to create Text instead of StickyNote

Use StickyNote to add a sticky note in FigJam.

2fill in blank

medium

Complete the code to set the text content of a sticky note.

Figma

const note = figma.createStickyNote(); note.[1] = 'Brainstorm ideas here';

Drag options to blanks, or click blank then click option'

Acontent

Bcharacters

Ctext

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'text' or 'content' which are not valid properties

Trying to set 'value' instead of 'characters'

The characters property sets the text inside a sticky note.

3fill in blank

hard

Fix the error in the code to add a sticky note to the current page.

Figma

const sticky = figma.createStickyNote(); figma.currentPage.[1](sticky);

Drag options to blanks, or click blank then click option'

AappendChild

BinsertChild

CaddChild

DaddNode

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent methods like addChild

Trying to call insertChild which is not valid

The correct method to add a node to the page is appendChild.

4fill in blank

hard

Fill both blanks to create a sticky note and set its color.

Figma

const note = figma.[1](); note.[2] = {type: 'SOLID', color: {r: 1, g: 0.92, b: 0.23}};

Drag options to blanks, or click blank then click option'

AcreateStickyNote

BcreateRectangle

CbackgroundColor

DfillStyleId

Attempts:

3 left

💡 Hint

Common Mistakes

Using createRectangle instead of createStickyNote

Trying to set fillStyleId instead of backgroundColor

Create a sticky note with createStickyNote() and set its color using the backgroundColor property.

5fill in blank

hard

Fill all three blanks to create a sticky note, set its text, and add it to the page.

Figma

const note = figma.[1](); note.[2] = 'Ideas'; figma.currentPage.[3](note);

Drag options to blanks, or click blank then click option'

AcreateStickyNote

Bcharacters

CappendChild

DcreateText

Attempts:

3 left

💡 Hint

Common Mistakes

Using createText instead of createStickyNote

Setting text with wrong property

Using addChild instead of appendChild

Create a sticky note with createStickyNote(), set its text with characters, and add it to the page with appendChild.

Practice

1. What is the main purpose of FigJam in a team setting?

easy

A. To create detailed financial reports

B. To write complex code collaboratively

C. To help teams brainstorm and organize ideas visually

D. To manage project timelines automatically

Solution

1. Step 1: Understand FigJam's core function

   FigJam is designed as a visual tool for brainstorming and collaboration.

2. Step 2: Match the purpose with options

   Only To help teams brainstorm and organize ideas visually describes brainstorming and organizing ideas visually, which fits FigJam's purpose.

3. Final Answer:

   To help teams brainstorm and organize ideas visually -> Option C

4. Quick Check:

   FigJam = Brainstorming tool [OK]

Hint: FigJam is for visual idea sharing, not coding or reports [OK]

Common Mistakes:

• Confusing FigJam with coding tools
• Thinking FigJam manages timelines
• Assuming FigJam creates financial reports

2. Which of the following is the correct way to add a sticky note in FigJam?

easy

A. Click the sticky note icon and then click on the canvas

B. Type addSticky() in the console

C. Drag a shape from the toolbar and rename it

D. Right-click and select 'Insert Table'

Solution

1. Step 1: Identify how to add sticky notes in FigJam

   FigJam uses a sticky note icon to add notes visually on the canvas.

2. Step 2: Compare options with this method

   Click the sticky note icon and then click on the canvas correctly describes clicking the sticky note icon and placing it on the canvas.

3. Final Answer:

   Click the sticky note icon and then click on the canvas -> Option A

4. Quick Check:

   Sticky note icon click = Add note [OK]

Hint: Use the sticky note icon, not code or tables [OK]

Common Mistakes:

• Trying to add sticky notes via code
• Confusing shapes with sticky notes
• Looking for table insertion instead

3. Given a FigJam board with 3 sticky notes connected by arrows, what does this setup best represent?

medium

A. A list of tasks with deadlines

B. A sequence of related ideas or steps

C. A random collection of unrelated notes

D. A detailed financial chart

Solution

1. Step 1: Understand the meaning of connected sticky notes

   Connecting sticky notes with arrows shows relationships or flow between ideas.

2. Step 2: Match the setup to the options

   A sequence of related ideas or steps describes a sequence or related ideas, which fits the connected notes.

3. Final Answer:

   A sequence of related ideas or steps -> Option B

4. Quick Check:

   Connected notes = Related ideas [OK]

Hint: Arrows show flow or connection between ideas [OK]

Common Mistakes:

• Assuming connections mean deadlines
• Thinking connections are random
• Confusing notes with charts

4. You tried to connect two sticky notes with an arrow but it didn't work. What is the most likely reason?

medium

A. Sticky notes cannot be connected with arrows in FigJam

B. The board is locked and cannot be edited

C. You need to write a script to connect notes

D. You didn't select the connector tool before drawing the arrow

Solution

1. Step 1: Check the method to connect sticky notes

   Connecting notes requires selecting the connector tool first.

2. Step 2: Evaluate the options

   You didn't select the connector tool before drawing the arrow correctly identifies the missing step of selecting the connector tool.

3. Final Answer:

   You didn't select the connector tool before drawing the arrow -> Option D

4. Quick Check:

   Connector tool needed = Connect notes [OK]

Hint: Always select connector tool before linking notes [OK]

Common Mistakes:

• Believing sticky notes can't connect
• Thinking scripting is needed
• Not checking if board is locked

5. You want to organize a brainstorming session in FigJam with multiple teams contributing ideas. Which approach best ensures clear collaboration?

hard

A. Create separate frames for each team and use connectors to link related ideas

B. Let all teams add sticky notes randomly on one big canvas without structure

C. Use only text boxes without connectors or shapes

D. Export ideas to a spreadsheet and brainstorm there instead

Solution

1. Step 1: Identify best practices for team collaboration in FigJam

   Using frames to separate teams and connectors to show relationships helps organize ideas clearly.

2. Step 2: Compare options for clarity and collaboration

   Create separate frames for each team and use connectors to link related ideas uses structure and visual links, which supports clear teamwork.

3. Final Answer:

   Create separate frames for each team and use connectors to link related ideas -> Option A

4. Quick Check:

   Frames + connectors = Clear collaboration [OK]

Hint: Use frames and connectors to organize team ideas visually [OK]

Common Mistakes:

• Allowing random note placement
• Using only text boxes without visuals
• Switching tools mid-brainstorm