Skip to main content

Export DT Artifacts to Figma

The Design Thinking collection includes an optional Figma export prompt for teams who want to move .copilot-tracking/dt/ artifacts onto collaborative boards or structured design files.

When to Use​

Use Figma export when your team wants to review or facilitate around artifacts such as:

  • Method 1 stakeholder maps and constraints
  • Method 3 synthesis themes and evidence clusters
  • Method 4 idea clusters and convergence candidates
  • Method 5 concepts and evaluation notes
  • Method 6 prototype plans and testing hypotheses

The export is additive to Design Thinking coaching. It does not replace .copilot-tracking/dt/ artifacts.

Output Types​

TypeToolBest For
FigJam (default)FigJam boardCollaborative whiteboarding: sticky notes, text, connectors, and diagrams. Closest to workshop facilitation.
DesignFigma Design fileStructured frames with auto-layout for higher-fidelity visual outputs. Good for stakeholder presentations.
BothOne of eachTeams that want both a working board and a polished summary.

Prerequisites​

  • A completed or in-progress DT project under .copilot-tracking/dt/{project-slug}/
  • A Figma account with a Dev or Full seat on a Professional, Organization, or Enterprise plan (recommended for sustained usage)
  • The figma MCP server configured in your workspace

Setup​

Add the Figma MCP server to .vscode/mcp.json:

{
  "servers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

No local installation, API keys, or credential files are required. The Figma MCP server is hosted by Figma and handles authentication via browser OAuth on first use.

After adding the configuration, restart VS Code. You can verify the connection by typing #whoami in GitHub Copilot Chat, which should return your Figma identity and plan details.

Usage​

Basic export (FigJam board from latest method)​

/dt-figma-export project-slug=factory-floor-maintenance

Export a specific method​

/dt-figma-export project-slug=customer-support-ai method=1 board-title="Stakeholder Map"

Export as Figma Design file​

/dt-figma-export project-slug=warehouse-onboarding method=3 output-type=design

Export both formats​

/dt-figma-export project-slug=incident-response output-type=both

What Gets Exported​

FigJam Boards​

FigJam exports create a collaborative whiteboard with:

  • Header section with project name, method name, date, and status.
  • Theme/category sections arranged left to right with color-coded sticky notes.
  • Mermaid-generated diagrams for stakeholder relationships (M1), theme-evidence clusters (M3), and test flows (M8).
  • Footer section with summary, open questions, or how-might-we prompts.

Figma Design Files​

Design file exports create structured frames with:

  • Auto-layout frames with consistent spacing and alignment across all content.
  • Card components where each artifact item is rendered as a styled card with background colors indicating type (evidence, insight, question, decision, constraint).
  • Typography hierarchy using title (24px), body (16px), and label (12px) text.

Rate Limits​

The Figma MCP server applies rate limits based on your Figma plan:

PlanLimit
Starter, View, or Collab seatsUp to 6 tool calls per month
Dev or Full seats on Professional/Organization/EnterprisePer-minute limits (Figma REST API Tier 1)

A typical DT export session uses 5-15 tool calls depending on the number of artifacts. Teams on Starter plans should batch their exports carefully.

Beta Notice​

The use_figma write capability is currently in beta and free during the beta period. Figma has indicated this will eventually become a usage-based paid feature. Read-only tools (get_figjam, get_screenshot, generate_diagram) are unaffected.

Troubleshooting​

IssueSolution
figma tools not availableAdd the Figma server to .vscode/mcp.json and restart VS Code
Authentication failsEnsure your browser can reach mcp.figma.com and complete the OAuth flow
Rate limit exceededCheck your Figma plan; upgrade to a Dev or Full seat for higher limits
use_figma rejects writesVerify you have edit access to the target Figma file or create a new one
Large exports timeoutBreak the export into per-method calls instead of exporting the full project at once

Next Steps​

Brought to you by microsoft/hve-core

🤖 Crafted with precision by ✨Copilot following brilliant human instruction, then carefully refined by our team of discerning human reviewers.