feat(dt): add Figma MCP integration for DT artifact export#1222
feat(dt): add Figma MCP integration for DT artifact export#1222DigitalMartyn wants to merge 9 commits intomicrosoft:mainfrom
Conversation
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
|
@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
DigitalMartyn
force-pushed
the
feature/figma-mcp-integration
branch
from
be43ae7 to
14d3a5f
Compare
rezatnoMsirhC
left a comment
rezatnoMsirhC
left a comment
There was a problem hiding this comment.
This looks pretty neat! Thanks for working on this and testing! I'm still learning so hopefully my comments make sense.
| 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/*'] |
There was a problem hiding this comment.
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:
| tools: ['read_file', 'figma/*'] | |
| tools: | |
| - read_file | |
| - figma/whoami | |
| - figma/create_new_file | |
| - figma/use_figma | |
| - figma/get_figjam | |
| - figma/generate_diagram |
| * 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 |
There was a problem hiding this comment.
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).
|
|
||
| If a field is missing from the artifact, omit that row. Do not invent placeholder data. | ||
|
|
||
| 8. Report Results: |
There was a problem hiding this comment.
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.
|
|
||
| # DT Figma Export | ||
|
|
||
| ## Overview |
There was a problem hiding this comment.
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.
| "figma": { | ||
| "type": "http", | ||
| "url": "https://mcp.figma.com/mcp" | ||
| } |
There was a problem hiding this comment.
#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.
| ## 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. |
There was a problem hiding this comment.
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.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #1222 +/- ##
==========================================
- Coverage 87.65% 87.64% -0.02%
==========================================
Files 61 61
Lines 9315 9315
==========================================
- Hits 8165 8164 -1
- Misses 1150 1151 +1
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
WilliamBerryiii
left a comment
WilliamBerryiii
left a comment
There was a problem hiding this comment.
Clean, well-structured integration. The export prompt covers layout, error handling, rate limits, and beta disclosure. Method coverage in dt-coach.agent.md targets the right milestones with send: false. Installer SKILL.md and user docs are solid.
Two collection/documentation gaps to close before merge:
-
collections/design-thinking.collection.md— The YAML manifests were updated but the descriptive markdown has no bullet for the new prompt. See inline comment oncollections/design-thinking.collection.yml. -
docs/getting-started/mcp-configuration.md— The canonical MCP setup guide still says "four curated MCP servers" and has no figma section. See inline comment ondocs/design-thinking/figma-export.md.
| - path: .github/prompts/design-thinking/dt-figma-export.prompt.md | ||
| kind: prompt | ||
| maturity: preview |
There was a problem hiding this comment.
RI-01 — collections/design-thinking.collection.md not updated
Both YAML collection manifests (design-thinking.collection.yml and hve-core-all.collection.yml) correctly add the dt-figma-export entry, but collections/design-thinking.collection.md does not include a corresponding descriptive bullet.
Per copilot-instructions.md:
When adding, updating, or removing prompt instructions, custom agents, subagents, or skills, update all affected
collections/*.collection.ymlandcollections/*.collection.mdfiles.
Suggested addition (alongside the other prompt bullets in the DT collection markdown):
- **DT Figma Export** — Export Design Thinking artifacts to collaborative FigJam boards or Figma Design files using the official Figma MCP server.There was a problem hiding this comment.
RI-01 — Added DT Figma Export bullet to collections/design-thinking.collection.md.
There was a problem hiding this comment.
RI-08 — docs/getting-started/mcp-configuration.md not updated
The installer SKILL.md correctly adds the figma server to its MCP table and template, but the canonical user-facing MCP setup guide at docs/getting-started/mcp-configuration.md was not updated. That page currently documents "four curated MCP servers" with no mention of figma.
Gaps in mcp-configuration.md:
- Server count in the introduction still says "four curated MCP servers"
- Agent MCP Dependencies table has no figma row
- No
### figmaproperty-table section (every other server has one) - Complete Configuration Template JSON block is missing the figma entry
keywordsfrontmatter does not includefigmaorfigjam
Suggested ### figma section (following the pattern of the existing server sections):
### figma
| Property | Value |
|----------|-------|
| Type | `http` |
| URL | `https://mcp.figma.com/mcp` |
| Auth | Browser-based OAuth (launches on first call) |
| Local install | None |
| Used by | `dt-figma-export` prompt |There was a problem hiding this comment.
RI-08 — Updated docs/getting-started/mcp-configuration.md:
"four curated" → "five curated"
Added ### figma section with property table, auth notes, and plan requirements
Added dt-figma-export row to Agent MCP Dependencies table
Added figma entry to the Complete Configuration Template JSON
Added Figma to authentication troubleshooting
Added Figma MCP Server to References
Added figma and figjam to frontmatter keywords
…uide - add DT Figma Export bullet to design-thinking.collection.md - update mcp-configuration.md: five servers, figma section, agent table, template JSON - add figma/figjam keywords and authentication troubleshooting 📝 - Generated by Copilot
- replace figma/* wildcard with explicit tool list in frontmatter - add figma/ prefix to all tool references for MCP disambiguation - remove ## Overview heading to match DT prompt conventions - relocate Step 8 (Report Results) into Workflow Steps sequence - move Beta Notice into Prerequisites for early visibility 🔧 - Generated by Copilot
4 participants
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 filesfigma-export.md--- User-facing setup and usage documentationModified files:
dt-coach.agent.md--- Add Export to Figma handoff buttondt-method-next.prompt.md--- Add FigJam export mention at milestonesmcp.json--- Add figma HTTP server entrySKILL.md--- Add figma to MCP config tables and templatesdt-figma-exportprompt in both collectionsdt-coach.md--- Add Figma export to Next Steps.cspell.json--- Addfigjam,whiteboarding,collabto dictionaryRelated 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:
AI Artifacts:
prompt-builderagent and addressed all feedback.github/prompts/*.prompt.md).github/agents/*.agent.md).github/skills/*/SKILL.md)Sample Prompts
User Request:
Or from the DT Coach agent after completing a synthesis milestone:
Execution Flow:
/dt-figma-exportor DT Coach offers export at milestone completionOutput Artifacts:
Success Indicators:
Testing
Automated Validation (all passing)
npm run lint:mdnpm run spell-checknpm run lint:frontmatternpm run plugin:validatenpm run plugin:generateLive 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
AI Artifact Contributions
/prompt-analyzeto review contributionprompt-builderreviewRequired Automated Checks
npm run lint:mdnpm run spell-checknpm run lint:frontmatternpm run validate:skillsnpm run lint:md-linksnpm run lint:psnpm run plugin:generateSecurity Considerations
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