FigJam Is Now Your Coding Agent’s Whiteboard Too | Figma Blog

FigJam is being positioned as a shared whiteboard for coding agents and engineering teams. New MCP skills let agents generate architecture and ER diagrams, write to and read from FigJam, and turn research or project plans into collaborative visual boards. The workflow connects agent-generated planning, human review, and implementation, reducing architectural confusion as teams ship code faster.

Turning Agent Output into Visual Plans

• The author built on Figma’s existing generate_diagram MCP tool to support more complex architecture and ERD layouts.
• The new figma-use-figjam MCP skill allows agents to read and write directly to FigJam boards.
• Skills such as generate-project-plan can transform documentation, codebases, and conversations into visual project plans.
• Diagrams can include:
  • Architecture and entity-relationship diagrams
  • Notes and annotations
  • Code blocks
  • Implementation context and technical decisions

Step 1: Research, Plan, and Visualize

• The coding agent gathers relevant documentation, codebase structure, existing patterns, and implementation constraints.
• It evaluates possible solutions, researches tradeoffs, identifies affected services and files, and proposes stacked PRs and testing strategies.
• Instead of leaving the plan in a dense Markdown document, the agent exports it to FigJam as an interactive architecture review.
• Visualizing the options helps teams understand the system and identify the cleanest approach more quickly.

Step 2: Collaborate Before Coding

• Engineers share the FigJam board with teammates for asynchronous or live review.
• Team members can comment on concrete design questions, such as:
  • Whether a tool should support multiple file types
  • Whether it should accept a folderId
  • Where newly created files should be stored
• FigJam provides a collaborative format that preserves technical context for distributed teams.
• Teams can review and refine agent-generated diagrams before implementation begins.

Step 3: Feed Decisions Back to the Agent

• After review, the author uses the get_figjam tool to retrieve the board’s diagrams, comments, and decisions.
• The coding agent uses that context to update the implementation plan and begin coding.
• Pull requests can link back to the FigJam board, preserving the architectural rationale alongside the code.
• Because the design has already been reviewed, the resulting PR is easier to evaluate and merge.

Broader Figma Integration

• The workflow builds on use_figma, which lets agents create or edit designs directly on the Figma canvas using real components.
• create_new_file allows agents to generate designs in new Figma files.
• Together, these capabilities extend agent collaboration beyond code into design, architecture, planning, and technical communication.

Teams adopting coding agents can use FigJam as a reviewable source of shared context: let agents generate the initial plan, have humans refine the architecture visually, then return the approved decisions to the agent for implementation.