feat(dt): add Figma MCP integration for DT artifact export by DigitalMartyn · Pull Request #1222 · microsoft/hve-core

DigitalMartyn · 2026-03-27T13:51:07Z

Pull Request

Description

Add FigJam board and Figma Design file export capability to the Design Thinking collection using the official Figma MCP server (hosted HTTP at mcp.figma.com). No local server installation or credential files required.

New files:

dt-figma-export.prompt.md --- Export DT artifacts to FigJam/Design files
figma-export.md --- User-facing setup and usage documentation

Modified files:

dt-coach.agent.md --- Add Export to Figma handoff button
dt-method-next.prompt.md --- Add FigJam export mention at milestones
mcp.json --- Add figma HTTP server entry
SKILL.md --- Add figma to MCP config tables and templates
Collections --- Register dt-figma-export prompt in both collections
dt-coach.md --- Add Figma export to Next Steps
.cspell.json --- Add figjam, whiteboarding, collab to dictionary

Related Issue(s)

Replaces the Mural MCP approach from PR #1221. Addresses the blocking supply chain concern by using an official first-party hosted MCP server with no local dependencies.

Type of Change

Code & Documentation:

New feature (non-breaking change adding functionality)
Documentation update

AI Artifacts:

Reviewed contribution with prompt-builder agent and addressed all feedback
Copilot prompt (.github/prompts/*.prompt.md)
Copilot agent (.github/agents/*.agent.md)
Copilot skill (.github/skills/*/SKILL.md)

Sample Prompts

User Request:

/dt-figma-export project-slug=contoso-retail

Or from the DT Coach agent after completing a synthesis milestone:

"Would you like me to export your synthesis themes to a FigJam board?"

Execution Flow:

User invokes /dt-figma-export or DT Coach offers export at milestone completion
Prompt reads method context files from the project workspace
Determines current DT method (M1--M9) and selects the layout template
Authenticates via Figma OAuth (browser popup, one-time)
Creates a FigJam board or Figma design frame with sections, stickies, and connectors
Returns the board URL to the user

Output Artifacts:

FigJam board with method-specific sections (e.g., for M3 Synthesis: Themes, Clusters, Evidence, HMW statements)
Or Figma design frame with structured layout for higher-fidelity milestones
Board URL printed in chat for immediate access

Success Indicators:

Board opens in Figma with correct sections and content
Stickies contain actual project data, not placeholders
Layout follows the method-specific template from the prompt

Testing

Automated Validation (all passing)

Check	Command	Result
Markdown lint	`npm run lint:md`	0 errors in contributed files
Spell check	`npm run spell-check`	0 issues
Frontmatter	`npm run lint:frontmatter`	0 errors
Plugin validate	`npm run plugin:validate`	14 collections, 0 errors
Plugin generate	`npm run plugin:generate`	14 plugins regenerated, 0 diff

Live Smoke Test

Connected to Figma MCP and created a test FigJam board with 6 sections and 31 stickies representing M3 Synthesis output. Screenshot verified all sections populated correctly.

Checklist

Required Checks

Documentation is updated (if applicable)
Files follow existing naming conventions
Changes are backwards compatible (if applicable)
Tests added for new functionality (if applicable)

AI Artifact Contributions

Used /prompt-analyze to review contribution
Addressed all feedback from prompt-builder review
Verified contribution follows common standards and type-specific requirements

Required Automated Checks

Markdown linting: npm run lint:md
Spell checking: npm run spell-check
Frontmatter validation: npm run lint:frontmatter
Skill structure validation: npm run validate:skills
Link validation: npm run lint:md-links
PowerShell analysis: npm run lint:ps
Plugin freshness: npm run plugin:generate

Security Considerations

This PR does not contain any sensitive or NDA information
Any new dependencies have been reviewed for security issues
Security-related scripts follow the principle of least privilege

No third-party packages, no local builds, no credential files. Figma MCP is an official hosted HTTP server operated by Figma Inc, listed in the MCP registry. Authentication is browser-based OAuth managed entirely by Figma.

Additional Notes

Additive only --- no existing DT workflows are modified or broken
Users who don't configure the Figma MCP server simply won't see export offers
Requires a Figma account (Starter plan is free; Enterprise plans have higher rate limits)

Add FigJam board and Figma Design file export capability to the Design Thinking collection using the official Figma MCP server (hosted HTTP at mcp.figma.com). No local server installation or credential files required. New files: - dt-figma-export.prompt.md: Export DT artifacts to FigJam/Design files - figma-export.md: User-facing setup and usage documentation Modified files: - dt-coach.agent.md: Add Export to Figma handoff button - dt-method-next.prompt.md: Add FigJam export mention at milestones - mcp.json: Add figma HTTP server entry - SKILL.md: Add figma to MCP config tables and templates - Collections: Register dt-figma-export prompt in both collections - dt-coach.md: Add Figma export to Next Steps - .cspell.json: Add figjam, whiteboarding, collab to dictionary

DigitalMartyn · 2026-03-27T19:03:24Z

@microsoft-github-policy-service agree company="Microsoft"

…-based layout - replace outdated sticky-based persona card with validated shape-based buildPersona() pattern - add 9 category rows with headings-above-rows layout using createShapeWithText - support mixed font ranges for intro block (name, role, body copy) - add behavioural to cspell dictionary 🎨 - Generated by Copilot

- add buildProjectDetails() reusable function for FigJam boards - blue section with field rows (Customer, Project, Sprint, Workstream, Prototype) - positioned at (0, 0) with exercise templates offset below - update workflow step 5 to reference project details placement 🎨 - Generated by Copilot

🧹 - Generated by Copilot

rezatnoMsirhC

This looks pretty neat! Thanks for working on this and testing! I'm still learning so hopefully my comments make sense.

rezatnoMsirhC · 2026-04-01T17:45:03Z

.github/prompts/design-thinking/dt-figma-export.prompt.md

+description: 'Export Design Thinking artifacts to a collaborative FigJam board or Figma Design file using the official Figma MCP server - Brought to you by microsoft/hve-core'
+agent: 'DT Coach'
+argument-hint: "project-slug=... [board-title=...] [method=latest] [output-type=figjam]"
+tools: ['read_file', 'figma/*']


I'm not sure if wildcards are supported here. I suspect you can remove figma/* and this will still work as expected as the Figma MCP tools available in the environment will be accessible at runtime anyway. If you want granular figma tool access, I think you can specify entries like figma/get_figjam.

Using Figma Developers: Figma MCP Server > Core server features > Tools and prompts as a reference:

Suggested change

tools: ['read_file', 'figma/*']

tools:

- read_file

- figma/whoami

- figma/create_new_file

- figma/use_figma

- figma/get_figjam

- figma/generate_diagram

rezatnoMsirhC · 2026-04-01T18:16:24Z

.github/prompts/design-thinking/dt-figma-export.prompt.md

+* The user MUST have a Figma account with a Dev or Full seat on a Professional, Organization, or Enterprise plan for sustained usage. Starter plans are limited to 6 tool calls per month.
+* Authentication happens automatically via browser OAuth on first use. No credential files or API keys are required.
+
+## Workflow Steps


The Figma MCP tools referenced here are not prefaced by figma/, which may result in ambiguity between these Figma MCP tools and those of other MCP servers with the same name. It would probably be best to revise them (e.g. whoami -> figma/whoami).

rezatnoMsirhC · 2026-04-01T18:18:16Z

.github/prompts/design-thinking/dt-figma-export.prompt.md

+
+If a field is missing from the artifact, omit that row. Do not invent placeholder data.
+
+8. Report Results:


Is item 8 supposed to follow item 7 in the ## Workflow Steps section way above? The ## Exercise Templates section comes between ## Workflow Steps item 7 and item 8.

rezatnoMsirhC · 2026-04-01T18:22:06Z

.github/prompts/design-thinking/dt-figma-export.prompt.md

+
+# DT Figma Export
+
+## Overview


nitpick: It looks like the other design-thinking prompts do not have an ## Overview section before ## Inputs and instead go from H1 title (e.g. # DT Figma Export) to ## Inputs. For consistency I think you can remove ## Overview but keep the overview contents directly under # DT Figma Export and above ## Inputs.

rezatnoMsirhC · 2026-04-01T18:26:08Z

.vscode/mcp.json

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


#1144 removed .vscode/mcp.json in favor of .vscode/mcp.json.sample which serves as a template that users can opt-in to using as their own local/untracked .vscode/mcp.json as needed. Feel free to keep this as-is in your local workspace, but pull the latest changes so your .vscode/mcp.json isn't tracked in the repo.

rezatnoMsirhC · 2026-04-01T18:33:51Z

.github/prompts/design-thinking/dt-figma-export.prompt.md

+## Beta Notice
+
+The `use_figma` write tool is currently in beta and free during the beta period. Figma has indicated it will eventually become a usage-based paid feature. The read-only tools (`get_figjam`, `get_screenshot`, `generate_diagram`) are not affected by this and will continue to work.


I wonder if it would be better to have this beta notice in the ## Prerequisites section since figma/use_figma supports all write operations in ## Workflow Steps, and if write operations aren't available, the workflow could essentially break mid-session without prior warning.

DigitalMartyn requested a review from a team as a code owner March 27, 2026 13:51

DigitalMartyn added 2 commits March 27, 2026 19:37

DigitalMartyn force-pushed the feature/figma-mcp-integration branch from be43ae7 to 14d3a5f Compare March 27, 2026 19:51

DigitalMartyn and others added 2 commits March 28, 2026 00:15

chore(prompts): use placeholder tokens in project details usage example

0d9ec14

🧹 - Generated by Copilot

Merge branch 'main' into feature/figma-mcp-integration

49d03c1

rezatnoMsirhC reviewed Apr 1, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(dt): add Figma MCP integration for DT artifact export#1222

feat(dt): add Figma MCP integration for DT artifact export#1222
DigitalMartyn wants to merge 5 commits intomicrosoft:mainfrom
DigitalMartyn:feature/figma-mcp-integration

DigitalMartyn commented Mar 27, 2026

Uh oh!

DigitalMartyn commented Mar 27, 2026

Uh oh!

rezatnoMsirhC left a comment

Uh oh!

rezatnoMsirhC Apr 1, 2026

Uh oh!

rezatnoMsirhC Apr 1, 2026

Uh oh!

rezatnoMsirhC Apr 1, 2026

Uh oh!

rezatnoMsirhC Apr 1, 2026

Uh oh!

rezatnoMsirhC Apr 1, 2026

Uh oh!

rezatnoMsirhC Apr 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-tools: ['read_file', 'figma/*']
+tools:
+  - read_file
+  - figma/whoami
+  - figma/create_new_file
+  - figma/use_figma
+  - figma/get_figjam
+  - figma/generate_diagram


		If a field is missing from the artifact, omit that row. Do not invent placeholder data.

		8. Report Results:

		## Beta Notice

		The `use_figma` write tool is currently in beta and free during the beta period. Figma has indicated it will eventually become a usage-based paid feature. The read-only tools (`get_figjam`, `get_screenshot`, `generate_diagram`) are not affected by this and will continue to work.

Conversation

DigitalMartyn commented Mar 27, 2026

Pull Request

Description

Related Issue(s)

Type of Change

Sample Prompts

Testing

Automated Validation (all passing)

Live Smoke Test

Checklist

Required Checks

AI Artifact Contributions

Required Automated Checks

Security Considerations

Additional Notes

Uh oh!

DigitalMartyn commented Mar 27, 2026

Uh oh!

rezatnoMsirhC left a comment

Choose a reason for hiding this comment

Uh oh!

rezatnoMsirhC Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

rezatnoMsirhC Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

rezatnoMsirhC Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

rezatnoMsirhC Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

rezatnoMsirhC Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

rezatnoMsirhC Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants